Skip to content

Commit

Permalink
feat: Add M3 DatePicker
Browse files Browse the repository at this point in the history
  • Loading branch information
@kazo0
kazo0 committed May 9, 2022
1 parent 4129cb6 commit 42a5b2a
Show file tree
Hide file tree
Showing 3 changed files with 339 additions and 0 deletions.
1 change: 1 addition & 0 deletions src/library/Uno.Material/MaterialResourcesV2.cs
View file
Expand Up @@ -116,6 +116,7 @@ private IEnumerable<(string ResourceKey, string SharedKey, bool IsDefaultStyle)>
Add("M3MaterialListViewItemStyle", isImplicit: true);
Add("M3MaterialTextToggleButtonStyle", isImplicit: true);
Add("M3MaterialIconToggleButtonStyle");
Add("M3MaterialDatePickerStyle", isImplicit: true);

return result;

Expand Down
301 changes: 301 additions & 0 deletions src/library/Uno.Material/Styles/Controls/v2/DatePicker.xaml
View file
@@ -0,0 +1,301 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:android="http://uno.ui/android"
xmlns:ios="http://uno.ui/ios"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:not_win="http://uno.ui/not_win"
xmlns:toolkit="using:Uno.UI.Toolkit"
xmlns:wasm="http://uno.ui/wasm"
mc:Ignorable="ios android wasm not_win">

<x:Double x:Key="M3MaterialDateTimeFlyoutBorderThickness">1</x:Double>
<x:Double x:Key="M3MaterialDatePickerSpacerThemeWidth">1</x:Double>
<x:Double x:Key="M3MaterialDatePickerHeight">53</x:Double>
<StaticResource x:Key="M3MaterialDatePickerFlyoutPresenterBackgroundBrush"
ResourceKey="SurfaceBrush" />
<Thickness x:Key="M3MaterialDatePickerHostPadding">24,24,8,8</Thickness>

<StaticResource x:Key="M3MaterialDatePickerFlyoutPresenterBorderBrush"
ResourceKey="M3MaterialOnSurfaceFocusedBrush" />
<SolidColorBrush x:Key="M3MaterialDatePickerFlyoutPresenterHighlightFill"
Opacity="0.20"
Color="{ThemeResource PrimaryColor}" />
<x:Double x:Key="M3MaterialDatePickerFlyoutElevation">8</x:Double>
<StaticResource x:Key="M3MaterialDatePickerFlyoutPresenterSpacerFill"
ResourceKey="OnSurfaceFocusedBrush" />

<SolidColorBrush x:Key="M3MaterialDatePickerBackgroundColorBrush"
Opacity="0.12"
Color="{ThemeResource OnSurfaceColor}" />

<!-- DatePicker Style -->
<Style x:Key="M3MaterialDatePickerFlyoutButtonStyle"
TargetType="Button">

<Setter Property="Background"
Value="Transparent" />
<Setter Property="Padding"
Value="0" />

<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">

<Grid x:Name="RootGrid"
Background="{TemplateBinding Background}">
<!-- Label -->
<ContentPresenter x:Name="ContentPresenter"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}" />

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver" />
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="RootGrid.Opacity"
Value="0.65" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="RootGrid.Opacity"
Value="0.65" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<not_win:Style x:Key="M3MaterialDatePickerFlyoutPresenterStyle"
TargetType="DatePickerFlyoutPresenter">
<Setter Property="Width"
Value="296" />
<Setter Property="MinWidth"
Value="296" />
<Setter Property="MaxHeight"
Value="398" />
<Setter Property="IsTabStop"
Value="False" />
<Setter Property="FontFamily"
Value="{StaticResource MaterialRegularFontFamily}" />
<Setter Property="FontWeight"
Value="Normal" />
<Setter Property="FontSize"
Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background"
Value="{StaticResource MaterialDatePickerFlyoutPresenterBackgroundBrush}" />
<Setter Property="AutomationProperties.AutomationId"
Value="DatePickerFlyoutPresenter" />
<Setter Property="BorderThickness"
Value="{StaticResource MaterialDateTimeFlyoutBorderThickness}" />
<Setter Property="BorderBrush"
Value="{ThemeResource MaterialDatePickerFlyoutPresenterBorderBrush}" />
<Setter Property="CornerRadius"
Value="{ThemeResource OverlayCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DatePickerFlyoutPresenter">
<toolkit:ElevatedView MaxHeight="{TemplateBinding MaxHeight}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Elevation="{StaticResource M3MaterialDatePickerFlyoutElevation}"
ShadowColor="Black">
<Border x:Name="Background">
<Grid x:Name="ContentPanel">

<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="PickerHostGrid">

<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="DayColumn"
Width="78*" />
<ColumnDefinition x:Name="FirstSpacerColumn"
Width="Auto" />
<ColumnDefinition x:Name="MonthColumn"
Width="132*" />
<ColumnDefinition x:Name="SecondSpacerColumn"
Width="Auto" />
<ColumnDefinition x:Name="YearColumn"
Width="78*" />
</Grid.ColumnDefinitions>
<Rectangle x:Name="HighlightRect"
Grid.Column="0"
Grid.ColumnSpan="5"
Height="{ThemeResource DatePickerFlyoutPresenterHighlightHeight}"
VerticalAlignment="Center"
Fill="{ThemeResource M3MaterialDatePickerFlyoutPresenterHighlightFill}" />
<Rectangle x:Name="FirstPickerSpacing"
Grid.Column="1"
Width="{ThemeResource M3MaterialDatePickerSpacerThemeWidth}"
HorizontalAlignment="Center"
Fill="{ThemeResource M3MaterialDatePickerFlyoutPresenterSpacerFill}" />
<Rectangle x:Name="SecondPickerSpacing"
Grid.Column="3"
Width="{ThemeResource M3MaterialDatePickerSpacerThemeWidth}"
HorizontalAlignment="Center"
Fill="{ThemeResource M3MaterialDatePickerFlyoutPresenterSpacerFill}" />
</Grid>
<Grid x:Name="AcceptDismissHostGrid"
Height="{ThemeResource DatePickerFlyoutPresenterAcceptDismissHostGridHeight}"
VerticalAlignment="Bottom"
Background="{TemplateBinding Background}">

<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Rectangle Grid.ColumnSpan="3"
Height="{ThemeResource M3MaterialDatePickerSpacerThemeWidth}"
VerticalAlignment="Top"
Fill="{ThemeResource M3MaterialDatePickerFlyoutPresenterSpacerFill}" />


<Button x:Name="DismissButton"
x:Uid="DatePickerFlyoutDismissButton"
Grid.Column="1"
HorizontalAlignment="Right"
Content="CANCEL"
Style="{StaticResource M3MaterialTextButtonStyle}" />

<Button x:Name="AcceptButton"
x:Uid="DatePickerFlyoutAcceptButton"
Grid.Column="2"
HorizontalAlignment="Right"
Content="OK"
Style="{StaticResource M3MaterialTextButtonStyle}" />
</Grid>
</Grid>
</Border>
</toolkit:ElevatedView>
</ControlTemplate>
</Setter.Value>
</Setter>
</not_win:Style>

<Style x:Key="M3MaterialDatePickerStyle"
TargetType="DatePicker">

<Setter Property="Background"
Value="{StaticResource M3MaterialDatePickerBackgroundColorBrush}" />
<Setter Property="Foreground"
Value="{StaticResource PrimaryBrush}" />
<Setter Property="BorderBrush"
Value="{StaticResource PrimaryBrush}" />
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="Height"
Value="{StaticResource M3MaterialDatePickerHeight}" />
<Setter Property="CornerRadius"
Value="4,4,0,0" />
<not_win:Setter Property="FlyoutPresenterStyle"
Value="{StaticResource M3MaterialDatePickerFlyoutPresenterStyle}" />

<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DatePicker">

<!-- Root Grid -->
<Grid x:Name="LayoutRoot">
<!-- Flyout Button -->
<Button x:Name="FlyoutButton"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
IsEnabled="{TemplateBinding IsEnabled}"
Style="{StaticResource M3MaterialDatePickerFlyoutButtonStyle}"
UseSystemFocusVisuals="{TemplateBinding UseSystemFocusVisuals}">

<Grid Height="{TemplateBinding Height}"
Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding CornerRadius}">

<!-- Border -->
<Rectangle x:Name="BottomBorder"
Height="2"
VerticalAlignment="Bottom"
Fill="{TemplateBinding BorderBrush}" />

<!-- Header -->
<TextBlock x:Name="HeaderTextBlock"
Margin="10,8,10,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Foreground="{TemplateBinding Foreground}"
Style="{StaticResource BodySmall}"
Text="{TemplateBinding Header}"
TextWrapping="Wrap" />

<Grid x:Name="FlyoutButtonContentGrid"
Height="24"
Margin="6,24,10,0"
VerticalAlignment="Top">

<!-- DateText -->
<TextBlock x:Name="DateText"
Style="{StaticResource BodyMedium}"
Text="{Binding SelectedDate, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource StringFormatConverter}, ConverterParameter=' {0:d}'}" />

<!-- PlaceholderText -->
<TextBlock x:Name="PlaceholderText"
Margin="4,0,0,0"
Foreground="{StaticResource OnSurfaceLowBrush}"
Style="{StaticResource BodyMedium}"
Text="{TemplateBinding Header}"
Visibility="Collapsed" />

<!-- Removing this cause trouble with the DatePicker code -->
<TextBlock x:Name="DayTextBlock"
Opacity="0" />
</Grid>
</Grid>
</Button>

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />

<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="DateText.Foreground"
Value="{StaticResource OnSurfaceLowBrush}" />
<Setter Target="HeaderTextBlock.Foreground"
Value="{StaticResource OnSurfaceLowBrush}" />
<Setter Target="BottomBorder.Fill"
Value="{StaticResource OnSurfaceLowBrush}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>

<VisualStateGroup x:Name="HasDateStates">
<VisualState x:Name="HasDate" />
<VisualState x:Name="HasNoDate">
<VisualState.Setters>
<Setter Target="DateText.Visibility"
Value="Collapsed" />
<Setter Target="PlaceholderText.Visibility"
Value="Visible" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
37 changes: 37 additions & 0 deletions ...s/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Content/Controls/DatePickerSamplePage.xaml
View file
Expand Up @@ -59,6 +59,43 @@
</StackPanel>
</DataTemplate>
</sample:SamplePageLayout.MaterialTemplate>
<sample:SamplePageLayout.M3MaterialTemplate>
<DataTemplate>
<StackPanel>
<!-- Default -->
<TextBlock Margin="12,16,12,4"
Style="{StaticResource TitleSmall}"
Text="Default" />

<!-- DatePicker -->
<smtx:XamlDisplay Style="{StaticResource XamlDisplayBelowStyle}"
UniqueKey="M3_DatePickerSamplePage_Material_Default">

<DatePicker x:Name="myDatePicker"
HorizontalAlignment="Left"
xamarin:UseNativeStyle="True"
Header="Enter Date"
Style="{StaticResource M3MaterialDatePickerStyle}" />
</smtx:XamlDisplay>

<!-- Disabled -->
<TextBlock Margin="12,8,12,4"
Style="{StaticResource TitleSmall}"
Text="Disabled" />

<!-- DatePicker -->
<smtx:XamlDisplay Style="{StaticResource XamlDisplayBelowStyle}"
UniqueKey="M3_DatePickerSamplePage_Material_Disabled">

<DatePicker HorizontalAlignment="Left"
xamarin:UseNativeStyle="False"
Header="Enter Date"
IsEnabled="False"
Style="{StaticResource M3MaterialDatePickerStyle}" />
</smtx:XamlDisplay>
</StackPanel>
</DataTemplate>
</sample:SamplePageLayout.M3MaterialTemplate>
<sample:SamplePageLayout.CupertinoTemplate>
<DataTemplate>
<StackPanel>
Expand Down

0 comments on commit 42a5b2a

Please sign in to comment.