Skip to content

Commit

Permalink
fix: corrected m3 ContentDialog style
Browse files Browse the repository at this point in the history
  • Loading branch information
@Xiaoy312
Xiaoy312 committed Oct 26, 2022
1 parent f1f0b06 commit 40e9613
Show file tree
Hide file tree
Showing 3 changed files with 281 additions and 162 deletions.
296 changes: 178 additions & 118 deletions src/library/Uno.Material/Styles/Controls/v2/ContentDialog.xaml
View file
@@ -1,30 +1,55 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkit="using:Uno.UI.Toolkit"
mc:Ignorable="">

<x:Double x:Key="MaterialContentDialogMinWidth">320</x:Double>
<x:Double x:Key="MaterialContentDialogMaxWidth">548</x:Double>
<x:Double x:Key="MaterialContentDialogMinHeight">184</x:Double>
<x:Double x:Key="MaterialContentDialogMaxHeight">756</x:Double>
<GridLength x:Key="MaterialContentDialogContentDialogButtonSpacing">8</GridLength>
<!-- 28-CornerRadius doesnt match the general 24-Spacing; this is indeed correct. -->
<x:Double x:Key="MaterialContentDialogMinWidth">288</x:Double>
<x:Double x:Key="MaterialContentDialogMinHeight">132</x:Double>
<x:Double x:Key="MaterialContentDialogMaxWidth">560</x:Double>
<x:Double x:Key="MaterialContentDialogMaxHeight">560</x:Double>
<Thickness x:Key="MaterialContentDialogEdgeMargin">56</Thickness>
<Thickness x:Key="MaterialContentDialogPanelPadding">24</Thickness>
<CornerRadius x:Key="MaterialContentDialogCornerRadius">28</CornerRadius>
<GridLength x:Key="MaterialContentDialogButtonSpacing">8</GridLength>
<Thickness x:Key="MaterialContentDialogTitleToContentMargin">0,0,0,16</Thickness>
<Thickness x:Key="MaterialContentDialogCommandSpaceToContentMargin">0,24,0,0</Thickness>

<StaticResource x:Key="MaterialContentDialogBackground" ResourceKey="SurfaceBrush" />
<StaticResource x:Key="MaterialContentDialogSmokeLayerBackground" ResourceKey="OnSurfaceLowBrush" />

<!-- === title: OnSurface, Headline\Small -->
<StaticResource x:Key="MaterialContentDialogTitleForeground" ResourceKey="OnSurfaceBrush" />
<StaticResource x:Key="MaterialContentDialogContentForeground" ResourceKey="OnSurfaceLowBrush" />
<StaticResource x:Key="MaterialContentDialogTitleFontFamily" ResourceKey="MaterialHeadlineSmallFontFamily" />
<StaticResource x:Key="MaterialContentDialogTitleFontSize" ResourceKey="MaterialHeadlineSmallFontSize" />
<StaticResource x:Key="MaterialContentDialogTitleFontWeight" ResourceKey="MaterialHeadlineSmallFontWeight" />

<!-- === content: OnSurface\Variant, Body\Medium -->
<StaticResource x:Key="MaterialContentDialogContentForeground" ResourceKey="OnSurfaceVariantBrush" />
<StaticResource x:Key="MaterialContentDialogContentFontFamily" ResourceKey="MaterialBodyMediumFontFamily" />
<StaticResource x:Key="MaterialContentDialogContentFontSize" ResourceKey="MaterialBodyMediumFontSize" />
<StaticResource x:Key="MaterialContentDialogContentFontWeight" ResourceKey="MaterialBodyMediumFontWeight" />

<!-- note: MaterialContentDialogDefaultButtonStyle is the style associated with ContentDialog.DefaultButton (accented or CTA btn) -->
<Style x:Key="MaterialContentDialogButtonStyle"
TargetType="Button"
BasedOn="{StaticResource MaterialTextButtonStyle}">
<Setter Property="CornerRadius" Value="4" />

<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="VerticalAlignment" Value="Stretch" />
</Style>
<Style x:Key="MaterialContentDialogDefaultButtonStyle"
TargetType="Button"
BasedOn="{StaticResource MaterialFilledButtonStyle}">
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="VerticalAlignment" Value="Stretch" />
</Style>

<Style x:Key="MaterialContentDialogStyle"
TargetType="ContentDialog">
<Style x:Key="MaterialContentDialogStyle" TargetType="ContentDialog">

<Setter Property="Background" Value="{StaticResource SurfaceBrush}" />
<Setter Property="Background" Value="{StaticResource MaterialContentDialogBackground}" />
<Setter Property="Foreground" Value="{StaticResource MaterialContentDialogContentForeground}" />
<Setter Property="CornerRadius" Value="4" />
<Setter Property="CornerRadius" Value="{StaticResource MaterialContentDialogCornerRadius}" />

<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
Expand All @@ -37,6 +62,9 @@
<Setter.Value>
<ControlTemplate TargetType="ContentDialog">
<Border x:Name="Container">
<!-- DialogSpace/CommandSpace are reserved name from the control implementation. -->
<!-- `Title` is toggled from the impl; and `CommandSpace`, via visual-states -->

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="DialogShowingStates">
<VisualStateGroup.Transitions>
Expand All @@ -51,7 +79,7 @@
<Setter Target="SecondaryButton.IsTabStop" Value="True" />
<Setter Target="CloseButton.IsTabStop" Value="True" />
<Setter Target="LayoutRoot.Visibility" Value="Visible" />
<Setter Target="BackgroundElement.TabFocusNavigation" Value="Cycle" />
<Setter Target="RealBackgroundElement.TabFocusNavigation" Value="Cycle" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="DialogShowingWithoutSmokeLayer">
Expand Down Expand Up @@ -118,119 +146,151 @@
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DefaultButtonStates" />
<VisualStateGroup x:Name="DefaultButtonStates">
<VisualState x:Name="NoDefaultButton" />
<VisualState x:Name="PrimaryAsDefaultButton">
<VisualState.Setters>
<Setter Target="PrimaryButton.Style" Value="{StaticResource MaterialContentDialogDefaultButtonStyle}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="SecondaryAsDefaultButton">
<VisualState.Setters>
<Setter Target="SecondaryButton.Style" Value="{StaticResource MaterialContentDialogDefaultButtonStyle}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CloseAsDefaultButton">
<VisualState.Setters>
<Setter Target="CloseButton.Style" Value="{StaticResource MaterialContentDialogDefaultButtonStyle}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DialogBorderStates" />
</VisualStateManager.VisualStateGroups>

<Grid x:Name="LayoutRoot">
<Rectangle x:Name="SmokeLayerBackground"
Fill="{StaticResource OnSurfaceLowBrush}" />
<Rectangle x:Name="SmokeLayerBackground" Fill="{StaticResource MaterialContentDialogSmokeLayerBackground}" />

<!-- workaround: BackgroundElement is hidden, because it has an undesired shadow that the control impl applies. -->
<Border x:Name="BackgroundElement"
Background="{TemplateBinding Background}"
FlowDirection="{TemplateBinding FlowDirection}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
BackgroundSizing="InnerBorderEdge"
CornerRadius="{TemplateBinding CornerRadius}"
MinWidth="{StaticResource MaterialContentDialogMinWidth}"
MaxWidth="{StaticResource MaterialContentDialogMaxWidth}"
MinHeight="{StaticResource MaterialContentDialogMinHeight}"
MaxHeight="{StaticResource MaterialContentDialogMaxHeight}"
Margin="16"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Border.RenderTransform>
Opacity="0"
Visibility="Collapsed" />
<toolkit:ElevatedView x:Name="RealBackgroundElement"
Background="{TemplateBinding Background}"
BackgroundSizing="InnerBorderEdge"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Elevation="3"
FlowDirection="{TemplateBinding FlowDirection}"
MaxWidth="{StaticResource MaterialContentDialogMaxWidth}"
MaxHeight="{StaticResource MaterialContentDialogMaxHeight}"
Margin="{StaticResource MaterialContentDialogEdgeMargin}"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<toolkit:ElevatedView.RenderTransform>
<ScaleTransform x:Name="ScaleTransform" />
</Border.RenderTransform>

<Grid x:Name="DialogSpace">
<Grid.RowDefinitions>
<!-- 0: Title, 1: Content, 2: CommandSpace -->
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<ContentControl Grid.Row="0"
x:Name="Title"
Content="{TemplateBinding Title}"
ContentTemplate="{TemplateBinding TitleTemplate}"
FontSize="{StaticResource MaterialTitleMediumFontSize}"
FontWeight="{StaticResource MaterialTitleMediumFontWeight}"
FontFamily="{StaticResource MaterialTitleMediumFontFamily}"
Foreground="{StaticResource MaterialContentDialogTitleForeground}"
Padding="24,20,24,12"
HorizontalAlignment="Left"
VerticalAlignment="Top"
IsTabStop="False">
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
MaxLines="2"
TextWrapping="Wrap"
Margin="{TemplateBinding Padding}" />
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
<ScrollViewer Grid.Row="1"
x:Name="ContentScrollViewer"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Disabled"
Padding="24,4,24,8"
ZoomMode="Disabled"
IsTabStop="False">
<ContentPresenter x:Name="Content"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
FontSize="{StaticResource MaterialBodyMediumFontSize}"
FontWeight="{StaticResource MaterialBodyMediumFontWeight}"
FontFamily="{StaticResource MaterialBodyMediumFontFamily}"
Foreground="{TemplateBinding Foreground}"
TextWrapping="Wrap" />
</ScrollViewer>
<Grid x:Name="CommandSpace"
Grid.Row="2"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Padding="8"
XYFocusKeyboardNavigation="Enabled">

<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="CloseColumn" Width="Auto" />
<ColumnDefinition x:Name="SecondSpacer" Width="{StaticResource MaterialContentDialogContentDialogButtonSpacing}" />
<ColumnDefinition x:Name="SecondaryColumn" Width="Auto" />
<ColumnDefinition x:Name="FirstSpacer" Width="{StaticResource MaterialContentDialogContentDialogButtonSpacing}" />
<ColumnDefinition x:Name="PrimaryColumn" Width="Auto" />
</Grid.ColumnDefinitions>

<Button Grid.Column="0"
x:Name="CloseButton"
Content="{TemplateBinding CloseButtonText}"
IsTabStop="False"
ElementSoundMode="FocusOnly"
Style="{TemplateBinding CloseButtonStyle}" />
<Button Grid.Column="2"
x:Name="SecondaryButton"
Content="{TemplateBinding SecondaryButtonText}"
IsEnabled="{TemplateBinding IsSecondaryButtonEnabled}"
IsTabStop="False"
ElementSoundMode="FocusOnly"
Style="{TemplateBinding SecondaryButtonStyle}" />
<Button Grid.Column="4"
x:Name="PrimaryButton"
Content="{TemplateBinding PrimaryButtonText}"
IsEnabled="{TemplateBinding IsPrimaryButtonEnabled}"
IsTabStop="False"
ElementSoundMode="FocusOnly"
Style="{TemplateBinding PrimaryButtonStyle}" />
</toolkit:ElevatedView.RenderTransform>

<Grid>

<!--
workaround: this holder enforce a min-size when the content isnt enough, but allows for
the dialog to shrink below min-size if the screen dictates (better than being clipped).
- min-size on RealBackgroundElement will clip the dialog when the screen is too small
- min-size on DialogSpace will prevent Title from being centered when screen is too small
-->
<Border x:Name="MinSizeHolder"
MinWidth="{StaticResource MaterialContentDialogMinWidth}"
MinHeight="{StaticResource MaterialContentDialogMinHeight}" />

<Grid x:Name="DialogSpace" Margin="{StaticResource MaterialContentDialogPanelPadding}">
<Grid.RowDefinitions>
<!-- 0: Title, 1: Content, 2: CommandSpace -->
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<ContentControl Grid.Row="0"
x:Name="Title"
Content="{TemplateBinding Title}"
ContentTemplate="{TemplateBinding TitleTemplate}"
Foreground="{StaticResource MaterialContentDialogTitleForeground}"
FontFamily="{StaticResource MaterialContentDialogTitleFontFamily}"
FontSize="{StaticResource MaterialContentDialogTitleFontSize}"
FontWeight="{StaticResource MaterialContentDialogTitleFontWeight}"
Margin="{StaticResource MaterialContentDialogTitleToContentMargin}"
HorizontalAlignment="Center"
VerticalAlignment="Top"
IsTabStop="False">
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
MaxLines="2"
TextWrapping="Wrap"
Margin="{TemplateBinding Padding}" />
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
<ScrollViewer Grid.Row="1"
x:Name="ContentScrollViewer"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Disabled"
ZoomMode="Disabled"
IsTabStop="False">
<ContentPresenter x:Name="Content"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{TemplateBinding Foreground}"
FontFamily="{StaticResource MaterialContentDialogContentFontFamily}"
FontSize="{StaticResource MaterialContentDialogContentFontSize}"
FontWeight="{StaticResource MaterialContentDialogContentFontWeight}"
TextWrapping="Wrap" />
</ScrollViewer>
<Grid x:Name="CommandSpace"
Grid.Row="2"
Margin="{StaticResource MaterialContentDialogCommandSpaceToContentMargin}"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
XYFocusKeyboardNavigation="Enabled">

<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="CloseColumn" Width="Auto" />
<ColumnDefinition x:Name="SecondSpacer" Width="{StaticResource MaterialContentDialogButtonSpacing}" />
<ColumnDefinition x:Name="SecondaryColumn" Width="Auto" />
<ColumnDefinition x:Name="FirstSpacer" Width="{StaticResource MaterialContentDialogButtonSpacing}" />
<ColumnDefinition x:Name="PrimaryColumn" Width="Auto" />
</Grid.ColumnDefinitions>

<Button Grid.Column="0"
x:Name="CloseButton"
Content="{TemplateBinding CloseButtonText}"
IsTabStop="False"
ElementSoundMode="FocusOnly"
Style="{TemplateBinding CloseButtonStyle}" />
<Button Grid.Column="2"
x:Name="SecondaryButton"
Content="{TemplateBinding SecondaryButtonText}"
IsEnabled="{TemplateBinding IsSecondaryButtonEnabled}"
IsTabStop="False"
ElementSoundMode="FocusOnly"
Style="{TemplateBinding SecondaryButtonStyle}" />
<Button Grid.Column="4"
x:Name="PrimaryButton"
Content="{TemplateBinding PrimaryButtonText}"
IsEnabled="{TemplateBinding IsPrimaryButtonEnabled}"
IsTabStop="False"
ElementSoundMode="FocusOnly"
Style="{TemplateBinding PrimaryButtonStyle}" />

</Grid>
</Grid>
</Grid>
</Border>
</toolkit:ElevatedView>
</Grid>
</Border>
</ControlTemplate>
Expand Down

0 comments on commit 40e9613

Please sign in to comment.