Skip to content

Commit c24ff2d

Browse files
wongjiahauwongjiahau
committed
Successfully injected XamlDisplayerPanel into Pickers.xaml
1 parent 055d516 commit c24ff2d

File tree

2 files changed

+89
-93
lines changed

2 files changed

+89
-93
lines changed

‎MainDemo.Wpf/Pickers.xaml

Lines changed: 78 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -5,109 +5,98 @@
55
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
66
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
77
xmlns:domain="clr-namespace:MaterialDesignDemo.Domain"
8+
xmlns:codeDisplayer="clr-namespace:CodeDisplayer;assembly=CodeDisplayer"
89
mc:Ignorable="d"
910
d:DesignHeight="300" d:DesignWidth="300">
10-
<!-- for some reason to get the validation templates to show on this page need an extra decorator. haven't figure out why yet -->
1111
<AdornerDecorator>
12-
<Grid Margin="32">
13-
<Grid.RowDefinitions>
14-
<RowDefinition Height="Auto" />
15-
<RowDefinition Height="Auto" />
16-
<RowDefinition Height="Auto" />
17-
<RowDefinition Height="Auto" />
18-
</Grid.RowDefinitions>
19-
<Grid.ColumnDefinitions>
20-
<ColumnDefinition Width="Auto" />
21-
<ColumnDefinition Width="Auto" />
22-
<ColumnDefinition Width="Auto" />
23-
<ColumnDefinition />
24-
</Grid.ColumnDefinitions>
25-
<TextBlock Grid.ColumnSpan="3">Classic WPF DatePicker control with Material Design theme, and new TimePicker control:</TextBlock>
26-
<StackPanel Grid.Row="1" Grid.Column="0">
27-
<DatePicker Width="100" HorizontalAlignment="Left" Margin="0 16 0 0" materialDesign:HintAssist.Hint="Pick Date" Style="{StaticResource MaterialDesignFloatingHintDatePicker}" />
28-
<DatePicker x:Name="FutureDatePicker" Width="100" HorizontalAlignment="Left" Margin="0 16 0 0"
12+
<ScrollViewer>
13+
<codeDisplayer:XamlDisplayerPanel x:Name="XamlDisplayerPanel">
14+
<TextBlock >Classic WPF DatePicker control with Material Design theme, and new TimePicker control:</TextBlock>
15+
<DatePicker Width="100" HorizontalAlignment="Left" Margin="0 16 0 0" materialDesign:HintAssist.Hint="Pick Date" Style="{StaticResource MaterialDesignFloatingHintDatePicker}" />
16+
<DatePicker x:Name="FutureDatePicker" Width="100" HorizontalAlignment="Left" Margin="0 16 0 0"
2917
materialDesign:HintAssist.Hint="Future Date">
30-
<DatePicker.SelectedDate>
31-
<Binding Path="FutureValidatingDate" UpdateSourceTrigger="PropertyChanged">
32-
<Binding.ValidationRules>
33-
<domain:FutureDateValidationRule ValidatesOnTargetUpdated="True" />
34-
</Binding.ValidationRules>
35-
</Binding>
36-
</DatePicker.SelectedDate>
37-
</DatePicker>
38-
<ComboBox Name="LocaleCombo" HorizontalAlignment="Left" Width="50" Margin="0 32 0 0">
39-
<ComboBox.ItemsPanel>
40-
<ItemsPanelTemplate>
41-
<VirtualizingStackPanel />
42-
</ItemsPanelTemplate>
43-
</ComboBox.ItemsPanel>
44-
</ComboBox>
45-
<DatePicker Name="LocaleDatePicker" Width="120" HorizontalAlignment="Left" Margin="0 16 0 0" materialDesign:HintAssist.Hint="Locale Date" />
46-
<DatePicker Name="LocaleDatePickerRTL" Width="120" HorizontalAlignment="Left" Margin="0 16 0 0" materialDesign:HintAssist.Hint="RTL Locale Date" FlowDirection="RightToLeft" />
47-
</StackPanel>
48-
<materialDesign:TimePicker Grid.Row="1" Grid.Column="1" VerticalAlignment="Top" Width="100" HorizontalAlignment="Left" Margin="0 16 0 0"
18+
<DatePicker.SelectedDate>
19+
<Binding Path="FutureValidatingDate" UpdateSourceTrigger="PropertyChanged">
20+
<Binding.ValidationRules>
21+
<domain:FutureDateValidationRule ValidatesOnTargetUpdated="True" />
22+
</Binding.ValidationRules>
23+
</Binding>
24+
</DatePicker.SelectedDate>
25+
</DatePicker>
26+
<ComboBox materialDesign:HintAssist.Hint="Language"
27+
Style="{StaticResource MaterialDesignFloatingHintComboBox}"
28+
materialDesign:HintAssist.HintOpacity=".26"
29+
IsEditable="True"
30+
Name="LocaleCombo" HorizontalAlignment="Left" Width="100" Margin="0 32 0 0">
31+
<ComboBox.ItemsPanel>
32+
<ItemsPanelTemplate>
33+
<VirtualizingStackPanel />
34+
</ItemsPanelTemplate>
35+
</ComboBox.ItemsPanel>
36+
</ComboBox>
37+
<DatePicker Name="LocaleDatePicker" Width="120" HorizontalAlignment="Left" Margin="0 16 0 0" materialDesign:HintAssist.Hint="Locale Date" />
38+
<DatePicker Name="LocaleDatePickerRTL" Width="120" HorizontalAlignment="Left" Margin="0 16 0 0" materialDesign:HintAssist.Hint="RTL Locale Date" FlowDirection="RightToLeft" />
39+
<materialDesign:TimePicker VerticalAlignment="Top" Width="100" HorizontalAlignment="Left" Margin="0 16 0 0"
4940
Style="{StaticResource MaterialDesignFloatingHintTimePicker}"
5041
materialDesign:HintAssist.Hint="Custom hint" />
51-
<materialDesign:TimePicker Grid.Row="1" Grid.Column="2" Is24Hours="True" x:Name="PresetTimePicker" VerticalAlignment="Top" Width="100" HorizontalAlignment="Left" Margin="0 16 0 0" />
52-
<materialDesign:TimePicker Grid.Row="1" Grid.Column="3"
42+
<materialDesign:TimePicker Is24Hours="True" x:Name="PresetTimePicker" VerticalAlignment="Top" Width="100" HorizontalAlignment="Left" Margin="0 16 0 0" />
43+
<materialDesign:TimePicker
5344
materialDesign:HintAssist.Hint="Validates"
5445
IsInvalidTextAllowed="True"
5546
Is24Hours="True" VerticalAlignment="Top" Width="100" HorizontalAlignment="Left" Margin="0 16 0 0">
56-
<materialDesign:TimePicker.Text>
57-
<Binding Path="ValidatingTime" UpdateSourceTrigger="PropertyChanged">
58-
<Binding.ValidationRules>
59-
<domain:SimpleDateValidationRule ValidatesOnTargetUpdated="True" />
60-
</Binding.ValidationRules>
61-
</Binding>
62-
</materialDesign:TimePicker.Text>
63-
</materialDesign:TimePicker>
64-
65-
<TextBlock Grid.Row="2" 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>
66-
<StackPanel Grid.Row="3" Grid.Column="0" Orientation="Horizontal" Margin="0 32 0 0">
67-
<TextBlock Text="{Binding Date, StringFormat=d}" VerticalAlignment="Center" FontSize="24" />
68-
<Button Margin="8 0 0 0" Content="..."
47+
<materialDesign:TimePicker.Text>
48+
<Binding Path="ValidatingTime" UpdateSourceTrigger="PropertyChanged">
49+
<Binding.ValidationRules>
50+
<domain:SimpleDateValidationRule ValidatesOnTargetUpdated="True" />
51+
</Binding.ValidationRules>
52+
</Binding>
53+
</materialDesign:TimePicker.Text>
54+
</materialDesign:TimePicker>
55+
56+
<TextBlock MaxWidth="200" TextWrapping="Wrap">By combining the DialogHost (see MainWindow.xaml) and the Calendar and Clock controls, custom popups can be built.</TextBlock>
57+
<StackPanel Orientation="Horizontal" Margin="0 32 0 0">
58+
<TextBlock Text="{Binding Date, StringFormat=d}" VerticalAlignment="Center" FontSize="24" />
59+
<Button Margin="8 0 0 0" Content="..."
6960
Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}"
7061
materialDesign:DialogHost.DialogOpenedAttached="CalendarDialogOpenedEventHandler"
7162
materialDesign:DialogHost.DialogClosingAttached="CalendarDialogClosingEventHandler">
72-
<Button.CommandParameter>
73-
<Grid>
74-
<Grid.RowDefinitions>
75-
<RowDefinition Height="Auto" />
76-
<RowDefinition Height="Auto" />
77-
</Grid.RowDefinitions>
78-
<Calendar x:Name="Calendar" Margin="-1 -4 -1 0" />
79-
<StackPanel Grid.Row="1" Margin="8" HorizontalAlignment="Right" Orientation="Horizontal">
80-
<Button Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}" CommandParameter="1" Style="{DynamicResource MaterialDesignFlatButton}">OK</Button>
81-
<Button Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}" CommandParameter="0" Style="{DynamicResource MaterialDesignFlatButton}">CANCEL</Button>
82-
</StackPanel>
83-
</Grid>
84-
</Button.CommandParameter>
85-
</Button>
86-
</StackPanel>
87-
<StackPanel Grid.Row="3" Grid.Column="1" Orientation="Horizontal" Margin="0 32 0 0">
88-
<TextBlock Text="{Binding Time, StringFormat=t}" VerticalAlignment="Center" FontSize="24" />
89-
<Button Margin="8 0 0 0" Content="..."
63+
<Button.CommandParameter>
64+
<Grid>
65+
<Grid.RowDefinitions>
66+
<RowDefinition Height="Auto" />
67+
<RowDefinition Height="Auto" />
68+
</Grid.RowDefinitions>
69+
<Calendar x:Name="Calendar" Margin="-1 -4 -1 0" />
70+
<StackPanel Grid.Row="1" Margin="8" HorizontalAlignment="Right" Orientation="Horizontal">
71+
<Button Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}" CommandParameter="1" Style="{DynamicResource MaterialDesignFlatButton}">OK</Button>
72+
<Button Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}" CommandParameter="0" Style="{DynamicResource MaterialDesignFlatButton}">CANCEL</Button>
73+
</StackPanel>
74+
</Grid>
75+
</Button.CommandParameter>
76+
</Button>
77+
</StackPanel>
78+
<StackPanel Orientation="Horizontal" Margin="0 32 0 0">
79+
<TextBlock Text="{Binding Time, StringFormat=t}" VerticalAlignment="Center" FontSize="24" />
80+
<Button Margin="8 0 0 0" Content="..."
9081
Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}"
9182
materialDesign:DialogHost.DialogOpenedAttached="ClockDialogOpenedEventHandler"
9283
materialDesign:DialogHost.DialogClosingAttached="ClockDialogClosingEventHandler">
93-
<Button.CommandParameter>
94-
<Grid Margin="-1">
95-
<Grid.RowDefinitions>
96-
<RowDefinition Height="Auto" />
97-
<RowDefinition Height="Auto" />
98-
</Grid.RowDefinitions>
99-
<materialDesign:Clock DisplayAutomation="Cycle" x:Name="Clock" />
100-
<StackPanel Grid.Row="1" Margin="8" HorizontalAlignment="Right" Orientation="Horizontal">
101-
<Button Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}" CommandParameter="1" Style="{DynamicResource MaterialDesignFlatButton}">OK</Button>
102-
<Button Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}" CommandParameter="0" Style="{DynamicResource MaterialDesignFlatButton}">CANCEL</Button>
103-
</StackPanel>
104-
</Grid>
105-
</Button.CommandParameter>
106-
</Button>
107-
</StackPanel>
108-
109-
110-
111-
</Grid>
84+
<Button.CommandParameter>
85+
<Grid Margin="-1">
86+
<Grid.RowDefinitions>
87+
<RowDefinition Height="Auto" />
88+
<RowDefinition Height="Auto" />
89+
</Grid.RowDefinitions>
90+
<materialDesign:Clock DisplayAutomation="Cycle" x:Name="Clock" />
91+
<StackPanel Grid.Row="1" Margin="8" HorizontalAlignment="Right" Orientation="Horizontal">
92+
<Button Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}" CommandParameter="1" Style="{DynamicResource MaterialDesignFlatButton}">OK</Button>
93+
<Button Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}" CommandParameter="0" Style="{DynamicResource MaterialDesignFlatButton}">CANCEL</Button>
94+
</StackPanel>
95+
</Grid>
96+
</Button.CommandParameter>
97+
</Button>
98+
</StackPanel>
99+
</codeDisplayer:XamlDisplayerPanel>
100+
</ScrollViewer>
112101
</AdornerDecorator>
113102
</UserControl>

‎MainDemo.Wpf/Pickers.xaml.cs

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
using System.Windows.Media.Imaging;
1414
using System.Windows.Navigation;
1515
using System.Windows.Shapes;
16+
using CodeDisplayer;
17+
using MaterialDesignDemo.Helper;
1618
using MaterialDesignThemes.Wpf;
1719

1820
namespace MaterialDesignColors.WpfExample
@@ -29,14 +31,19 @@ public Pickers()
2931
LoadLocales();
3032
LocaleCombo.SelectionChanged += LocaleCombo_SelectionChanged;
3133
LocaleCombo.SelectedItem = "fr-CA";
34+
XamlDisplayerPanel.Initialize(new SourceRouter(this.GetType().Name).GetSource());
3235
}
3336

3437
private void LocaleCombo_SelectionChanged(object sender, SelectionChangedEventArgs e)
3538
{
36-
var lang = System.Windows.Markup.XmlLanguage.GetLanguage((string)LocaleCombo.SelectedItem);
37-
LocaleDatePicker.Language = lang;
38-
LocaleDatePickerRTL.Language = lang;
39-
39+
try {
40+
var lang = System.Windows.Markup.XmlLanguage.GetLanguage((string) LocaleCombo.SelectedItem);
41+
LocaleDatePicker.Language = lang;
42+
LocaleDatePickerRTL.Language = lang;
43+
}
44+
catch {
45+
LocaleCombo.SelectedItem = "fr-CA";
46+
}
4047
//HACK: The calendar only refresh when we change the date
4148
LocaleDatePicker.DisplayDate = LocaleDatePicker.DisplayDate.AddDays(1);
4249
LocaleDatePicker.DisplayDate = LocaleDatePicker.DisplayDate.AddDays(-1);

0 commit comments

Comments
 (0)