amwx
6 years ago
9 changed files with 891 additions and 0 deletions
@ -0,0 +1,123 @@ |
|||
<UserControl xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" |
|||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" |
|||
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450" |
|||
x:Class="ControlCatalog.Pages.DateTimePickerPage"> |
|||
<StackPanel Orientation="Vertical" Spacing="4" HorizontalAlignment="Stretch"> |
|||
<TextBlock Classes="h1">DatePicker and TimePicker</TextBlock> |
|||
<TextBlock Name="DatePickerDesc" Classes="h2" TextWrapping="Wrap"/> |
|||
<TextBlock Name="TimePickerDesc" Classes="h2" TextWrapping="Wrap"/> |
|||
|
|||
<StackPanel Orientation="Vertical" |
|||
Margin="16" |
|||
HorizontalAlignment="Stretch" |
|||
Spacing="16"> |
|||
<TextBlock FontSize="18">A simple DatePicker with a header</TextBlock> |
|||
<StackPanel Orientation="Vertical"> |
|||
<Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}" |
|||
BorderThickness="1" Padding="15"> |
|||
<DatePicker Header="Pick a date" /> |
|||
</Border> |
|||
<Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}"> |
|||
<TextBlock Padding="15"> |
|||
<TextBlock.Text> |
|||
<x:String> |
|||
<DatePicker Header="Pick a date" /> |
|||
</x:String> |
|||
</TextBlock.Text> |
|||
</TextBlock> |
|||
</Panel> |
|||
</StackPanel> |
|||
|
|||
<TextBlock FontSize="18">A DatePicker with day formatted and year hidden.</TextBlock> |
|||
<StackPanel Orientation="Vertical"> |
|||
<Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}" |
|||
BorderThickness="1" Padding="15"> |
|||
<DatePicker x:Name="Control2" DayFormat="{}{day.integer} ({dayofweek.abbreviated})" |
|||
YearVisible="False" /> |
|||
</Border> |
|||
<Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}"> |
|||
<TextBlock Padding="15"> |
|||
<TextBlock.Text> |
|||
<x:String> |
|||
<DatePicker DayFormat="{}{day.integer} ({dayofweek.abbreviated})" YearVisible="False" /> |
|||
</x:String> |
|||
</TextBlock.Text> |
|||
</TextBlock> |
|||
</Panel> |
|||
</StackPanel> |
|||
|
|||
<Border Background="{DynamicResource SystemControlHighlightBaseLowBrush}" BorderThickness="1" Margin="15" /> |
|||
|
|||
<TextBlock FontSize="18">A simple TimePicker.</TextBlock> |
|||
<StackPanel Orientation="Vertical"> |
|||
<Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}" |
|||
BorderThickness="1" Padding="15"> |
|||
<TimePicker /> |
|||
</Border> |
|||
<Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}"> |
|||
<TextBlock Padding="15"> |
|||
<TextBlock.Text> |
|||
<x:String> |
|||
<TimePicker /> |
|||
</x:String> |
|||
</TextBlock.Text> |
|||
</TextBlock> |
|||
</Panel> |
|||
</StackPanel> |
|||
|
|||
<TextBlock FontSize="18">A TimePicker with a header and minute increments specified.</TextBlock> |
|||
<StackPanel Orientation="Vertical"> |
|||
<Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}" |
|||
BorderThickness="1" Padding="15"> |
|||
<TimePicker Header="Arrival time" MinuteIncrement="15" /> |
|||
</Border> |
|||
<Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}"> |
|||
<TextBlock Padding="15"> |
|||
<TextBlock.Text> |
|||
<x:String> |
|||
<TimePicker Header="Arrival time" MinuteIncrement="15" /> |
|||
</x:String> |
|||
</TextBlock.Text> |
|||
</TextBlock> |
|||
</Panel> |
|||
</StackPanel> |
|||
|
|||
<TextBlock FontSize="18">A TimePicker using a 12-hour clock.</TextBlock> |
|||
<StackPanel Orientation="Vertical"> |
|||
<Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}" |
|||
BorderThickness="1" Padding="15"> |
|||
<TimePicker ClockIdentifier="12HourClock" Header="12 hour clock" /> |
|||
</Border> |
|||
<Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}"> |
|||
<TextBlock Padding="15"> |
|||
<TextBlock.Text> |
|||
<x:String> |
|||
<TimePicker ClockIdentifier="12HourClock" Header="12 hour clock" /> |
|||
</x:String> |
|||
</TextBlock.Text> |
|||
</TextBlock> |
|||
</Panel> |
|||
</StackPanel> |
|||
|
|||
<TextBlock FontSize="18">A TimePicker using a 24-hour clock.</TextBlock> |
|||
<StackPanel Orientation="Vertical"> |
|||
<Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}" |
|||
BorderThickness="1" Padding="15"> |
|||
<TimePicker ClockIdentifier="24HourClock" Header="24 hour clock" /> |
|||
</Border> |
|||
<Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}"> |
|||
<TextBlock Padding="15"> |
|||
<TextBlock.Text> |
|||
<x:String> |
|||
<TimePicker ClockIdentifier="24HourClock" Header="24 hour clock" /> |
|||
</x:String> |
|||
</TextBlock.Text> |
|||
</TextBlock> |
|||
</Panel> |
|||
</StackPanel> |
|||
|
|||
</StackPanel> |
|||
</StackPanel> |
|||
</UserControl> |
|||
@ -0,0 +1,30 @@ |
|||
using Avalonia; |
|||
using Avalonia.Controls; |
|||
using Avalonia.Markup.Xaml; |
|||
|
|||
namespace ControlCatalog.Pages |
|||
{ |
|||
public class DateTimePickerPage : UserControl |
|||
{ |
|||
public DateTimePickerPage() |
|||
{ |
|||
this.InitializeComponent(); |
|||
this.FindControl<TextBlock>("DatePickerDesc").Text = "Use a DatePicker to let users set a date in your app, " + |
|||
"for example to schedule an appointment. The DatePicker displays three controls for month, day, and year. " + |
|||
"These controls are easy to use with touch or mouse, and they can be styled and configured in several different ways. " + |
|||
"Order of month, day, and year is dynamically set based on user date settings"; |
|||
|
|||
this.FindControl<TextBlock>("TimePickerDesc").Text = "Use a TimePicker to let users set a time in your app, for example " + |
|||
"to set a reminder. The TimePicker displays three controls for hour, minute, and AM / PM(if necessary).These controls " + |
|||
"are easy to use with touch or mouse, and they can be styled and configured in several different ways. " + |
|||
"12 - hour or 24 - hour clock and visiblility of AM / PM is dynamically set based on user time settings, or can be overridden."; |
|||
|
|||
|
|||
} |
|||
|
|||
private void InitializeComponent() |
|||
{ |
|||
AvaloniaXamlLoader.Load(this); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,277 @@ |
|||
<!-- |
|||
// (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"> |
|||
<Styles.Resources> |
|||
<Thickness x:Key="DatePickerTopHeaderMargin">0,0,0,4</Thickness> |
|||
<x:Double x:Key="DatePickerFlyoutPresenterHighlightHeight">40</x:Double> |
|||
<x:Double x:Key="DatePickerFlyoutPresenterItemHeight">40</x:Double> |
|||
<x:Double x:Key="DatePickerFlyoutPresenterAcceptDismissHostGridHeight">41</x:Double> |
|||
<x:Double x:Key="DatePickerThemeMinWidth">296</x:Double> |
|||
<x:Double x:Key="DatePickerThemeMaxWidth">456</x:Double> |
|||
<Thickness x:Key="DatePickerFlyoutPresenterItemPadding">0,3,0,6</Thickness> |
|||
<Thickness x:Key="DatePickerFlyoutPresenterMonthPadding">9,3,0,6</Thickness> |
|||
<Thickness x:Key="DatePickerHostPadding">0,3,0,6</Thickness> |
|||
<Thickness x:Key="DatePickerHostMonthPadding">9,3,0,6</Thickness> |
|||
|
|||
<!-- These are technically declared in the Light/Dark resource dictionary, but are the same--> |
|||
<x:Double x:Key="DatePickerSelectorThemeMinWidth">80</x:Double> |
|||
<x:Double x:Key="DatePickerSpacerThemeWidth">1</x:Double> |
|||
<x:Double x:Key="DatePickerSpacingThemeWidth">20</x:Double> |
|||
<x:Double x:Key="DatePickerSpacingThemeHeight">20</x:Double> |
|||
<Thickness x:Key="DatePickerHeaderThemeMargin">0,0,0,4</Thickness> |
|||
<FontWeight x:Key="DatePickerHeaderThemeFontWeight">Normal</FontWeight> |
|||
</Styles.Resources> |
|||
|
|||
<Design.PreviewWith> |
|||
<Border Padding="20"> |
|||
<DatePicker /> |
|||
</Border> |
|||
</Design.PreviewWith> |
|||
|
|||
<!-- This is used for both buttons on the popup & in the LoopingSelectors, |
|||
define LoopingSelector.xaml theme AFTER DatePicker.xaml--> |
|||
<Style Selector=":is(Button).DateTimeFlyoutButtonStyle"> |
|||
<Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackground}" /> |
|||
<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}" |
|||
TextBlock.Foreground="{DynamicResource SystemControlHighlightAltBaseHighBrush}" |
|||
ContentTemplate="{TemplateBinding ContentTemplate}" |
|||
Padding="{TemplateBinding Padding}" |
|||
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" |
|||
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" |
|||
CornerRadius="{DynamicResource ControlCornerRadius}"/> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
|
|||
<Style Selector=":is(Button).DateTimeFlyoutButtonStyle:pointerover /template/ ContentPresenter"> |
|||
<Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackgroundPointerOver}"/> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerFlyoutButtonBorderBrushPointerOver}"/> |
|||
<Setter Property="TextBlock.Foreground" Value="{DynamicResource DateTimePickerFlyoutButtonForegroundPointerOver}"/> |
|||
</Style> |
|||
|
|||
<Style Selector=":is(Button).DateTimeFlyoutButtonStyle:pressed /template/ ContentPresenter"> |
|||
<Setter Property="Background" Value="{DynamicResource DateTimePickerFlyoutButtonBackgroundPressed}"/> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerFlyoutButtonBorderBrushPressed}"/> |
|||
<Setter Property="TextBlock.Foreground" Value="{DynamicResource DateTimePickerFlyoutButtonForegroundPressed}"/> |
|||
</Style> |
|||
|
|||
|
|||
<Style Selector="DatePicker"> |
|||
<Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" /> |
|||
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" /> |
|||
<Setter Property="Foreground" Value="{DynamicResource DatePickerButtonForeground}" /> |
|||
<Setter Property="HorizontalAlignment" Value="Left" /> |
|||
<Setter Property="VerticalAlignment" Value="Center" /> |
|||
<Setter Property="FocusAdorner" Value="{x:Null}"/> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}" RowDefinitions="Auto,*"> |
|||
<Grid.Styles> |
|||
<!-- Not to be confused with the above button style, this is the |
|||
button on the actual DatePicker that launches the popup--> |
|||
<Style Selector="Button.DatePickerFlyoutButtonStyle"> |
|||
<Setter Property="Background" Value="{DynamicResource DatePickerButtonBackground}"/> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrush}"/> |
|||
<Setter Property="BorderThickness" Value="1"/> |
|||
<Setter Property="Foreground" Value="{DynamicResource DatePickerButtonForeground}"/> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<ContentPresenter Name="ContentPresenter" |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
Background="{TemplateBinding Background}" |
|||
BorderThickness="{TemplateBinding BorderThickness}" |
|||
Content="{TemplateBinding Content}" |
|||
TextBlock.Foreground="{TemplateBinding Foreground}" |
|||
HorizontalContentAlignment="Stretch" |
|||
VerticalContentAlignment="Stretch" |
|||
CornerRadius="{DynamicResource ControlCornerRadius}"/> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
<Style Selector="Button.DatePickerFlyoutButtonStyle:pointerover /template/ ContentPresenter"> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrushPointerOver}"/> |
|||
<Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundPointerOver}"/> |
|||
<Setter Property="TextBlock.Foreground" Value="{DynamicResource DatePickerButtonForegroundPointerOver}"/> |
|||
</Style> |
|||
<Style Selector="Button.DatePickerFlyoutButtonStyle:pressed /template/ ContentPresenter"> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrushPressed}"/> |
|||
<Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundPressed}"/> |
|||
<Setter Property="TextBlock.Foreground" Value="{DynamicResource DatePickerButtonForegroundPressed}"/> |
|||
</Style> |
|||
<Style Selector="Button.DatePickerFlyoutButtonStyle:disabled /template/ ContentPresenter"> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrushDisabled}"/> |
|||
<Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundDisabled}"/> |
|||
<Setter Property="TextBlock.Foreground" Value="{DynamicResource DatePickerButtonForegroundDisabled}"/> |
|||
</Style> |
|||
<!-- Need separation of keyboard & pointer focus for this to work |
|||
<Style Selector="Button.DatePickerFlyoutButtonStyle:focus /template/ ContentPresenter"> |
|||
<Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundFocused}"/> |
|||
<Setter Property="TextBlock.Foreground" Value="{DynamicResource DatePickerButtonForegroundFocused}"/> |
|||
</Style>--> |
|||
</Grid.Styles> |
|||
<ContentPresenter Name="HeaderContentPresenter" Grid.Row="0" |
|||
Content="{TemplateBinding Header}" |
|||
ContentTemplate="{TemplateBinding HeaderTemplate}" |
|||
Margin="{DynamicResource DatePickerTopHeaderMargin}" |
|||
MaxWidth="{DynamicResource DatePickerThemeMaxWidth}" |
|||
HorizontalAlignment="Stretch" |
|||
VerticalAlignment="Top"/> |
|||
<Button Name="FlyoutButton" Grid.Row="1" |
|||
Foreground="{TemplateBinding Foreground}" |
|||
Background="{TemplateBinding Background}" |
|||
IsEnabled="{TemplateBinding IsEnabled}" |
|||
MinWidth="{StaticResource DatePickerThemeMinWidth}" |
|||
MaxWidth="{StaticResource DatePickerThemeMaxWidth}" |
|||
HorizontalAlignment="Stretch" |
|||
VerticalAlignment="Stretch" |
|||
Classes="DatePickerFlyoutButtonStyle" |
|||
TemplatedControl.IsTemplateFocusTarget="True"> |
|||
<Grid Name="ButtonContentGrid" ColumnDefinitions="78*,Auto,132*,Auto,78*"> |
|||
<TextBlock Name="DayText" Text="day" HorizontalAlignment="Center" |
|||
Padding="{DynamicResource DatePickerFlyoutPresenterItemPadding}" |
|||
FontFamily="{TemplateBinding FontFamily}" |
|||
FontWeight="{TemplateBinding FontWeight}" |
|||
FontSize="{TemplateBinding FontSize}"/> |
|||
<TextBlock Name="MonthText" Text="month" TextAlignment="Left" |
|||
Padding="{DynamicResource DatePickerFlyoutPresenterMonthPadding}" |
|||
FontFamily="{TemplateBinding FontFamily}" |
|||
FontWeight="{TemplateBinding FontWeight}" |
|||
FontSize="{TemplateBinding FontSize}"/> |
|||
<TextBlock Name="YearText" Text="year" HorizontalAlignment="Center" |
|||
Padding="{DynamicResource DatePickerFlyoutPresenterItemPadding}" |
|||
FontFamily="{TemplateBinding FontFamily}" |
|||
FontWeight="{TemplateBinding FontWeight}" |
|||
FontSize="{TemplateBinding FontSize}"/> |
|||
<Rectangle x:Name="FirstSpacer" |
|||
Fill="{DynamicResource DatePickerSpacerFill}" |
|||
HorizontalAlignment="Center" |
|||
Width="1" |
|||
Grid.Column="1" /> |
|||
<Rectangle x:Name="SecondSpacer" |
|||
Fill="{DynamicResource DatePickerSpacerFill}" |
|||
HorizontalAlignment="Center" |
|||
Width="1" |
|||
Grid.Column="3" /> |
|||
</Grid> |
|||
</Button> |
|||
</Grid> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
<Style Selector="DatePicker /template/ ContentPresenter#HeaderContentPresenter"> |
|||
<Setter Property="TextBlock.Foreground" Value="{DynamicResource DatePickerHeaderForeground}"/> |
|||
</Style> |
|||
<Style Selector="DatePicker:disabled /template/ Rectangle"> |
|||
<Setter Property="Fill" Value="{DynamicResource DatePickerSpacerFillDisabled}"/> |
|||
</Style> |
|||
<!-- Changes foreground for watermark text when SelectedDate is null--> |
|||
<Style Selector="DatePicker:hasnodate /template/ Button#FlyoutButton TextBlock"> |
|||
<Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForeground}"/> |
|||
</Style> |
|||
|
|||
<!--WinUI: DatePickerFlyoutPresenter--> |
|||
<Style Selector="DatePickerPresenter"> |
|||
<Setter Property="Width" Value="296" /> |
|||
<Setter Property="MinWidth" Value="296" /> |
|||
<Setter Property="MaxHeight" Value="398" /> |
|||
<Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" /> |
|||
<Setter Property="FontWeight" Value="Normal" /> |
|||
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" /> |
|||
<Setter Property="Background" Value="{DynamicResource DatePickerFlyoutPresenterBackground}" /> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource DatePickerFlyoutPresenterBorderBrush}" /> |
|||
<Setter Property="BorderThickness" Value="{DynamicResource DateTimeFlyoutBorderThickness}" /> |
|||
<!-- Added properties --> |
|||
<Setter Property="YearSelectorItemTemplate"> |
|||
<DataTemplate DataType="DatePickerPresenterItem"> |
|||
<Panel> |
|||
<TextBlock Text="{Binding DisplayText}" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center" |
|||
Padding="{DynamicResource DatePickerFlyoutPresenterItemPadding}"/> |
|||
</Panel> |
|||
</DataTemplate> |
|||
</Setter> |
|||
<Setter Property="DaySelectorItemTemplate"> |
|||
<DataTemplate DataType="DatePickerPresenterItem"> |
|||
<Panel> |
|||
<TextBlock Text="{Binding DisplayText}" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center" |
|||
Padding="{DynamicResource DatePickerFlyoutPresenterItemPadding}"/> |
|||
</Panel> |
|||
</DataTemplate> |
|||
</Setter> |
|||
<Setter Property="MonthSelectorItemTemplate"> |
|||
<DataTemplate DataType="DatePickerPresenterItem"> |
|||
<Panel> |
|||
<TextBlock Text="{Binding DisplayText}" |
|||
HorizontalAlignment="Left" VerticalAlignment="Center" |
|||
Padding="{DynamicResource DatePickerFlyoutPresenterMonthPadding}"/> |
|||
</Panel> |
|||
</DataTemplate> |
|||
</Setter> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Border Name="Background" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" |
|||
BorderThickness="{TemplateBinding BorderThickness}" Padding="{DynamicResource DateTimeFlyoutBorderPadding}" |
|||
MaxHeight="398" CornerRadius="{DynamicResource OverlayCornerRadius}"> |
|||
<Grid Name="ContentRoot" RowDefinitions="*,Auto"> |
|||
<Grid Name="PickerContainer"> |
|||
<!--Column Definitions set in code, ignore here--> |
|||
<Rectangle Name="HighlightRect" IsHitTestVisible="False" |
|||
Fill="{DynamicResource DatePickerFlyoutPresenterHighlightFill}" |
|||
Grid.Column="0" Grid.ColumnSpan="5" VerticalAlignment="Center" |
|||
Height="{DynamicResource DatePickerFlyoutPresenterHighlightHeight}" /> |
|||
<Rectangle Name="FirstSpacer" |
|||
Fill="{DynamicResource DatePickerFlyoutPresenterSpacerFill}" |
|||
HorizontalAlignment="Center" |
|||
Width="{DynamicResource DatePickerSpacerThemeWidth}" |
|||
Grid.Column="1" /> |
|||
<Rectangle Name="SecondSpacer" |
|||
Fill="{DynamicResource DatePickerFlyoutPresenterSpacerFill}" |
|||
HorizontalAlignment="Center" |
|||
Width="{DynamicResource DatePickerSpacerThemeWidth}" |
|||
Grid.Column="3" /> |
|||
</Grid> |
|||
<Grid Grid.Row="1" Height="{DynamicResource DatePickerFlyoutPresenterAcceptDismissHostGridHeight}" |
|||
Name="AcceptDismissGrid" ColumnDefinitions="*,*"> |
|||
<Rectangle Height="{DynamicResource DatePickerSpacerThemeWidth}" VerticalAlignment="Top" |
|||
Fill="{DynamicResource DatePickerFlyoutPresenterSpacerFill}" |
|||
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> |
|||
</Grid> |
|||
</Grid> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
|
|||
</Styles> |
|||
@ -0,0 +1,92 @@ |
|||
<!-- |
|||
// (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"> |
|||
|
|||
<Style Selector="LoopingSelector"> |
|||
<Setter Property="ItemHeight" Value="40"/> |
|||
<Setter Property="ItemTemplate"> |
|||
<DataTemplate> |
|||
<Panel> |
|||
<TextBlock Text="{Binding DisplayText}" VerticalAlignment="Center" HorizontalAlignment="Center"/> |
|||
</Panel> |
|||
</DataTemplate> |
|||
</Setter> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Grid Background="Transparent"> |
|||
<ScrollViewer Name="Scroller" HorizontalScrollBarVisibility="Disabled" |
|||
VerticalScrollBarVisibility="Hidden" /> |
|||
<!--The up/down repeatbuttons for the looping selector uses this style |
|||
They appear opaque, the only base resources that don't have an alpha |
|||
component is the SystemChrome colors, so that's probably what's used... |
|||
Will use that here, as default background here is transparent. |
|||
SystemControlPageBackgroundChromeLowBrush is the brush/color that matched best |
|||
Button Style Class defined in DatePicker.xaml |
|||
--> |
|||
<RepeatButton Name="UpButton" Classes="DateTimeFlyoutButtonStyle" Height="22" |
|||
Padding="0" VerticalAlignment="Top" HorizontalAlignment="Stretch" |
|||
Background="{DynamicResource SystemControlPageBackgroundChromeLowBrush}"> |
|||
<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> |
|||
</RepeatButton> |
|||
|
|||
<RepeatButton Name="DownButton" Classes="DateTimeFlyoutButtonStyle" |
|||
Height="22" Padding="0" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" |
|||
Background="{DynamicResource SystemControlPageBackgroundChromeLowBrush}"> |
|||
<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> |
|||
</RepeatButton> |
|||
</Grid> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
<Style Selector="LoopingSelector /template/ RepeatButton"> |
|||
<Setter Property="IsVisible" Value="False"/> |
|||
</Style> |
|||
<Style Selector="LoopingSelector:pointerover /template/ RepeatButton"> |
|||
<Setter Property="IsVisible" Value="True"/> |
|||
</Style> |
|||
|
|||
<Style Selector="LoopingSelectorItem"> |
|||
<Setter Property="HorizontalAlignment" Value="Stretch"/> |
|||
<Setter Property="VerticalAlignment" Value="Stretch" /> |
|||
<Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}" /> |
|||
<Setter Property="Background" Value="{DynamicResource SystemControlTransparentBrush}"/> |
|||
<Setter Property="VerticalContentAlignment" Value="Stretch"/> |
|||
<Setter Property="HorizontalContentAlignment" Value="Stretch" /> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Panel Name="Root" Background="{TemplateBinding Background}"> |
|||
<ContentPresenter Name="ContentPresenter" |
|||
TextBlock.Foreground="{TemplateBinding Foreground}" |
|||
Content="{TemplateBinding Content}" |
|||
ContentTemplate="{TemplateBinding ContentTemplate}" |
|||
Padding="{TemplateBinding Padding}" |
|||
Margin="2,0" |
|||
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" |
|||
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> |
|||
</Panel> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
<Style Selector="LoopingSelectorItem:pointerover /template/ Panel#Root"> |
|||
<Setter Property="Background" Value="{DynamicResource SystemControlBackgroundListLowBrush}"/> |
|||
</Style> |
|||
<Style Selector="LoopingSelectorItem:pressed /template/ Panel#Root"> |
|||
<Setter Property="Background" Value="{DynamicResource SystemControlBackgroundBaseLowBrush}"/> |
|||
</Style> |
|||
<Style Selector="LoopingSelectorItem:selected /template/ Panel#Root"> |
|||
<Setter Property="Background" Value="Transparent"/> |
|||
</Style> |
|||
|
|||
|
|||
</Styles> |
|||
@ -0,0 +1,235 @@ |
|||
<!-- |
|||
// (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"> |
|||
<Styles.Resources> |
|||
<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> |
|||
<x:Double x:Key="TimePickerFlyoutPresenterItemHeight">40</x:Double> |
|||
<Thickness x:Key="TimePickerFlyoutPresenterItemPadding">0,3,0,6</Thickness> |
|||
<Thickness x:Key="TimePickerHostPadding">0,3,0,6</Thickness> |
|||
|
|||
<!-- These are technically declared in the Light/Dark resource dictionary, but are the same--> |
|||
<x:Double x:Key="TimePickerSelectorThemeMinWidth">80</x:Double> |
|||
<x:Double x:Key="TimePickerSpacerThemeWidth">1</x:Double> |
|||
<Thickness x:Key="TimePickerBorderThemeThickness">1</Thickness> |
|||
<Thickness x:Key="TimePickerHeaderThemeMargin">0,0,0,4</Thickness> |
|||
<Thickness x:Key="TimePickerFirstHostThemeMargin">0,0,20,0</Thickness> |
|||
<Thickness x:Key="TimePickerThirdHostThemeMargin">20,0,0,0</Thickness> |
|||
<FontWeight x:Key="TimePickerHeaderThemeFontWeight">Normal</FontWeight> |
|||
</Styles.Resources> |
|||
|
|||
<Style Selector="TimePicker"> |
|||
<Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" /> |
|||
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" /> |
|||
<Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForeground}" /> |
|||
<Setter Property="HorizontalAlignment" Value="Left" /> |
|||
<Setter Property="VerticalAlignment" Value="Center" /> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}" RowDefinitions="Auto,*"> |
|||
<Grid.Styles> |
|||
<Style Selector="Button.TimePickerFlyoutButtonStyle"> |
|||
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackground}"/> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrush}"/> |
|||
<Setter Property="BorderThickness" Value="{DynamicResource TimePickerBorderThemeThickness}"/> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Border Background="{TemplateBinding Background}"> |
|||
<ContentPresenter Name="ContentPresenter" |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
Background="{TemplateBinding Background}" |
|||
BorderThickness="{TemplateBinding BorderThickness}" |
|||
Content="{TemplateBinding Content}" |
|||
TextBlock.Foreground="{TemplateBinding Foreground}" |
|||
HorizontalContentAlignment="Stretch" |
|||
VerticalContentAlignment="Stretch" |
|||
CornerRadius="{DynamicResource ControlCornerRadius}" /> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
<Style Selector="Button.TimePickerFlyoutButtonStyle:pointerover /template/ ContentPresenter"> |
|||
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPointerOver}"/> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushPointerOver}"/> |
|||
<Setter Property="TextBlock.Foreground" Value="{DynamicResource TimePickerButtonForegroundPointerOver}"/> |
|||
</Style> |
|||
<Style Selector="Button.TimePickerFlyoutButtonStyle:pressed /template/ ContentPresenter"> |
|||
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPressed}"/> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushPressed}"/> |
|||
<Setter Property="TextBlock.Foreground" Value="{DynamicResource TimePickerButtonForegroundPressed}"/> |
|||
</Style> |
|||
<Style Selector="Button.TimePickerFlyoutButtonStyle:disabled /template/ ContentPresenter"> |
|||
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundDisabled}"/> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushDisabled}"/> |
|||
<Setter Property="TextBlock.Foreground" Value="{DynamicResource TimePickerButtonForegroundDisabled}"/> |
|||
</Style> |
|||
<!-- Need separation of keyboard & pointer focus for this to work |
|||
<Style Selector="Button.TimePickerFlyoutButtonStyle:focus /template/ ContentPresenter"> |
|||
<Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundFocused}"/> |
|||
<Setter Property="TextBlock.Foreground" Value="{DynamicResource TimePickerButtonForegroundFocused}"/> |
|||
</Style>--> |
|||
</Grid.Styles> |
|||
<ContentPresenter x:Name="HeaderContentPresenter" |
|||
Grid.Row="0" |
|||
Content="{TemplateBinding Header}" |
|||
ContentTemplate="{TemplateBinding HeaderTemplate}" |
|||
Margin="{DynamicResource TimePickerTopHeaderMargin}" |
|||
MaxWidth="{DynamicResource TimePickerThemeMaxWidth}" |
|||
HorizontalAlignment="Stretch" |
|||
VerticalAlignment="Top" /> |
|||
|
|||
<Button x:Name="FlyoutButton" Classes="TimePickerFlyoutButtonStyle" |
|||
Grid.Row="1" |
|||
Foreground="{TemplateBinding Foreground}" |
|||
Background="{TemplateBinding Background}" |
|||
IsEnabled="{TemplateBinding IsEnabled}" |
|||
MinWidth="{StaticResource TimePickerThemeMinWidth}" |
|||
MaxWidth="{StaticResource TimePickerThemeMaxWidth}" |
|||
HorizontalAlignment="Stretch" |
|||
HorizontalContentAlignment="Stretch" |
|||
VerticalAlignment="Top"> |
|||
<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 x: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 x: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> |
|||
</Grid> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
|
|||
<Style Selector="TimePicker /template/ ContentPresenter#HeaderContentPresenter"> |
|||
<Setter Property="TextBlock.Foreground" Value="{DynamicResource TimePickerHeaderForeground}"/> |
|||
</Style> |
|||
|
|||
<Style Selector="TimePicker:disabled /template/ ContentPresenter#HeaderContentPresenter"> |
|||
<Setter Property="TextBlock.Foreground" Value="{DynamicResource TimePickerHeaderForegroundDisabled}"/> |
|||
</Style> |
|||
<Style Selector="TimePicker:disabled /template/ Rectangle"> |
|||
<Setter Property="Fill" Value="{DynamicResource TimePickerSpacerFillDisabled}"/> |
|||
</Style> |
|||
<!-- Changes foreground for watermark text when SelectedTime is null --> |
|||
<Style Selector="TimePicker:hasnotime /template/ Button#FlyoutButton TextBlock"> |
|||
<Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForeground}"/> |
|||
</Style> |
|||
|
|||
<!--WinUI: TimePickerFlyoutPresenter--> |
|||
<Style Selector="TimePickerPresenter"> |
|||
<Setter Property="Width" Value="242" /> |
|||
<Setter Property="MinWidth" Value="242" /> |
|||
<Setter Property="MaxHeight" Value="398" /> |
|||
<Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" /> |
|||
<Setter Property="FontWeight" Value="Normal" /> |
|||
<Setter Property="Background" Value="{DynamicResource TimePickerFlyoutPresenterBackground}" /> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource TimePickerFlyoutPresenterBorderBrush}" /> |
|||
<Setter Property="BorderThickness" Value="{DynamicResource DateTimeFlyoutBorderThickness}" /> |
|||
<!-- Added Property --> |
|||
<Setter Property="SelectorItemTemplate"> |
|||
<DataTemplate DataType="TimePickerPresenterItem"> |
|||
<Panel> |
|||
<TextBlock Text="{Binding DisplayText}" |
|||
HorizontalAlignment="Center" VerticalAlignment="Center" |
|||
Padding="{DynamicResource TimePickerFlyoutPresenterItemPadding}"/> |
|||
</Panel> |
|||
</DataTemplate> |
|||
</Setter> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Border Name="Background" |
|||
Background="{TemplateBinding Background}" |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
BorderThickness="{TemplateBinding BorderThickness}" |
|||
CornerRadius="{DynamicResource OverlayCornerRadius}" |
|||
Padding="{DynamicResource DateTimeFlyoutBorderPadding}" |
|||
MaxHeight="398"> |
|||
<Grid Name="ContentPanel" RowDefinitions="*,Auto"> |
|||
<Grid Name="PickerHost"> |
|||
<!--Ignore col defs here, set in code--> |
|||
<Rectangle x:Name="HighlightRect" IsHitTestVisible="False" |
|||
Fill="{DynamicResource TimePickerFlyoutPresenterHighlightFill}" |
|||
Grid.Column="0" |
|||
Grid.ColumnSpan="5" |
|||
VerticalAlignment="Center" |
|||
Height="{DynamicResource TimePickerFlyoutPresenterHighlightHeight}" /> |
|||
<Border x:Name="FirstPickerHost" Grid.Column="0" /> |
|||
<Rectangle x:Name="FirstPickerSpacing" |
|||
Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" |
|||
HorizontalAlignment="Center" |
|||
Width="{DynamicResource TimePickerSpacerThemeWidth}" |
|||
Grid.Column="1" /> |
|||
<Border x:Name="SecondPickerHost" Grid.Column="2" /> |
|||
<Rectangle x:Name="SecondPickerSpacing" |
|||
Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" |
|||
HorizontalAlignment="Center" |
|||
Width="{DynamicResource TimePickerSpacerThemeWidth}" |
|||
Grid.Column="3" /> |
|||
<Border x:Name="ThirdPickerHost" Grid.Column="4" /> |
|||
</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> |
|||
</Grid> |
|||
</Grid> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
|
|||
</Styles> |
|||
Loading…
Reference in new issue