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. |
// (c) Copyright Microsoft Corporation. |
||||
// This source is subject to the Microsoft Public License (Ms-PL). |
// This source is subject to the Microsoft Public License (Ms-PL). |
||||
// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details. |
// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details. |
||||
// All other rights reserved. |
// 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> |
<ResourceDictionary xmlns="https://github.com/avaloniaui" |
||||
<x:Double x:Key="TimePickerFlyoutPresenterItemHeight">40</x:Double> |
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
||||
<x:Double x:Key="TimePickerSpacerThemeWidth">1</x:Double> |
xmlns:sys="clr-namespace:System;assembly=netstandard" |
||||
<Thickness x:Key="TimePickerBorderThemeThickness">1</Thickness> |
x:CompileBindings="True"> |
||||
<Thickness x:Key="TimePickerTopHeaderMargin">0,0,0,4</Thickness> |
<Design.PreviewWith> |
||||
<x:Double x:Key="TimePickerFlyoutPresenterHighlightHeight">40</x:Double> |
<Border Padding="20" Height="500"> |
||||
<x:Double x:Key="TimePickerFlyoutPresenterAcceptDismissHostGridHeight">41</x:Double> |
<StackPanel Spacing="20" VerticalAlignment="Center"> |
||||
<x:Double x:Key="TimePickerThemeMinWidth">242</x:Double> |
<TimePicker /> |
||||
<x:Double x:Key="TimePickerThemeMaxWidth">456</x:Double> |
<TimePicker CornerRadius="10" /> |
||||
<Thickness x:Key="TimePickerFlyoutPresenterItemPadding">0,3,0,6</Thickness> |
<TimePicker IsEnabled="False"/> |
||||
<Thickness x:Key="TimePickerHostPadding">0,3,0,6</Thickness> |
<TimePicker> |
||||
<ControlTheme x:Key="FluentTimePicker" TargetType="TimePicker"> |
<DataValidationErrors.Error> |
||||
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" /> |
<sys:Exception> |
||||
<Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForeground}" /> |
<x:Arguments> |
||||
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackground}" /> |
<x:String>Error</x:String> |
||||
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrush}" /> |
</x:Arguments> |
||||
<Setter Property="BorderThickness" Value="{DynamicResource TimePickerBorderThemeThickness}" /> |
</sys:Exception> |
||||
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" /> |
</DataValidationErrors.Error> |
||||
<Setter Property="HorizontalAlignment" Value="Left" /> |
</TimePicker> |
||||
<Setter Property="VerticalAlignment" Value="Center" /> |
</StackPanel> |
||||
<Setter Property="Template"> |
</Border> |
||||
<ControlTemplate> |
</Design.PreviewWith> |
||||
<DataValidationErrors> |
|
||||
<Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}" RowDefinitions="Auto,*"> |
<x:Double x:Key="TimePickerFlyoutPresenterItemHeight">40</x:Double> |
||||
<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" /> |
<x:Double x:Key="TimePickerSpacerThemeWidth">1</x:Double> |
||||
<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"> |
<Thickness x:Key="TimePickerBorderThemeThickness">1</Thickness> |
||||
<Button.Template> |
<Thickness x:Key="TimePickerTopHeaderMargin">0,0,0,4</Thickness> |
||||
<ControlTemplate> |
<x:Double x:Key="TimePickerFlyoutPresenterHighlightHeight">40</x:Double> |
||||
<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" /> |
<x:Double x:Key="TimePickerFlyoutPresenterAcceptDismissHostGridHeight">41</x:Double> |
||||
</ControlTemplate> |
<x:Double x:Key="TimePickerThemeMinWidth">242</x:Double> |
||||
</Button.Template> |
<x:Double x:Key="TimePickerThemeMaxWidth">456</x:Double> |
||||
<Grid Name="FlyoutButtonContentGrid"> |
<Thickness x:Key="TimePickerFlyoutPresenterItemPadding">0,3,0,6</Thickness> |
||||
<!--Ignore col defs here, set in code--> |
<Thickness x:Key="TimePickerHostPadding">0,3,0,6</Thickness> |
||||
<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}" /> |
<ControlTheme x:Key="FluentTimePickerFlyoutButton" TargetType="Button"> |
||||
</Border> |
<Setter Property="RenderTransform" Value="none" /> |
||||
<Rectangle Name="FirstColumnDivider" Fill="{DynamicResource TimePickerSpacerFill}" HorizontalAlignment="Center" Width="{DynamicResource TimePickerSpacerThemeWidth}" Grid.Column="1" /> |
<Setter Property="Template"> |
||||
<Border x:Name="SecondPickerHost" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> |
<ControlTemplate> |
||||
<TextBlock x:Name="MinuteTextBlock" HorizontalAlignment="Center" Padding="{DynamicResource TimePickerHostPadding}" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" /> |
<ContentPresenter Name="PART_ContentPresenter" |
||||
</Border> |
BorderBrush="{TemplateBinding BorderBrush}" |
||||
<Rectangle Name="SecondColumnDivider" Fill="{DynamicResource TimePickerSpacerFill}" HorizontalAlignment="Center" Width="{DynamicResource TimePickerSpacerThemeWidth}" Grid.Column="3" /> |
Background="{TemplateBinding Background}" |
||||
<Border x:Name="ThirdPickerHost" Grid.Column="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> |
BorderThickness="{TemplateBinding BorderThickness}" |
||||
<TextBlock x:Name="PeriodTextBlock" HorizontalAlignment="Center" Padding="{DynamicResource TimePickerHostPadding}" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" /> |
Content="{TemplateBinding Content}" |
||||
</Border> |
Foreground="{TemplateBinding Foreground}" |
||||
</Grid> |
HorizontalContentAlignment="Stretch" |
||||
</Button> |
VerticalContentAlignment="Stretch" |
||||
<Popup Name="Popup" WindowManagerAddShadowHint="False" IsLightDismissEnabled="True" PlacementTarget="{TemplateBinding}" PlacementMode="Bottom"> |
CornerRadius="{TemplateBinding CornerRadius}"/> |
||||
<TimePickerPresenter Name="PickerPresenter" /> |
</ControlTemplate> |
||||
</Popup> |
</Setter> |
||||
</Grid> |
|
||||
</DataValidationErrors> |
<Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter"> |
||||
</ControlTemplate> |
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushPointerOver}"/> |
||||
</Setter> |
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPointerOver}"/> |
||||
<Style Selector="^:hasnotime /template/ Button#FlyoutButton TextBlock"> |
<Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundPointerOver}"/> |
||||
<Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForeground}" /> |
</Style> |
||||
</Style> |
|
||||
<!--<Style Selector="^:error /template/ Button#FlyoutButton /template/ ContentPresenter"> |
<Style Selector="^:pressed"> |
||||
<Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}" /> |
<Setter Property="RenderTransform" Value="scale(0.98)" /> |
||||
</Style> |
</Style> |
||||
<Style Selector="^ /template/ Button"> |
|
||||
<Style Selector="^#FlyoutButton:pointerover /template/ ContentPresenter"> |
<Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter"> |
||||
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPointerOver}" /> |
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushPressed}"/> |
||||
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushPointerOver}" /> |
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPressed}"/> |
||||
<Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundPointerOver}" /> |
<Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundPressed}"/> |
||||
</Style> |
</Style> |
||||
<Style Selector="^:pressed /template/ ContentPresenter"> |
|
||||
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPressed}" /> |
<Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter"> |
||||
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushPressed}" /> |
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushDisabled}"/> |
||||
<Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundPressed}" /> |
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundDisabled}"/> |
||||
</Style> |
<Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundDisabled}"/> |
||||
<Style Selector="^:disabled /template/ ContentPresenter"> |
</Style> |
||||
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundDisabled}" /> |
</ControlTheme> |
||||
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushDisabled}" /> |
|
||||
<Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundDisabled}" /> |
<ControlTheme x:Key="{x:Type TimePicker}" TargetType="TimePicker"> |
||||
</Style> |
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" /> |
||||
</Style>--> |
<Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForeground}" /> |
||||
<Style Selector="^:disabled"> |
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackground}"/> |
||||
<Style Selector="^ /template/ ContentPresenter#HeaderContentPresenter"> |
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrush}"/> |
||||
<Setter Property="Foreground" Value="{DynamicResource TimePickerHeaderForegroundDisabled}" /> |
<Setter Property="BorderThickness" Value="{DynamicResource TimePickerBorderThemeThickness}"/> |
||||
</Style> |
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" /> |
||||
<Style Selector="^ /template/ Rectangle"> |
<Setter Property="HorizontalAlignment" Value="Left" /> |
||||
<Setter Property="Fill" Value="{DynamicResource TimePickerSpacerFillDisabled}" /> |
<Setter Property="VerticalAlignment" Value="Center" /> |
||||
</Style> |
<Setter Property="Template"> |
||||
</Style> |
<ControlTemplate> |
||||
</ControlTheme> |
<DataValidationErrors> |
||||
<ControlTheme x:Key="FluentTimePickerPresenter" TargetType="TimePickerPresenter"> |
<Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}" RowDefinitions="Auto,*"> |
||||
<Setter Property="Width" Value="242" /> |
<ContentPresenter x:Name="HeaderContentPresenter" |
||||
<Setter Property="MinWidth" Value="242" /> |
Grid.Row="0" |
||||
<Setter Property="MaxHeight" Value="398" /> |
Content="{TemplateBinding Header}" |
||||
<Setter Property="FontWeight" Value="Normal" /> |
ContentTemplate="{TemplateBinding HeaderTemplate}" |
||||
<Setter Property="Background" Value="{DynamicResource TimePickerFlyoutPresenterBackground}" /> |
Margin="{DynamicResource TimePickerTopHeaderMargin}" |
||||
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerFlyoutPresenterBorderBrush}" /> |
MaxWidth="{DynamicResource TimePickerThemeMaxWidth}" |
||||
<Setter Property="BorderThickness" Value="{DynamicResource DateTimeFlyoutBorderThickness}" /> |
Foreground="{DynamicResource TimePickerHeaderForeground}" |
||||
<Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" /> |
HorizontalAlignment="Stretch" |
||||
<Setter Property="Template"> |
VerticalAlignment="Top" /> |
||||
<ControlTemplate> |
|
||||
<Border Name="Background" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Padding="{DynamicResource DateTimeFlyoutBorderPadding}" MaxHeight="398"> |
<Button x:Name="FlyoutButton" |
||||
<Grid Name="ContentPanel" RowDefinitions="*,Auto"> |
Grid.Row="1" |
||||
<Grid Name="PickerContainer"> |
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--> |
<!--Ignore col defs here, set in code--> |
||||
<Panel Name="HourHost" Grid.Column="0"> |
<Border x:Name="FirstPickerHost" |
||||
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden"> |
Grid.Column="0" |
||||
<DateTimePickerPanel Name="HourSelector" PanelType="Hour" ShouldLoop="True" ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}" /> |
HorizontalAlignment="Stretch" |
||||
</ScrollViewer> |
VerticalAlignment="Stretch"> |
||||
<RepeatButton Name="HourUpButton" Classes="DateTimeFlyoutButtonStyle UpButton" /> |
<TextBlock x:Name="HourTextBlock" |
||||
<RepeatButton Name="HourDownButton" Classes="DateTimeFlyoutButtonStyle DownButton" /> |
HorizontalAlignment="Center" |
||||
</Panel> |
Padding="{DynamicResource TimePickerHostPadding}" |
||||
<Panel Name="MinuteHost" Grid.Column="2"> |
FontFamily="{TemplateBinding FontFamily}" |
||||
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden"> |
FontWeight="{TemplateBinding FontWeight}" |
||||
<DateTimePickerPanel Name="MinuteSelector" PanelType="Minute" ShouldLoop="True" ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}" /> |
FontSize="{TemplateBinding FontSize}" /> |
||||
</ScrollViewer> |
</Border> |
||||
<RepeatButton Name="MinuteUpButton" Classes="DateTimeFlyoutButtonStyle UpButton" /> |
|
||||
<RepeatButton Name="MinuteDownButton" Classes="DateTimeFlyoutButtonStyle DownButton" /> |
<Rectangle Name="FirstColumnDivider" |
||||
</Panel> |
Fill="{DynamicResource TimePickerSpacerFill}" |
||||
<Panel Name="PeriodHost" Grid.Column="4"> |
HorizontalAlignment="Center" |
||||
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden"> |
Width="{DynamicResource TimePickerSpacerThemeWidth}" |
||||
<DateTimePickerPanel Name="PeriodSelector" PanelType="TimePeriod" ShouldLoop="False" ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}" /> |
Grid.Column="1" /> |
||||
</ScrollViewer> |
|
||||
<RepeatButton Name="PeriodUpButton" Classes="DateTimeFlyoutButtonStyle UpButton" /> |
<Border x:Name="SecondPickerHost" |
||||
<RepeatButton Name="PeriodDownButton" Classes="DateTimeFlyoutButtonStyle DownButton" /> |
Grid.Column="2" |
||||
</Panel> |
HorizontalAlignment="Stretch" |
||||
<Rectangle x:Name="HighlightRect" ZIndex="-1" Fill="{DynamicResource TimePickerFlyoutPresenterHighlightFill}" Grid.Column="0" Grid.ColumnSpan="5" VerticalAlignment="Center" Height="{DynamicResource TimePickerFlyoutPresenterHighlightHeight}" /> |
VerticalAlignment="Stretch"> |
||||
<Rectangle Name="FirstSpacer" Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" HorizontalAlignment="Center" Width="{DynamicResource TimePickerSpacerThemeWidth}" Grid.Column="1" /> |
<TextBlock x:Name="MinuteTextBlock" |
||||
<Rectangle Name="SecondSpacer" Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" HorizontalAlignment="Center" Width="{DynamicResource TimePickerSpacerThemeWidth}" Grid.Column="3" /> |
HorizontalAlignment="Center" |
||||
</Grid> |
Padding="{DynamicResource TimePickerHostPadding}" |
||||
<Grid Grid.Row="1" Height="{DynamicResource TimePickerFlyoutPresenterAcceptDismissHostGridHeight}" Name="AcceptDismissHostGrid" ColumnDefinitions="*,*"> |
FontFamily="{TemplateBinding FontFamily}" |
||||
<Rectangle Height="{DynamicResource TimePickerSpacerThemeWidth}" VerticalAlignment="Top" Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" Grid.ColumnSpan="2" /> |
FontWeight="{TemplateBinding FontWeight}" |
||||
<Button Name="AcceptButton" Grid.Column="0" Classes="DateTimeFlyoutButtonStyle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> |
FontSize="{TemplateBinding FontSize}"/> |
||||
<Path Stroke="{Binding $parent[Button].Foreground}" StrokeLineCap="Round" StrokeThickness="0.75" Data="M0.5,8.5 5,13.5 15.5,3" /> |
</Border> |
||||
</Button> |
|
||||
<Button Name="DismissButton" Grid.Column="1" Classes="DateTimeFlyoutButtonStyle" FontSize="16" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> |
<Rectangle Name="SecondColumnDivider" |
||||
<Path Stroke="{Binding $parent[Button].Foreground}" StrokeLineCap="Round" StrokeThickness="0.75" Data="M2,2 14,14 M2,14 14 2" /> |
Fill="{DynamicResource TimePickerSpacerFill}" |
||||
</Button> |
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> |
</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> |
</Grid> |
||||
</Border> |
|
||||
</ControlTemplate> |
<Grid Name="AcceptDismissGrid" |
||||
</Setter> |
Grid.Row="1" |
||||
<Style Selector="^ /template/ Panel"> |
ColumnDefinitions="*,*"> |
||||
<Style Selector="^ RepeatButton"> |
<Rectangle Height="{DynamicResource TimePickerSpacerThemeWidth}" |
||||
<Setter Property="IsVisible" Value="False" /> |
VerticalAlignment="Top" |
||||
</Style> |
Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" |
||||
<Style Selector="^:pointerover RepeatButton"> |
Grid.ColumnSpan="2"/> |
||||
<Setter Property="IsVisible" Value="True" /> |
<Button Name="AcceptButton" |
||||
</Style> |
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> |
</Style> |
||||
</ControlTheme> |
</Style> </ControlTheme> |
||||
</Styles.Resources> |
</ResourceDictionary> |
||||
<Style Selector="TimePicker"> |
|
||||
<Setter Property="Theme" Value="{StaticResource FluentTimePicker}" /> |
|
||||
</Style> |
|
||||
<Style Selector="TimePickerPresenter"> |
|
||||
<Setter Property="Theme" Value="{StaticResource FluentTimePickerPresenter}" /> |
|
||||
</Style> |
|
||||
</Styles> |
|
||||
|
|||||
Loading…
Reference in new issue