blob: d88f54867e2d9eaccd45c1d66fd55ab2a1d0da0a (
plain)
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
<UserControl x:Class="MaterialDesignColors.WpfExample.Pickers"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:domain="clr-namespace:MaterialDesignDemo.Domain"
xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<!-- for some reason to get the validation templates to show on this page need an extra decorator. haven't figure out why yet -->
<AdornerDecorator>
<ScrollViewer>
<Grid Margin="32">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.ColumnSpan="3">Classic WPF DatePicker control with Material Design theme, and new TimePicker control:</TextBlock>
<StackPanel Grid.Row="1" Grid.Column="0">
<smtx:XamlDisplay Key="pickers_1" HorizontalAlignment="Left" Margin="0 16 0 0">
<DatePicker Width="100" materialDesign:HintAssist.Hint="Pick Date" Style="{StaticResource MaterialDesignFloatingHintDatePicker}" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Key="pickers_2" HorizontalAlignment="Left" Margin="0 16 0 0" >
<DatePicker x:Name="FutureDatePicker" Width="100"
materialDesign:HintAssist.Hint="Future Date">
<DatePicker.SelectedDate>
<Binding Path="FutureValidatingDate" UpdateSourceTrigger="PropertyChanged">
<Binding.ValidationRules>
<domain:FutureDateValidationRule ValidatesOnTargetUpdated="True" />
</Binding.ValidationRules>
</Binding>
</DatePicker.SelectedDate>
</DatePicker>
</smtx:XamlDisplay>
<smtx:XamlDisplay Key="pickers_3" HorizontalAlignment="Left" Margin="0 32 0 0">
<ComboBox Name="LocaleCombo" Width="50">
<ComboBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ComboBox.ItemsPanel>
</ComboBox>
</smtx:XamlDisplay>
<smtx:XamlDisplay Key="pickers_4" HorizontalAlignment="Left" Margin="0 16 0 0">
<DatePicker Name="LocaleDatePicker" Width="120" materialDesign:HintAssist.Hint="Locale Date" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Key="pickers_5" HorizontalAlignment="Left" Margin="0 16 0 0">
<DatePicker Name="LocaleDatePickerRTL" Width="120" materialDesign:HintAssist.Hint="RTL Locale Date" FlowDirection="RightToLeft" />
</smtx:XamlDisplay>
</StackPanel>
<smtx:XamlDisplay Key="pickers_6" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" Margin="0 16 0 0" VerticalAlignment="Top">
<materialDesign:TimePicker Width="100"
Style="{StaticResource MaterialDesignFloatingHintTimePicker}"
materialDesign:HintAssist.Hint="Custom hint" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Key="pickers_7" Grid.Row="1" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0 16 0 0">
<materialDesign:TimePicker Is24Hours="True" x:Name="PresetTimePicker" Width="100" />
</smtx:XamlDisplay>
<smtx:XamlDisplay Key="pickers_8" Grid.Row="1" Grid.Column="3" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0 16 0 0">
<materialDesign:TimePicker
materialDesign:HintAssist.Hint="Validates"
IsInvalidTextAllowed="True"
Is24Hours="True" Width="100">
<materialDesign:TimePicker.Text>
<Binding Path="ValidatingTime" UpdateSourceTrigger="PropertyChanged">
<Binding.ValidationRules>
<domain:SimpleDateValidationRule ValidatesOnTargetUpdated="True" />
</Binding.ValidationRules>
</Binding>
</materialDesign:TimePicker.Text>
</materialDesign:TimePicker>
</smtx:XamlDisplay>
<TextBlock Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Margin="0 128 0 0">By combining the DialogHost (see MainWindow.xaml) and the Calendar and Clock controls, custom popups can be built.</TextBlock>
<smtx:XamlDisplay Key="pickers_9" Grid.Row="3" Grid.Column="0" Margin="0 32 0 0" HorizontalAlignment="Left">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Date, StringFormat=d}" VerticalAlignment="Center" FontSize="24" />
<Button Margin="8 0 0 0" Content="..."
Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}"
materialDesign:DialogHost.DialogOpenedAttached="CalendarDialogOpenedEventHandler"
materialDesign:DialogHost.DialogClosingAttached="CalendarDialogClosingEventHandler">
<Button.CommandParameter>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Calendar x:Name="Calendar" Margin="-1 -4 -1 0" />
<StackPanel Grid.Row="1" Margin="8" HorizontalAlignment="Right" Orientation="Horizontal">
<Button Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}" CommandParameter="1" Style="{DynamicResource MaterialDesignFlatButton}">OK</Button>
<Button Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}" CommandParameter="0" Style="{DynamicResource MaterialDesignFlatButton}">CANCEL</Button>
</StackPanel>
</Grid>
</Button.CommandParameter>
</Button>
</StackPanel>
</smtx:XamlDisplay>
<smtx:XamlDisplay Key="pickers_10" Grid.Row="3" Grid.Column="1" Margin="0 32 0 0" HorizontalAlignment="Left">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Time, StringFormat=t}" VerticalAlignment="Center" FontSize="24" />
<Button Margin="8 0 0 0" Content="..."
Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}"
materialDesign:DialogHost.DialogOpenedAttached="ClockDialogOpenedEventHandler"
materialDesign:DialogHost.DialogClosingAttached="ClockDialogClosingEventHandler">
<Button.CommandParameter>
<Grid Margin="-1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<materialDesign:Clock DisplayAutomation="Cycle" x:Name="Clock" />
<StackPanel Grid.Row="1" Margin="8" HorizontalAlignment="Right" Orientation="Horizontal">
<Button Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}" CommandParameter="1" Style="{DynamicResource MaterialDesignFlatButton}">OK</Button>
<Button Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}" CommandParameter="0" Style="{DynamicResource MaterialDesignFlatButton}">CANCEL</Button>
</StackPanel>
</Grid>
</Button.CommandParameter>
</Button>
</StackPanel>
</smtx:XamlDisplay>
</Grid>
</ScrollViewer>
</AdornerDecorator>
</UserControl>
|
