Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add M3 CalendarView/Picker styles, fix broken styles
- Loading branch information
Showing
4 changed files
with
970 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
233 changes: 233 additions & 0 deletions
233
src/library/Uno.Material/Styles/Controls/v2/CalendarDatePicker.xaml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,233 @@ | ||
| <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | ||
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | ||
| xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" | ||
| xmlns:not_win="http://uno.ui/not_win" | ||
| mc:Ignorable="not_win"> | ||
|
|
||
| <Style x:Key="DefaultM3MaterialCalendarDatePickerStyle" | ||
| TargetType="CalendarDatePicker"> | ||
| <Setter Property="Foreground" | ||
| Value="{ThemeResource CalendarDatePickerForeground}" /> | ||
| <Setter Property="Background" | ||
| Value="{ThemeResource CalendarDatePickerBackground}" /> | ||
| <Setter Property="BorderBrush" | ||
| Value="{ThemeResource CalendarDatePickerBorderBrush}" /> | ||
| <Setter Property="BorderThickness" | ||
| Value="{ThemeResource CalendarDatePickerBorderThemeThickness}" /> | ||
| <Setter Property="CalendarViewStyle" | ||
| Value="{StaticResource M3MaterialCalendarViewStyle}" /> | ||
| <Setter Property="HorizontalAlignment" | ||
| Value="Left" /> | ||
| <Setter Property="VerticalAlignment" | ||
| Value="Center" /> | ||
| <Setter Property="Height" | ||
| Value="53" /> | ||
| <Setter Property="UseSystemFocusVisuals" | ||
| Value="{ThemeResource IsApplicationFocusVisualKindReveal}" /> | ||
| <not_win:Setter Property="CornerRadius" | ||
| Value="{ThemeResource ControlCornerRadius}" /> | ||
| <Setter Property="Template"> | ||
| <Setter.Value> | ||
| <ControlTemplate TargetType="CalendarDatePicker"> | ||
| <Grid x:Name="Root" | ||
| Height="{TemplateBinding Height}"> | ||
|
|
||
| <VisualStateManager.VisualStateGroups> | ||
| <VisualStateGroup x:Name="CommonStates"> | ||
| <VisualState x:Name="Normal" /> | ||
|
|
||
| <VisualState x:Name="PointerOver" /> | ||
|
|
||
|
|
||
| <VisualState x:Name="Pressed"> | ||
|
|
||
| <Storyboard> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" | ||
| Storyboard.TargetProperty="Background"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" | ||
| Value="{ThemeResource CalendarDatePickerBackgroundPressed}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" | ||
| Storyboard.TargetProperty="BorderBrush"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" | ||
| Value="{ThemeResource CalendarDatePickerBorderBrushPressed}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| </Storyboard> | ||
| </VisualState> | ||
|
|
||
| <VisualState x:Name="Disabled"> | ||
|
|
||
| <Storyboard> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" | ||
| Storyboard.TargetProperty="Background"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" | ||
| Value="{ThemeResource CalendarDatePickerBackgroundDisabled}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" | ||
| Storyboard.TargetProperty="BorderBrush"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" | ||
| Value="{ThemeResource CalendarDatePickerBorderBrushDisabled}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" | ||
| Storyboard.TargetProperty="Foreground"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" | ||
| Value="{ThemeResource CalendarDatePickerHeaderForegroundDisabled}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DateText" | ||
| Storyboard.TargetProperty="Foreground"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" | ||
| Value="{ThemeResource CalendarDatePickerTextForegroundDisabled}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CalendarGlyph" | ||
| Storyboard.TargetProperty="Foreground"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" | ||
| Value="{ThemeResource CalendarDatePickerCalendarGlyphForegroundDisabled}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| </Storyboard> | ||
| </VisualState> | ||
|
|
||
| </VisualStateGroup> | ||
| <VisualStateGroup x:Name="FocusStates"> | ||
| <VisualState x:Name="Unfocused" /> | ||
| <VisualState x:Name="PointerFocused" /> | ||
| <VisualState x:Name="Focused"> | ||
|
|
||
| <Storyboard> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" | ||
| Storyboard.TargetProperty="Background"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" | ||
| Value="{ThemeResource CalendarDatePickerBackgroundFocused}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| </Storyboard> | ||
| </VisualState> | ||
|
|
||
| </VisualStateGroup> | ||
| <VisualStateGroup x:Name="SelectionStates"> | ||
| <VisualState x:Name="Unselected" /> | ||
|
|
||
| <VisualState x:Name="Selected"> | ||
|
|
||
| <Storyboard> | ||
| <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DateText" | ||
| Storyboard.TargetProperty="Foreground"> | ||
| <DiscreteObjectKeyFrame KeyTime="0" | ||
| Value="{ThemeResource CalendarDatePickerTextForegroundSelected}" /> | ||
| </ObjectAnimationUsingKeyFrames> | ||
| </Storyboard> | ||
| </VisualState> | ||
|
|
||
| </VisualStateGroup> | ||
| <VisualStateGroup x:Name="HeaderStates"> | ||
| <VisualState x:Name="TopHeader" /> | ||
| <VisualState x:Name="LeftHeader"> | ||
| <VisualState.Setters> | ||
| <Setter Target="HeaderContentPresenter.(Grid.Row)" | ||
| Value="1" /> | ||
| <Setter Target="HeaderContentPresenter.(Grid.Column)" | ||
| Value="0" /> | ||
| <Setter Target="HeaderContentPresenter.(Grid.ColumnSpan)" | ||
| Value="1" /> | ||
| <Setter Target="HeaderContentPresenter.Margin" | ||
| Value="{StaticResource CalendarDatePickerLeftHeaderMargin}" /> | ||
| <Setter Target="HeaderContentPresenter.MaxWidth" | ||
| Value="{StaticResource CalendarDatePickerLeftHeaderMaxWidth}" /> | ||
| </VisualState.Setters> | ||
| </VisualState> | ||
|
|
||
| </VisualStateGroup> | ||
|
|
||
| </VisualStateManager.VisualStateGroups> | ||
| <FlyoutBase.AttachedFlyout> | ||
| <Flyout Placement="Bottom" | ||
| ShouldConstrainToRootBounds="False"> | ||
| <Flyout.FlyoutPresenterStyle> | ||
| <Style TargetType="FlyoutPresenter"> | ||
| <Setter Property="Padding" | ||
| Value="0" /> | ||
| <Setter Property="BorderThickness" | ||
| Value="0" /> | ||
| <Setter Property="IsDefaultShadowEnabled" | ||
| Value="True" /> | ||
| <Setter Property="CornerRadius" | ||
| Value="{ThemeResource OverlayCornerRadius}" /> | ||
| <Setter Property="Template"> | ||
| <Setter.Value> | ||
| <ControlTemplate TargetType="FlyoutPresenter"> | ||
| <ContentPresenter Background="{TemplateBinding Background}" | ||
| BorderBrush="{TemplateBinding BorderBrush}" | ||
| BorderThickness="{TemplateBinding BorderThickness}" | ||
| Content="{TemplateBinding Content}" | ||
| ContentTemplate="{TemplateBinding ContentTemplate}" | ||
| ContentTransitions="{TemplateBinding ContentTransitions}" | ||
| Margin="{TemplateBinding Padding}" | ||
| HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" | ||
| VerticalAlignment="{TemplateBinding VerticalContentAlignment}" | ||
| CornerRadius="{TemplateBinding CornerRadius}" /> | ||
| </ControlTemplate> | ||
| </Setter.Value> | ||
| </Setter> | ||
| </Style> | ||
| </Flyout.FlyoutPresenterStyle> | ||
| <CalendarView x:Name="CalendarView" | ||
| Style="{TemplateBinding CalendarViewStyle}" | ||
| MinDate="{TemplateBinding MinDate}" | ||
| MaxDate="{TemplateBinding MaxDate}" | ||
| IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}" | ||
| DisplayMode="{TemplateBinding DisplayMode}" | ||
| FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}" | ||
| DayOfWeekFormat="{TemplateBinding DayOfWeekFormat}" | ||
| IsOutOfScopeEnabled="{TemplateBinding IsOutOfScopeEnabled}" | ||
| IsGroupLabelVisible="{TemplateBinding IsGroupLabelVisible}" | ||
| CornerRadius="{ThemeResource OverlayCornerRadius}" /> | ||
| </Flyout> | ||
| </FlyoutBase.AttachedFlyout> | ||
|
|
||
| <Border x:Name="Background" | ||
| Background="{StaticResource TextBoxFilledBackgroundColorBrush}" | ||
| CornerRadius="4,4,0,0" | ||
| Control.IsTemplateFocusTarget="True" | ||
| MinHeight="53" /> | ||
|
|
||
| <!-- Border --> | ||
| <Rectangle x:Name="BottomBorder" | ||
| VerticalAlignment="Bottom" | ||
| Fill="{StaticResource PrimaryBrush}" | ||
| Height="2" /> | ||
|
|
||
| <Grid Margin="10,0,10,0" | ||
| VerticalAlignment="Center"> | ||
| <Grid.RowDefinitions> | ||
| <RowDefinition Height="Auto" /> | ||
| <RowDefinition Height="Auto" /> | ||
| </Grid.RowDefinitions> | ||
| <!-- Header --> | ||
| <TextBlock HorizontalAlignment="Stretch" | ||
| VerticalAlignment="Top" | ||
| Text="{TemplateBinding Header}" | ||
| Style="{StaticResource M3MaterialBodySmall}" | ||
| Foreground="{StaticResource PrimaryBrush}" | ||
| TextWrapping="Wrap" /> | ||
|
|
||
| <!-- DateText --> | ||
| <TextBlock x:Name="DateText" | ||
| Grid.Row="1" | ||
| Style="{StaticResource M3MaterialBodyMedium}" | ||
| Text="{TemplateBinding PlaceholderText}" /> | ||
| </Grid> | ||
| <Grid Visibility="Collapsed"> | ||
| <FontIcon x:Name="CalendarGlyph" /> | ||
| <ContentPresenter x:Name="DescriptionPresenter" /> | ||
| <ContentPresenter x:Name="HeaderContentPresenter" /> | ||
| </Grid> | ||
|
|
||
| </Grid> | ||
|
|
||
| </ControlTemplate> | ||
| </Setter.Value> | ||
| </Setter> | ||
| </Style> | ||
|
|
||
| <Style x:Key="M3MaterialCalendarDatePickerStyle" | ||
| TargetType="CalendarDatePicker" | ||
| BasedOn="{StaticResource DefaultM3MaterialCalendarDatePickerStyle}" /> | ||
| </ResourceDictionary> |
Oops, something went wrong.