Как использовать элементы управления выбора даты и времени (date and time picker controls) в XAML?
Как использовать элементы управления выбора даты и времени (date and time picker controls) в XAML?
1 ответ
@kathryn
Для использования элементов управления выбора даты и времени в XAML необходимо добавить соответствующие элементы управления в разметку.
- Элемент управления выбора даты (DatePicker)
Пример разметки:
1
|
<DatePicker Width="200" Height="30" DisplayDateStart="2021-01-01" SelectedDate="{Binding SelectedDate}" />
|
В этом примере у элемента управления задана ширина и высота, а также определены два свойства:
- DisplayDateStart – определяет начальную дату, которая будет отображаться в календаре выбора даты;
- SelectedDate – привязывается к свойству модели представления, которое будет хранить выбранную пользователем дату.
- Элемент управления выбора времени (TimePicker)
Пример разметки:
1
|
<TimePicker Width="200" Height="30" SelectedTime="{Binding SelectedTime}" />
|
В этом примере у элемента управления задана ширина и высота, а также определено свойство SelectedTime, которое привязано к свойству модели представления для хранения выбранного времени.
Однако, элемент управления выбора времени по умолчанию не отображает секунды. Чтобы добавить отображение секунд, можно использовать специальный стиль:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<TimePicker Width="200" Height="30" SelectedTime="{Binding SelectedTime}">
<TimePicker.Resources>
<Style TargetType="TimePicker">
<Setter Property="IsDropDownOpen" Value="True" />
<Setter Property="TextBox.SelectionBrush" Value="White" />
<Setter Property="TextBox.SelectionTextBrush" Value="Black" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TimePicker}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0"
x:Name="PART_TextBox"
TextAlignment="Center"
SelectionBrush="{TemplateBinding TextBox.SelectionBrush}"
SelectionTextBrush="{TemplateBinding TextBox.SelectionTextBrush}"
BorderThickness="{TemplateBinding Border.BorderThickness}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Background="{TemplateBinding Control.Background}"
Foreground="{TemplateBinding Control.Foreground}"
FontSize="{TemplateBinding Control.FontSize}"
FontFamily="{TemplateBinding Control.FontFamily}"
FontWeight="{TemplateBinding Control.FontWeight}"
Padding="{TemplateBinding Control.Padding}"
IsReadOnly="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}"
VerticalContentAlignment="{TemplateBinding Control.VerticalContentAlignment}" />
<Button Grid.Column="1"
x:Name="PART_Button"
Margin="2,0,0,0"
Width="{Binding ActualHeight, ElementName=PART_TextBox}"
Height="{Binding ActualHeight, ElementName=PART_TextBox}"
Background="{TemplateBinding Control.Background}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
BorderThickness="{TemplateBinding Border.BorderThickness}"
Command="TimePicker:TimePicker.ToggleDropDownCommand" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsDropDownOpen" Value="True">
<Setter Property="IsEnabled" Value="False" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TimePicker.Resources>
</TimePicker>
|
В этом примере определен стиль для элемента управления TimePicker, который переопределяет шаблон управления. Здесь отключен выпадающий список выбора времени, и задана кнопка для открытия списка. Кнопка по ширине соответствует высоте текстового поля. Текстовое поле не редактируемо и выровнено по центру.
Строкой Command="TimePicker:TimePicker.ToggleDropDownCommand" задана ко***** для открытия списка выбора времени, которая реализуется в методе OnKeyDown стиля.
Обратите внимание, что для использования этого стиля необходимо в файле XAML пространства имен добавить строку xmlns:TimePicker="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit".
Теперь элемент управления выбора времени будет отображать секунды.