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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
|
<UserControl x:Class="MaterialDesignColors.WpfExample.Dialogs"
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:system="clr-namespace:System;assembly=mscorlib"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock TextWrapping="Wrap" Margin="32">Dialogs are supported via the DialogHost control which was designed to work with MVVM/binding, code-behind, routed commands, and a pure code-based API.</TextBlock>
<ScrollViewer HorizontalScrollBarVisibility="Auto" Grid.Row="1">
<Grid VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="320" />
<ColumnDefinition Width="320" />
<ColumnDefinition Width="320" />
<ColumnDefinition Width="320" />
</Grid.ColumnDefinitions>
<!--#region SAMPLE 1-->
<TextBlock TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Top"
Margin="8 0 8 0"
>SAMPLE 1: Localised dialog encapsulating specific content, launched from a routed command, response handled in code-behind.</TextBlock>
<smtx:XamlDisplay Key="dialogs_sample1" Grid.Column="0" Grid.Row="1" Margin="5 0 0 0">
<materialDesign:DialogHost DialogClosing="Sample1_DialogHost_OnDialogClosing"
HorizontalAlignment="Center" VerticalAlignment="Center">
<materialDesign:DialogHost.DialogContent>
<StackPanel Margin="16">
<TextBlock>Add a new fruit.</TextBlock>
<TextBox Margin="0 8 0 0" HorizontalAlignment="Stretch" x:Name="FruitTextBox" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Button Style="{StaticResource MaterialDesignFlatButton}"
IsDefault="True"
Margin="0 8 8 0"
Command="materialDesign:DialogHost.CloseDialogCommand">
<Button.CommandParameter>
<system:Boolean>True</system:Boolean>
</Button.CommandParameter>
ACCEPT
</Button>
<Button Style="{StaticResource MaterialDesignFlatButton}"
IsCancel="True"
Margin="0 8 8 0"
Command="materialDesign:DialogHost.CloseDialogCommand">
<Button.CommandParameter>
<system:Boolean>False</system:Boolean>
</Button.CommandParameter>
CANCEL
</Button>
</StackPanel>
</StackPanel>
</materialDesign:DialogHost.DialogContent>
<Border BorderThickness="1" BorderBrush="{DynamicResource PrimaryHueMidBrush}"
MinWidth="256" MinHeight="256" ClipToBounds="True">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListBox x:Name="FruitListBox">
<ListBoxItem>Apple</ListBoxItem>
<ListBoxItem>Banana</ListBoxItem>
<ListBoxItem>Pear</ListBoxItem>
</ListBox>
<materialDesign:ColorZone Mode="PrimaryMid" Grid.Row="1" Effect="{DynamicResource MaterialDesignShadowDepth5}">
<TextBlock Margin="16">Fruit Bowl</TextBlock>
</materialDesign:ColorZone>
<Button Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}"
Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}"
VerticalAlignment="Bottom" HorizontalAlignment="Right"
Grid.Row="0" Margin="0 0 28 -20">
<Viewbox Width="22" Height="22">
<Canvas Width="24" Height="24">
<Path Data="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Button}, Path=Foreground}" />
</Canvas>
</Viewbox>
</Button>
</Grid>
</Border>
</materialDesign:DialogHost>
</smtx:XamlDisplay>
<!--#endregion -->
<!--#region SAMPLE 2-->
<TextBlock Grid.Column="1" Grid.Row="0" TextWrapping="Wrap" VerticalAlignment="Top" Margin="8 0 8 0">SAMPLE 2: Top level dialog, using OpenDialog, passing content via the Parameter. You can pass a view model, provided a corresponding DataTemplate can be found in the scope of the root DialogHost.</TextBlock>
<smtx:XamlDisplay Grid.Column="1" Grid.Row="1" Key="dialogs_sample2">
<StackPanel VerticalAlignment="Center">
<!--the request to open the dialog will bubble up to the top-most DialogHost, but we can used the attached property based event to handle the response -->
<Button Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}"
materialDesign:DialogHost.DialogClosingAttached="Sample2_DialogHost_OnDialogClosing"
Width="128">
<Button.CommandParameter>
<StackPanel Margin="16">
<ProgressBar Style="{DynamicResource MaterialDesignCircularProgressBar}" HorizontalAlignment="Center" Margin="16" IsIndeterminate="True" Value="0" />
<Button Style="{StaticResource MaterialDesignFlatButton}" IsCancel="True"
Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}"
CommandParameter="Sample2Cancel"
HorizontalAlignment="Center">CANCEL</Button>
</StackPanel>
</Button.CommandParameter>
PASS VIEW
</Button>
<Button Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}"
Width="128" Margin="0 32 0 0">
<Button.CommandParameter>
<!-- the simplest view model of all, a DateTime. the view can be found in the resources of MainWindow.xaml -->
<system:DateTime>1966-JUL-30</system:DateTime>
</Button.CommandParameter>
PASS MODEL
</Button>
</StackPanel>
</smtx:XamlDisplay>
<!--#endregion-->
<!--#region SAMPLE 3-->
<TextBlock Grid.Column="2" Grid.Row="0" TextWrapping="Wrap" VerticalAlignment="Top" Margin="8 0 8 0">SAMPLE 3: Open and listen to the dialog entirely from code in a view model.</TextBlock>
<!-- Executes a command on DialogsViewModel.cs, which will launch the dialog from code -->
<smtx:XamlDisplay Grid.Column="2" Grid.Row="1" Key="dialogs_sample3">
<StackPanel>
<Button Command="{Binding RunDialogCommand}"
Width="128">
RUN CODE
</Button>
<Button Command="{Binding RunExtendedDialogCommand}"
Width="128" Margin="0 32 0 0">
EXTENDED
</Button>
</StackPanel>
</smtx:XamlDisplay>
<!--#endregion-->
<!--#region SAMPLE 4-->
<TextBlock TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Top"
Grid.Column="3" Margin="8 0 8 0"
>SAMPLE 4: Dialog managed from view model using IsOpen and custom commands (ignoring the provided routed commands).</TextBlock>
<smtx:XamlDisplay Key="dialogs_sample4" Grid.Column="3" Grid.Row="1" >
<materialDesign:DialogHost HorizontalAlignment="Center" VerticalAlignment="Center"
IsOpen="{Binding IsSample4DialogOpen}"
DialogContent="{Binding Sample4Content}"
CloseOnClickAway="True">
<Border BorderThickness="1" BorderBrush="{DynamicResource PrimaryHueMidBrush}"
MinWidth="256" MinHeight="256" ClipToBounds="True">
<Button HorizontalAlignment="Center" VerticalAlignment="Center"
Command="{Binding OpenSample4DialogCommand}"
>RUN</Button>
</Border>
</materialDesign:DialogHost>
</smtx:XamlDisplay>
<!--#endregion-->
</Grid>
</ScrollViewer>
</Grid>
</UserControl>
|
