feat: implement overlay messagebox, unify messagebox and dialog layout.
This commit is contained in:
rabbitism
@@ -15,11 +15,15 @@
|
||||
<Setter Property="WindowStartupLocation" Value="CenterOwner" />
|
||||
<Setter Property="ExtendClientAreaTitleBarHeightHint" Value="1" />
|
||||
<Setter Property="ExtendClientAreaToDecorationsHint" Value="True" />
|
||||
<Setter Property="ExtendClientAreaChromeHints" Value="SystemChrome"/>
|
||||
<Setter Property="ExtendClientAreaChromeHints" Value="SystemChrome" />
|
||||
<Setter Property="SystemDecorations">
|
||||
<OnPlatform >
|
||||
<OnPlatform.Windows><SystemDecorations>Full</SystemDecorations></OnPlatform.Windows>
|
||||
<OnPlatform.Default><SystemDecorations>BorderOnly</SystemDecorations></OnPlatform.Default>
|
||||
<OnPlatform>
|
||||
<OnPlatform.Windows>
|
||||
<SystemDecorations>Full</SystemDecorations>
|
||||
</OnPlatform.Windows>
|
||||
<OnPlatform.Default>
|
||||
<SystemDecorations>BorderOnly</SystemDecorations>
|
||||
</OnPlatform.Default>
|
||||
</OnPlatform>
|
||||
</Setter>
|
||||
<Setter Property="CanResize" Value="False" />
|
||||
@@ -29,35 +33,34 @@
|
||||
<Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
|
||||
<Border Background="{TemplateBinding Background}" IsHitTestVisible="False" />
|
||||
<Panel Margin="{TemplateBinding WindowDecorationMargin}" Background="Transparent" />
|
||||
<ChromeOverlayLayer></ChromeOverlayLayer>
|
||||
<ChromeOverlayLayer />
|
||||
<Grid RowDefinitions="Auto, *, Auto">
|
||||
<Grid Grid.Row="0" ColumnDefinitions="*, Auto">
|
||||
<TextBlock
|
||||
Grid.Column="0"
|
||||
Margin="8,8,0,0"
|
||||
FontSize="14"
|
||||
FontWeight="Bold"
|
||||
TextTrimming="CharacterEllipsis"
|
||||
TextWrapping="NoWrap"
|
||||
Text="{TemplateBinding Title}" />
|
||||
<Button
|
||||
Name="{x:Static u:MessageBoxWindow.PART_CloseButton}"
|
||||
Grid.Column="1"
|
||||
Margin="0,4,4,0"
|
||||
Theme="{DynamicResource CloseButton}"/>
|
||||
</Grid>
|
||||
<Grid
|
||||
Grid.Row="1"
|
||||
Margin="{TemplateBinding Padding}"
|
||||
MaxWidth="{DynamicResource MessageBoxWindowContentMaxWidth}"
|
||||
ColumnDefinitions="Auto, *">
|
||||
<Grid Grid.Row="0" ColumnDefinitions="Auto, *, Auto" Margin="24 24 24 0">
|
||||
<PathIcon
|
||||
Name="PART_Icon"
|
||||
Grid.Column="0"
|
||||
Width="24"
|
||||
Height="24"
|
||||
Margin="0,0,12,0"
|
||||
IsHitTestVisible="False"
|
||||
VerticalAlignment="Center" />
|
||||
<TextBlock
|
||||
Grid.Column="1"
|
||||
FontSize="14"
|
||||
FontWeight="Bold"
|
||||
IsHitTestVisible="False"
|
||||
Text="{TemplateBinding Title}"
|
||||
TextTrimming="CharacterEllipsis"
|
||||
TextWrapping="NoWrap" />
|
||||
<Button
|
||||
Name="{x:Static u:MessageBoxWindow.PART_CloseButton}"
|
||||
Grid.Column="2"
|
||||
Theme="{DynamicResource CloseButton}" />
|
||||
</Grid>
|
||||
<Grid
|
||||
Grid.Row="1"
|
||||
MaxWidth="{DynamicResource MessageBoxWindowContentMaxWidth}"
|
||||
Margin="{TemplateBinding Padding}"
|
||||
ColumnDefinitions="Auto, *">
|
||||
<ScrollViewer
|
||||
Grid.Column="1"
|
||||
MaxHeight="300"
|
||||
@@ -73,7 +76,7 @@
|
||||
</Grid>
|
||||
<StackPanel
|
||||
Grid.Row="2"
|
||||
Margin="0,0,8,8"
|
||||
Margin="0,0,24,24"
|
||||
HorizontalAlignment="Right"
|
||||
Orientation="Horizontal">
|
||||
<Button
|
||||
@@ -85,17 +88,20 @@
|
||||
Name="{x:Static u:MessageBoxWindow.PART_NoButton}"
|
||||
Margin="8,0,0,0"
|
||||
Classes="Danger"
|
||||
Content="No" />
|
||||
Content="No"
|
||||
Theme="{DynamicResource SolidButton}" />
|
||||
<Button
|
||||
Name="{x:Static u:MessageBoxWindow.PART_YesButton}"
|
||||
Margin="8,0,0,0"
|
||||
Classes="Primary"
|
||||
Content="Yes" />
|
||||
Content="Yes"
|
||||
Theme="{DynamicResource SolidButton}" />
|
||||
<Button
|
||||
Name="{x:Static u:MessageBoxWindow.PART_OKButton}"
|
||||
Margin="8,0,0,0"
|
||||
Classes="Primary"
|
||||
Content="OK" />
|
||||
Content="OK"
|
||||
Theme="{DynamicResource SolidButton}" />
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</Panel>
|
||||
@@ -134,6 +140,138 @@
|
||||
<Setter Property="Foreground" Value="{DynamicResource SemiGreen6}" />
|
||||
<Setter Property="Data" Value="{DynamicResource DialogSuccessIconGlyph}" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
|
||||
<ControlTheme x:Key="{x:Type u:MessageBoxControl}" TargetType="u:MessageBoxControl">
|
||||
<Setter Property="CornerRadius" Value="12" />
|
||||
<Setter Property="Padding" Value="48 24"></Setter>
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="u:MessageBoxControl">
|
||||
<Border
|
||||
Padding="0"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
Classes="Shadow"
|
||||
ClipToBounds="True"
|
||||
CornerRadius="{TemplateBinding CornerRadius}"
|
||||
IsHitTestVisible="True"
|
||||
Theme="{DynamicResource CardBorder}">
|
||||
<Grid RowDefinitions="Auto, *, Auto">
|
||||
<Grid Grid.Row="0" ColumnDefinitions="Auto, *, Auto">
|
||||
<Panel
|
||||
Name="{x:Static u:DialogControl.PART_TitleArea}"
|
||||
Grid.Column="0"
|
||||
Grid.ColumnSpan="3"
|
||||
Background="Transparent" />
|
||||
<PathIcon
|
||||
Name="PART_Icon"
|
||||
Grid.Column="0"
|
||||
Width="24"
|
||||
Height="24"
|
||||
Margin="24,24,8,0"
|
||||
IsHitTestVisible="False"
|
||||
VerticalAlignment="Center" />
|
||||
<TextBlock
|
||||
Name="PART_Title"
|
||||
Grid.Column="1"
|
||||
Margin="0,24,0,0"
|
||||
FontSize="16"
|
||||
VerticalAlignment="Center"
|
||||
FontWeight="Bold"
|
||||
Text="{TemplateBinding Title}"
|
||||
IsHitTestVisible="False"
|
||||
TextTrimming="CharacterEllipsis"
|
||||
TextWrapping="NoWrap" />
|
||||
<Button
|
||||
Name="{x:Static u:MessageBoxWindow.PART_CloseButton}"
|
||||
Grid.Column="2"
|
||||
Margin="0,24,24,0"
|
||||
Theme="{DynamicResource CloseButton}" />
|
||||
</Grid>
|
||||
<Grid
|
||||
Grid.Row="1"
|
||||
MaxWidth="{DynamicResource MessageBoxWindowContentMaxWidth}"
|
||||
Margin="{TemplateBinding Padding}">
|
||||
<ScrollViewer
|
||||
MaxHeight="300"
|
||||
HorizontalScrollBarVisibility="Disabled"
|
||||
VerticalScrollBarVisibility="Auto">
|
||||
<TextBlock
|
||||
Name="PART_ContentPresenter"
|
||||
VerticalAlignment="Center"
|
||||
Text="{TemplateBinding Content}"
|
||||
TextAlignment="Left"
|
||||
TextWrapping="Wrap" />
|
||||
</ScrollViewer>
|
||||
</Grid>
|
||||
<StackPanel
|
||||
Grid.Row="2"
|
||||
Margin="24,0,24,24"
|
||||
HorizontalAlignment="Right"
|
||||
Orientation="Horizontal">
|
||||
<Button
|
||||
Name="{x:Static u:MessageBoxControl.PART_CancelButton}"
|
||||
Margin="8,0,0,0"
|
||||
Classes="Tertiary"
|
||||
Content="Cancel" />
|
||||
<Button
|
||||
Name="{x:Static u:MessageBoxControl.PART_NoButton}"
|
||||
Margin="8,0,0,0"
|
||||
Classes="Danger"
|
||||
Content="No"
|
||||
Theme="{DynamicResource SolidButton}" />
|
||||
<Button
|
||||
Name="{x:Static u:MessageBoxControl.PART_YesButton}"
|
||||
Margin="8,0,0,0"
|
||||
Classes="Primary"
|
||||
Content="Yes"
|
||||
Theme="{DynamicResource SolidButton}" />
|
||||
<Button
|
||||
Name="{x:Static u:MessageBoxControl.PART_OKButton}"
|
||||
Margin="8,0,0,0"
|
||||
Classes="Primary"
|
||||
Content="OK"
|
||||
Theme="{DynamicResource SolidButton}" />
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</Border>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
<Style Selector="^[MessageIcon=None] /template/ PathIcon#PART_Icon">
|
||||
<Setter Property="IsVisible" Value="False" />
|
||||
</Style>
|
||||
<Style Selector="^[MessageIcon=None] /template/ TextBlock#PART_Title">
|
||||
<Setter Property="Margin" Value="24 24 0 0" />
|
||||
</Style>
|
||||
<Style Selector="^[MessageIcon=Asterisk] /template/ PathIcon#PART_Icon, ^[MessageIcon=Information] /template/ PathIcon#PART_Icon">
|
||||
<Setter Property="IsVisible" Value="True" />
|
||||
<Setter Property="Foreground" Value="{DynamicResource SemiBlue6}" />
|
||||
<Setter Property="Data" Value="{DynamicResource DialogInformationIconGlyph}" />
|
||||
</Style>
|
||||
<Style Selector="^[MessageIcon=Error] /template/ PathIcon#PART_Icon, ^[MessageIcon=Hand] /template/ PathIcon#PART_Icon, ^[MessageIcon=Stop] /template/ PathIcon#PART_Icon">
|
||||
<Setter Property="IsVisible" Value="True" />
|
||||
<Setter Property="Foreground" Value="{DynamicResource SemiRed6}" />
|
||||
<Setter Property="Data" Value="{DynamicResource DialogErrorIconGlyph}" />
|
||||
</Style>
|
||||
<Style Selector="^[MessageIcon=Exclamation] /template/ PathIcon#PART_Icon">
|
||||
<Setter Property="IsVisible" Value="True" />
|
||||
<Setter Property="Foreground" Value="{DynamicResource SemiYellow6}" />
|
||||
<Setter Property="Data" Value="{DynamicResource DialogWarningIconGlyph}" />
|
||||
</Style>
|
||||
<Style Selector="^[MessageIcon=Question] /template/ PathIcon#PART_Icon">
|
||||
<Setter Property="IsVisible" Value="True" />
|
||||
<Setter Property="Foreground" Value="{DynamicResource SemiBlue6}" />
|
||||
<Setter Property="Data" Value="{DynamicResource DialogQuestionIconGlyph}" />
|
||||
</Style>
|
||||
<Style Selector="^[MessageIcon=Warning] /template/ PathIcon#PART_Icon">
|
||||
<Setter Property="IsVisible" Value="True" />
|
||||
<Setter Property="Foreground" Value="{DynamicResource SemiOrange6}" />
|
||||
<Setter Property="Data" Value="{DynamicResource DialogWarningIconGlyph}" />
|
||||
</Style>
|
||||
<Style Selector="^[MessageIcon=Success] /template/ PathIcon#PART_Icon">
|
||||
<Setter Property="IsVisible" Value="True" />
|
||||
<Setter Property="Foreground" Value="{DynamicResource SemiGreen6}" />
|
||||
<Setter Property="Data" Value="{DynamicResource DialogSuccessIconGlyph}" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
</ResourceDictionary>
|
||||
|
||||
Reference in New Issue
Block a user