Browse Source
And refactored shared date/time picker components into a separate file.pull/8479/head
Steven Kirk
4 years ago
4 changed files with 501 additions and 290 deletions
@ -0,0 +1,116 @@ |
|||
<!-- |
|||
// (c) Copyright Microsoft Corporation. |
|||
// This source is subject to the Microsoft Public License (Ms-PL). |
|||
// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details. |
|||
// All other rights reserved. |
|||
--> |
|||
|
|||
<ResourceDictionary xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
xmlns:sys="clr-namespace:System;assembly=netstandard" |
|||
x:CompileBindings="True"> |
|||
<Design.PreviewWith> |
|||
<Border Padding="20" Width="200"> |
|||
<StackPanel Spacing="20"> |
|||
<ListBoxItem Theme="{DynamicResource FluentDateTimePickerItem}">Standard Item</ListBoxItem> |
|||
<ListBoxItem Theme="{DynamicResource FluentDateTimePickerItem}" Classes="MonthItem">Month Item</ListBoxItem> |
|||
<RepeatButton Theme="{DynamicResource FluentDateTimePickerButton}">Button</RepeatButton> |
|||
<RepeatButton Theme="{DynamicResource FluentDateTimePickerUpButton}"/> |
|||
<RepeatButton Theme="{DynamicResource FluentDateTimePickerDownButton}"/> |
|||
</StackPanel> |
|||
</Border> |
|||
</Design.PreviewWith> |
|||
|
|||
<!-- Theme for the items displayed in the selectors --> |
|||
<ControlTheme x:Key="FluentDateTimePickerItem" TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}"> |
|||
<Setter Property="Padding" Value="{DynamicResource DatePickerFlyoutPresenterItemPadding}"/> |
|||
<Setter Property="VerticalContentAlignment" Value="Center" /> |
|||
<Setter Property="HorizontalContentAlignment" Value="Center" /> |
|||
|
|||
<Style Selector="^:selected"> |
|||
<Setter Property="IsHitTestVisible" Value="False"/> |
|||
<Style Selector="^/template/ Rectangle#PressedBackground"> |
|||
<Setter Property="Fill" Value="Transparent"/> |
|||
</Style> |
|||
<Style Selector="^/template/ ContentPresenter"> |
|||
<Setter Property="Background" Value="Transparent" /> |
|||
<Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}"/> |
|||
</Style> |
|||
</Style> |
|||
<Style Selector="^.MonthItem"> |
|||
<Setter Property="Padding" Value="{DynamicResource DatePickerFlyoutPresenterMonthPadding}"/> |
|||
<Setter Property="HorizontalContentAlignment" Value="Left" /> |
|||
</Style> |
|||
</ControlTheme> |
|||
|
|||
<!-- This is used for both the accept/dismiss & repeatbuttons in the presenter--> |
|||
<ControlTheme x:Key="FluentDateTimePickerButton" TargetType="Button"> |
|||
<Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackground}" /> |
|||
<Setter Property="Height" Value="22" /> |
|||
<Setter Property="HorizontalContentAlignment" Value="Center"/> |
|||
<Setter Property="VerticalContentAlignment" Value="Center"/> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<!-- |
|||
The background is doubled here for the loopingselector up/down repeat buttons |
|||
that appear opaque. Not sure how MS does it though I suspect this is it |
|||
but source isn't MIT yet, so this is my solution --> |
|||
<Border Background="{TemplateBinding Background}"> |
|||
<ContentPresenter x:Name="ContentPresenter" |
|||
Background="{TemplateBinding Background}" |
|||
BorderBrush="{DynamicResource DateTimePickerFlyoutButtonBorderBrush}" |
|||
BorderThickness="{DynamicResource DateTimeFlyoutButtonBorderThickness}" |
|||
Content="{TemplateBinding Content}" |
|||
Foreground="{DynamicResource SystemControlHighlightAltBaseHighBrush}" |
|||
ContentTemplate="{TemplateBinding ContentTemplate}" |
|||
Padding="{TemplateBinding Padding}" |
|||
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" |
|||
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" |
|||
CornerRadius="{TemplateBinding CornerRadius}"/> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
|
|||
<Style Selector="^:pointerover /template/ ContentPresenter"> |
|||
<Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackgroundPointerOver}"/> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerFlyoutButtonBorderBrushPointerOver}"/> |
|||
<Setter Property="Foreground" Value="{DynamicResource DateTimePickerFlyoutButtonForegroundPointerOver}"/> |
|||
</Style> |
|||
|
|||
<Style Selector="^:pressed /template/ ContentPresenter"> |
|||
<Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackgroundPressed}"/> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerFlyoutButtonBorderBrushPressed}"/> |
|||
<Setter Property="Foreground" Value="{DynamicResource DateTimePickerFlyoutButtonForegroundPressed}"/> |
|||
</Style> |
|||
</ControlTheme> |
|||
|
|||
<ControlTheme x:Key="FluentDateTimePickerUpButton" TargetType="RepeatButton" BasedOn="{StaticResource FluentDateTimePickerButton}"> |
|||
<Setter Property="VerticalAlignment" Value="Top"/> |
|||
<Setter Property="Height" Value="22" /> |
|||
<Setter Property="HorizontalAlignment" Value="Stretch" /> |
|||
<Setter Property="Focusable" Value="False" /> |
|||
<Setter Property="Background" Value="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}" /> |
|||
<Setter Property="Content"> |
|||
<Template> |
|||
<Viewbox Height="10" Width="10" HorizontalAlignment="Center" VerticalAlignment="Center"> |
|||
<Path Stroke="{Binding $parent[RepeatButton].Foreground}" StrokeThickness="1" Data="M 0,9 L 9,0 L 18,9"/> |
|||
</Viewbox> |
|||
</Template> |
|||
</Setter> |
|||
</ControlTheme> |
|||
|
|||
<ControlTheme x:Key="FluentDateTimePickerDownButton" TargetType="RepeatButton" BasedOn="{StaticResource FluentDateTimePickerButton}"> |
|||
<Setter Property="VerticalAlignment" Value="Bottom"/> |
|||
<Setter Property="Height" Value="22" /> |
|||
<Setter Property="HorizontalAlignment" Value="Stretch" /> |
|||
<Setter Property="Focusable" Value="False" /> |
|||
<Setter Property="Background" Value="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}" /> |
|||
<Setter Property="Content"> |
|||
<Template> |
|||
<Viewbox Height="10" Width="10" HorizontalAlignment="Center" VerticalAlignment="Center"> |
|||
<Path Stroke="{Binding $parent[RepeatButton].Foreground}" StrokeThickness="1" Data="M 0,0 L 9,9 L 18,0"/> |
|||
</Viewbox> |
|||
</Template> |
|||
</Setter> |
|||
</ControlTheme> |
|||
</ResourceDictionary> |
|||
@ -1,163 +1,320 @@ |
|||
<?xml version="1.0" encoding="utf-8"?> |
|||
<!-- |
|||
<!-- |
|||
// (c) Copyright Microsoft Corporation. |
|||
// This source is subject to the Microsoft Public License (Ms-PL). |
|||
// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details. |
|||
// All other rights reserved. |
|||
--> |
|||
<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sys="clr-namespace:System;assembly=netstandard" x:CompileBindings="True"> |
|||
<Styles.Resources> |
|||
<x:Double x:Key="TimePickerFlyoutPresenterItemHeight">40</x:Double> |
|||
<x:Double x:Key="TimePickerSpacerThemeWidth">1</x:Double> |
|||
<Thickness x:Key="TimePickerBorderThemeThickness">1</Thickness> |
|||
<Thickness x:Key="TimePickerTopHeaderMargin">0,0,0,4</Thickness> |
|||
<x:Double x:Key="TimePickerFlyoutPresenterHighlightHeight">40</x:Double> |
|||
<x:Double x:Key="TimePickerFlyoutPresenterAcceptDismissHostGridHeight">41</x:Double> |
|||
<x:Double x:Key="TimePickerThemeMinWidth">242</x:Double> |
|||
<x:Double x:Key="TimePickerThemeMaxWidth">456</x:Double> |
|||
<Thickness x:Key="TimePickerFlyoutPresenterItemPadding">0,3,0,6</Thickness> |
|||
<Thickness x:Key="TimePickerHostPadding">0,3,0,6</Thickness> |
|||
<ControlTheme x:Key="FluentTimePicker" TargetType="TimePicker"> |
|||
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" /> |
|||
<Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForeground}" /> |
|||
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackground}" /> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrush}" /> |
|||
<Setter Property="BorderThickness" Value="{DynamicResource TimePickerBorderThemeThickness}" /> |
|||
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" /> |
|||
<Setter Property="HorizontalAlignment" Value="Left" /> |
|||
<Setter Property="VerticalAlignment" Value="Center" /> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<DataValidationErrors> |
|||
<Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}" RowDefinitions="Auto,*"> |
|||
<ContentPresenter x:Name="HeaderContentPresenter" Grid.Row="0" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" Margin="{DynamicResource TimePickerTopHeaderMargin}" MaxWidth="{DynamicResource TimePickerThemeMaxWidth}" Foreground="{DynamicResource TimePickerHeaderForeground}" HorizontalAlignment="Stretch" VerticalAlignment="Top" /> |
|||
<Button x:Name="FlyoutButton" Grid.Row="1" Foreground="{TemplateBinding Foreground}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" IsEnabled="{TemplateBinding IsEnabled}" MinWidth="{DynamicResource TimePickerThemeMinWidth}" MaxWidth="{DynamicResource TimePickerThemeMaxWidth}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalAlignment="Top" VerticalContentAlignment="Stretch"> |
|||
<Button.Template> |
|||
<ControlTemplate> |
|||
<ContentPresenter Name="ContentPresenter" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" /> |
|||
</ControlTemplate> |
|||
</Button.Template> |
|||
<Grid Name="FlyoutButtonContentGrid"> |
|||
<!--Ignore col defs here, set in code--> |
|||
<Border x:Name="FirstPickerHost" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> |
|||
<TextBlock x:Name="HourTextBlock" HorizontalAlignment="Center" Padding="{DynamicResource TimePickerHostPadding}" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" /> |
|||
</Border> |
|||
<Rectangle Name="FirstColumnDivider" Fill="{DynamicResource TimePickerSpacerFill}" HorizontalAlignment="Center" Width="{DynamicResource TimePickerSpacerThemeWidth}" Grid.Column="1" /> |
|||
<Border x:Name="SecondPickerHost" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> |
|||
<TextBlock x:Name="MinuteTextBlock" HorizontalAlignment="Center" Padding="{DynamicResource TimePickerHostPadding}" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" /> |
|||
</Border> |
|||
<Rectangle Name="SecondColumnDivider" Fill="{DynamicResource TimePickerSpacerFill}" HorizontalAlignment="Center" Width="{DynamicResource TimePickerSpacerThemeWidth}" Grid.Column="3" /> |
|||
<Border x:Name="ThirdPickerHost" Grid.Column="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> |
|||
<TextBlock x:Name="PeriodTextBlock" HorizontalAlignment="Center" Padding="{DynamicResource TimePickerHostPadding}" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" /> |
|||
</Border> |
|||
</Grid> |
|||
</Button> |
|||
<Popup Name="Popup" WindowManagerAddShadowHint="False" IsLightDismissEnabled="True" PlacementTarget="{TemplateBinding}" PlacementMode="Bottom"> |
|||
<TimePickerPresenter Name="PickerPresenter" /> |
|||
</Popup> |
|||
</Grid> |
|||
</DataValidationErrors> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
<Style Selector="^:hasnotime /template/ Button#FlyoutButton TextBlock"> |
|||
<Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForeground}" /> |
|||
</Style> |
|||
<!--<Style Selector="^:error /template/ Button#FlyoutButton /template/ ContentPresenter"> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}" /> |
|||
</Style> |
|||
<Style Selector="^ /template/ Button"> |
|||
<Style Selector="^#FlyoutButton:pointerover /template/ ContentPresenter"> |
|||
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPointerOver}" /> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushPointerOver}" /> |
|||
<Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundPointerOver}" /> |
|||
</Style> |
|||
<Style Selector="^:pressed /template/ ContentPresenter"> |
|||
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPressed}" /> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushPressed}" /> |
|||
<Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundPressed}" /> |
|||
</Style> |
|||
<Style Selector="^:disabled /template/ ContentPresenter"> |
|||
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundDisabled}" /> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushDisabled}" /> |
|||
<Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundDisabled}" /> |
|||
</Style> |
|||
</Style>--> |
|||
<Style Selector="^:disabled"> |
|||
<Style Selector="^ /template/ ContentPresenter#HeaderContentPresenter"> |
|||
<Setter Property="Foreground" Value="{DynamicResource TimePickerHeaderForegroundDisabled}" /> |
|||
</Style> |
|||
<Style Selector="^ /template/ Rectangle"> |
|||
<Setter Property="Fill" Value="{DynamicResource TimePickerSpacerFillDisabled}" /> |
|||
</Style> |
|||
</Style> |
|||
</ControlTheme> |
|||
<ControlTheme x:Key="FluentTimePickerPresenter" TargetType="TimePickerPresenter"> |
|||
<Setter Property="Width" Value="242" /> |
|||
<Setter Property="MinWidth" Value="242" /> |
|||
<Setter Property="MaxHeight" Value="398" /> |
|||
<Setter Property="FontWeight" Value="Normal" /> |
|||
<Setter Property="Background" Value="{DynamicResource TimePickerFlyoutPresenterBackground}" /> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerFlyoutPresenterBorderBrush}" /> |
|||
<Setter Property="BorderThickness" Value="{DynamicResource DateTimeFlyoutBorderThickness}" /> |
|||
<Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" /> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Border Name="Background" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Padding="{DynamicResource DateTimeFlyoutBorderPadding}" MaxHeight="398"> |
|||
<Grid Name="ContentPanel" RowDefinitions="*,Auto"> |
|||
<Grid Name="PickerContainer"> |
|||
|
|||
<ResourceDictionary xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
xmlns:sys="clr-namespace:System;assembly=netstandard" |
|||
x:CompileBindings="True"> |
|||
<Design.PreviewWith> |
|||
<Border Padding="20" Height="500"> |
|||
<StackPanel Spacing="20" VerticalAlignment="Center"> |
|||
<TimePicker /> |
|||
<TimePicker CornerRadius="10" /> |
|||
<TimePicker IsEnabled="False"/> |
|||
<TimePicker> |
|||
<DataValidationErrors.Error> |
|||
<sys:Exception> |
|||
<x:Arguments> |
|||
<x:String>Error</x:String> |
|||
</x:Arguments> |
|||
</sys:Exception> |
|||
</DataValidationErrors.Error> |
|||
</TimePicker> |
|||
</StackPanel> |
|||
</Border> |
|||
</Design.PreviewWith> |
|||
|
|||
<x:Double x:Key="TimePickerFlyoutPresenterItemHeight">40</x:Double> |
|||
<x:Double x:Key="TimePickerSpacerThemeWidth">1</x:Double> |
|||
<Thickness x:Key="TimePickerBorderThemeThickness">1</Thickness> |
|||
<Thickness x:Key="TimePickerTopHeaderMargin">0,0,0,4</Thickness> |
|||
<x:Double x:Key="TimePickerFlyoutPresenterHighlightHeight">40</x:Double> |
|||
<x:Double x:Key="TimePickerFlyoutPresenterAcceptDismissHostGridHeight">41</x:Double> |
|||
<x:Double x:Key="TimePickerThemeMinWidth">242</x:Double> |
|||
<x:Double x:Key="TimePickerThemeMaxWidth">456</x:Double> |
|||
<Thickness x:Key="TimePickerFlyoutPresenterItemPadding">0,3,0,6</Thickness> |
|||
<Thickness x:Key="TimePickerHostPadding">0,3,0,6</Thickness> |
|||
|
|||
<ControlTheme x:Key="FluentTimePickerFlyoutButton" TargetType="Button"> |
|||
<Setter Property="RenderTransform" Value="none" /> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<ContentPresenter Name="PART_ContentPresenter" |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
Background="{TemplateBinding Background}" |
|||
BorderThickness="{TemplateBinding BorderThickness}" |
|||
Content="{TemplateBinding Content}" |
|||
Foreground="{TemplateBinding Foreground}" |
|||
HorizontalContentAlignment="Stretch" |
|||
VerticalContentAlignment="Stretch" |
|||
CornerRadius="{TemplateBinding CornerRadius}"/> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
|
|||
<Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushPointerOver}"/> |
|||
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPointerOver}"/> |
|||
<Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundPointerOver}"/> |
|||
</Style> |
|||
|
|||
<Style Selector="^:pressed"> |
|||
<Setter Property="RenderTransform" Value="scale(0.98)" /> |
|||
</Style> |
|||
|
|||
<Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushPressed}"/> |
|||
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPressed}"/> |
|||
<Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundPressed}"/> |
|||
</Style> |
|||
|
|||
<Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushDisabled}"/> |
|||
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundDisabled}"/> |
|||
<Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundDisabled}"/> |
|||
</Style> |
|||
</ControlTheme> |
|||
|
|||
<ControlTheme x:Key="{x:Type TimePicker}" TargetType="TimePicker"> |
|||
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" /> |
|||
<Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForeground}" /> |
|||
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackground}"/> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrush}"/> |
|||
<Setter Property="BorderThickness" Value="{DynamicResource TimePickerBorderThemeThickness}"/> |
|||
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" /> |
|||
<Setter Property="HorizontalAlignment" Value="Left" /> |
|||
<Setter Property="VerticalAlignment" Value="Center" /> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<DataValidationErrors> |
|||
<Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}" RowDefinitions="Auto,*"> |
|||
<ContentPresenter x:Name="HeaderContentPresenter" |
|||
Grid.Row="0" |
|||
Content="{TemplateBinding Header}" |
|||
ContentTemplate="{TemplateBinding HeaderTemplate}" |
|||
Margin="{DynamicResource TimePickerTopHeaderMargin}" |
|||
MaxWidth="{DynamicResource TimePickerThemeMaxWidth}" |
|||
Foreground="{DynamicResource TimePickerHeaderForeground}" |
|||
HorizontalAlignment="Stretch" |
|||
VerticalAlignment="Top" /> |
|||
|
|||
<Button x:Name="FlyoutButton" |
|||
Grid.Row="1" |
|||
Theme="{StaticResource FluentTimePickerFlyoutButton}" |
|||
Foreground="{TemplateBinding Foreground}" |
|||
Background="{TemplateBinding Background}" |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
BorderThickness="{TemplateBinding BorderThickness}" |
|||
CornerRadius="{TemplateBinding CornerRadius}" |
|||
IsEnabled="{TemplateBinding IsEnabled}" |
|||
MinWidth="{DynamicResource TimePickerThemeMinWidth}" |
|||
MaxWidth="{DynamicResource TimePickerThemeMaxWidth}" |
|||
HorizontalAlignment="Stretch" |
|||
VerticalAlignment="Top"> |
|||
|
|||
<Grid Name="FlyoutButtonContentGrid"> |
|||
<!--Ignore col defs here, set in code--> |
|||
<Panel Name="HourHost" Grid.Column="0"> |
|||
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden"> |
|||
<DateTimePickerPanel Name="HourSelector" PanelType="Hour" ShouldLoop="True" ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}" /> |
|||
</ScrollViewer> |
|||
<RepeatButton Name="HourUpButton" Classes="DateTimeFlyoutButtonStyle UpButton" /> |
|||
<RepeatButton Name="HourDownButton" Classes="DateTimeFlyoutButtonStyle DownButton" /> |
|||
</Panel> |
|||
<Panel Name="MinuteHost" Grid.Column="2"> |
|||
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden"> |
|||
<DateTimePickerPanel Name="MinuteSelector" PanelType="Minute" ShouldLoop="True" ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}" /> |
|||
</ScrollViewer> |
|||
<RepeatButton Name="MinuteUpButton" Classes="DateTimeFlyoutButtonStyle UpButton" /> |
|||
<RepeatButton Name="MinuteDownButton" Classes="DateTimeFlyoutButtonStyle DownButton" /> |
|||
</Panel> |
|||
<Panel Name="PeriodHost" Grid.Column="4"> |
|||
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden"> |
|||
<DateTimePickerPanel Name="PeriodSelector" PanelType="TimePeriod" ShouldLoop="False" ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}" /> |
|||
</ScrollViewer> |
|||
<RepeatButton Name="PeriodUpButton" Classes="DateTimeFlyoutButtonStyle UpButton" /> |
|||
<RepeatButton Name="PeriodDownButton" Classes="DateTimeFlyoutButtonStyle DownButton" /> |
|||
</Panel> |
|||
<Rectangle x:Name="HighlightRect" ZIndex="-1" Fill="{DynamicResource TimePickerFlyoutPresenterHighlightFill}" Grid.Column="0" Grid.ColumnSpan="5" VerticalAlignment="Center" Height="{DynamicResource TimePickerFlyoutPresenterHighlightHeight}" /> |
|||
<Rectangle Name="FirstSpacer" Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" HorizontalAlignment="Center" Width="{DynamicResource TimePickerSpacerThemeWidth}" Grid.Column="1" /> |
|||
<Rectangle Name="SecondSpacer" Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" HorizontalAlignment="Center" Width="{DynamicResource TimePickerSpacerThemeWidth}" Grid.Column="3" /> |
|||
</Grid> |
|||
<Grid Grid.Row="1" Height="{DynamicResource TimePickerFlyoutPresenterAcceptDismissHostGridHeight}" Name="AcceptDismissHostGrid" ColumnDefinitions="*,*"> |
|||
<Rectangle Height="{DynamicResource TimePickerSpacerThemeWidth}" VerticalAlignment="Top" Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" Grid.ColumnSpan="2" /> |
|||
<Button Name="AcceptButton" Grid.Column="0" Classes="DateTimeFlyoutButtonStyle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> |
|||
<Path Stroke="{Binding $parent[Button].Foreground}" StrokeLineCap="Round" StrokeThickness="0.75" Data="M0.5,8.5 5,13.5 15.5,3" /> |
|||
</Button> |
|||
<Button Name="DismissButton" Grid.Column="1" Classes="DateTimeFlyoutButtonStyle" FontSize="16" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> |
|||
<Path Stroke="{Binding $parent[Button].Foreground}" StrokeLineCap="Round" StrokeThickness="0.75" Data="M2,2 14,14 M2,14 14 2" /> |
|||
</Button> |
|||
<Border x:Name="FirstPickerHost" |
|||
Grid.Column="0" |
|||
HorizontalAlignment="Stretch" |
|||
VerticalAlignment="Stretch"> |
|||
<TextBlock x:Name="HourTextBlock" |
|||
HorizontalAlignment="Center" |
|||
Padding="{DynamicResource TimePickerHostPadding}" |
|||
FontFamily="{TemplateBinding FontFamily}" |
|||
FontWeight="{TemplateBinding FontWeight}" |
|||
FontSize="{TemplateBinding FontSize}" /> |
|||
</Border> |
|||
|
|||
<Rectangle Name="FirstColumnDivider" |
|||
Fill="{DynamicResource TimePickerSpacerFill}" |
|||
HorizontalAlignment="Center" |
|||
Width="{DynamicResource TimePickerSpacerThemeWidth}" |
|||
Grid.Column="1" /> |
|||
|
|||
<Border x:Name="SecondPickerHost" |
|||
Grid.Column="2" |
|||
HorizontalAlignment="Stretch" |
|||
VerticalAlignment="Stretch"> |
|||
<TextBlock x:Name="MinuteTextBlock" |
|||
HorizontalAlignment="Center" |
|||
Padding="{DynamicResource TimePickerHostPadding}" |
|||
FontFamily="{TemplateBinding FontFamily}" |
|||
FontWeight="{TemplateBinding FontWeight}" |
|||
FontSize="{TemplateBinding FontSize}"/> |
|||
</Border> |
|||
|
|||
<Rectangle Name="SecondColumnDivider" |
|||
Fill="{DynamicResource TimePickerSpacerFill}" |
|||
HorizontalAlignment="Center" |
|||
Width="{DynamicResource TimePickerSpacerThemeWidth}" |
|||
Grid.Column="3" /> |
|||
|
|||
<Border x:Name="ThirdPickerHost" |
|||
Grid.Column="4" |
|||
HorizontalAlignment="Stretch" |
|||
VerticalAlignment="Stretch"> |
|||
<TextBlock x:Name="PeriodTextBlock" |
|||
HorizontalAlignment="Center" |
|||
Padding="{DynamicResource TimePickerHostPadding}" |
|||
FontFamily="{TemplateBinding FontFamily}" |
|||
FontWeight="{TemplateBinding FontWeight}" |
|||
FontSize="{TemplateBinding FontSize}" /> |
|||
</Border> |
|||
</Grid> |
|||
</Button> |
|||
|
|||
<Popup Name="Popup" |
|||
WindowManagerAddShadowHint="False" |
|||
IsLightDismissEnabled="True" |
|||
PlacementTarget="{TemplateBinding}" |
|||
PlacementMode="Bottom"> |
|||
<TimePickerPresenter Name="PickerPresenter" /> |
|||
</Popup> |
|||
|
|||
</Grid> |
|||
</DataValidationErrors> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
|
|||
<Style Selector="^:disabled /template/ ContentPresenter#HeaderContentPresenter"> |
|||
<Setter Property="Foreground" Value="{DynamicResource TimePickerHeaderForegroundDisabled}"/> |
|||
</Style> |
|||
|
|||
<Style Selector="^:disabled /template/ Rectangle"> |
|||
<Setter Property="Fill" Value="{DynamicResource TimePickerSpacerFillDisabled}"/> |
|||
</Style> |
|||
|
|||
<Style Selector="^:hasnotime /template/ Button#FlyoutButton TextBlock"> |
|||
<Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForeground}"/> |
|||
</Style> |
|||
|
|||
<Style Selector="^:error /template/ Button#FlyoutButton"> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}"/> |
|||
</Style> |
|||
</ControlTheme> |
|||
|
|||
<ControlTheme x:Key="{x:Type TimePickerPresenter}" TargetType="TimePickerPresenter"> |
|||
<Setter Property="Width" Value="242" /> |
|||
<Setter Property="MinWidth" Value="242" /> |
|||
<Setter Property="MaxHeight" Value="398" /> |
|||
<Setter Property="FontWeight" Value="Normal" /> |
|||
<Setter Property="Background" Value="{DynamicResource TimePickerFlyoutPresenterBackground}" /> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerFlyoutPresenterBorderBrush}" /> |
|||
<Setter Property="BorderThickness" Value="{DynamicResource DateTimeFlyoutBorderThickness}" /> |
|||
<Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" /> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Border Name="Background" |
|||
Background="{TemplateBinding Background}" |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
BorderThickness="{TemplateBinding BorderThickness}" |
|||
CornerRadius="{TemplateBinding CornerRadius}" |
|||
Padding="{DynamicResource DateTimeFlyoutBorderPadding}" |
|||
MaxHeight="398"> |
|||
<Grid Name="ContentPanel" RowDefinitions="*,Auto"> |
|||
<Grid Name="PickerContainer"> |
|||
<!--Ignore col defs here, set in code--> |
|||
<Panel Name="HourHost" Grid.Column="0"> |
|||
<ScrollViewer HorizontalScrollBarVisibility="Disabled" |
|||
VerticalScrollBarVisibility="Hidden"> |
|||
<DateTimePickerPanel Name="HourSelector" |
|||
PanelType="Hour" |
|||
ShouldLoop="True" |
|||
ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"/> |
|||
</ScrollViewer> |
|||
<RepeatButton Name="HourUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}"/> |
|||
<RepeatButton Name="HourDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}"/> |
|||
</Panel> |
|||
|
|||
<Panel Name="MinuteHost" Grid.Column="2"> |
|||
<ScrollViewer HorizontalScrollBarVisibility="Disabled" |
|||
VerticalScrollBarVisibility="Hidden"> |
|||
<DateTimePickerPanel Name="MinuteSelector" |
|||
PanelType="Minute" |
|||
ShouldLoop="True" |
|||
ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"/> |
|||
</ScrollViewer> |
|||
<RepeatButton Name="MinuteUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}"/> |
|||
<RepeatButton Name="MinuteDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}"/> |
|||
</Panel> |
|||
|
|||
<Panel Name="PeriodHost" Grid.Column="4"> |
|||
<ScrollViewer HorizontalScrollBarVisibility="Disabled" |
|||
VerticalScrollBarVisibility="Hidden"> |
|||
<DateTimePickerPanel Name="PeriodSelector" |
|||
PanelType="TimePeriod" |
|||
ShouldLoop="False" |
|||
ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"/> |
|||
</ScrollViewer> |
|||
<RepeatButton Name="PeriodUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}"/> |
|||
<RepeatButton Name="PeriodDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}"/> |
|||
</Panel> |
|||
|
|||
<Rectangle x:Name="HighlightRect" ZIndex="-1" |
|||
Fill="{DynamicResource TimePickerFlyoutPresenterHighlightFill}" |
|||
Grid.Column="0" |
|||
Grid.ColumnSpan="5" |
|||
VerticalAlignment="Center" |
|||
Height="{DynamicResource TimePickerFlyoutPresenterHighlightHeight}" /> |
|||
<Rectangle Name="FirstSpacer" |
|||
Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" |
|||
HorizontalAlignment="Center" |
|||
Width="{DynamicResource TimePickerSpacerThemeWidth}" |
|||
Grid.Column="1" /> |
|||
<Rectangle Name="SecondSpacer" |
|||
Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" |
|||
HorizontalAlignment="Center" |
|||
Width="{DynamicResource TimePickerSpacerThemeWidth}" |
|||
Grid.Column="3" /> |
|||
</Grid> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
<Style Selector="^ /template/ Panel"> |
|||
<Style Selector="^ RepeatButton"> |
|||
<Setter Property="IsVisible" Value="False" /> |
|||
</Style> |
|||
<Style Selector="^:pointerover RepeatButton"> |
|||
<Setter Property="IsVisible" Value="True" /> |
|||
</Style> |
|||
|
|||
<Grid Name="AcceptDismissGrid" |
|||
Grid.Row="1" |
|||
ColumnDefinitions="*,*"> |
|||
<Rectangle Height="{DynamicResource TimePickerSpacerThemeWidth}" |
|||
VerticalAlignment="Top" |
|||
Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" |
|||
Grid.ColumnSpan="2"/> |
|||
<Button Name="AcceptButton" |
|||
Grid.Column="0" |
|||
Theme="{StaticResource FluentDateTimePickerButton}" |
|||
Height="{DynamicResource TimePickerFlyoutPresenterAcceptDismissHostGridHeight}" |
|||
HorizontalAlignment="Stretch" |
|||
VerticalAlignment="Stretch"> |
|||
<Path Stroke="{Binding $parent[Button].Foreground}" |
|||
StrokeLineCap="Round" |
|||
StrokeThickness="0.75" |
|||
Data="M0.5,8.5 5,13.5 15.5,3" /> |
|||
</Button> |
|||
<Button Name="DismissButton" |
|||
Grid.Column="1" |
|||
Theme="{StaticResource FluentDateTimePickerButton}" |
|||
Height="{DynamicResource TimePickerFlyoutPresenterAcceptDismissHostGridHeight}" |
|||
FontSize="16" |
|||
HorizontalAlignment="Stretch" |
|||
VerticalAlignment="Stretch"> |
|||
<Path Stroke="{Binding $parent[Button].Foreground}" |
|||
StrokeLineCap="Round" |
|||
StrokeThickness="0.75" |
|||
Data="M2,2 14,14 M2,14 14 2" /> |
|||
</Button> |
|||
</Grid> |
|||
</Grid> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
|
|||
<Style Selector="^ /template/ Panel"> |
|||
<Style Selector="^ RepeatButton"> |
|||
<Setter Property="IsVisible" Value="False" /> |
|||
</Style> |
|||
|
|||
<Style Selector="^:pointerover RepeatButton"> |
|||
<Setter Property="IsVisible" Value="True" /> |
|||
</Style> |
|||
</ControlTheme> |
|||
</Styles.Resources> |
|||
<Style Selector="TimePicker"> |
|||
<Setter Property="Theme" Value="{StaticResource FluentTimePicker}" /> |
|||
</Style> |
|||
<Style Selector="TimePickerPresenter"> |
|||
<Setter Property="Theme" Value="{StaticResource FluentTimePickerPresenter}" /> |
|||
</Style> |
|||
</Styles> |
|||
</Style> </ControlTheme> |
|||
</ResourceDictionary> |
|||
|
|||
Loading…
Reference in new issue