Skip to content

Commit bdee02e

Browse files
wongjiahauwongjiahau
committed
Completed demo for Transitions
1 parent 5ccb696 commit bdee02e

File tree

1 file changed

+266
-3
lines changed

1 file changed

+266
-3
lines changed

‎MainDemo.Wpf/Transitions.xaml

Lines changed: 266 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,271 @@
44
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
55
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
66
xmlns:transitionsDemo="clr-namespace:MaterialDesignDemo.TransitionsDemo"
7+
xmlns:codeDisplayer="clr-namespace:CodeDisplayer;assembly=CodeDisplayer"
8+
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
79
mc:Ignorable="d"
810
d:DesignHeight="300" d:DesignWidth="300">
9-
10-
<transitionsDemo:TransitionsDemoHome />
11-
</UserControl>
11+
<UserControl.Resources>
12+
<ResourceDictionary>
13+
<ResourceDictionary.MergedDictionaries>
14+
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TextBlock.xaml" />
15+
</ResourceDictionary.MergedDictionaries>
16+
</ResourceDictionary>
17+
</UserControl.Resources>
18+
<ScrollViewer>
19+
<codeDisplayer:XamlDisplayerPanel SourceFileName="Transitions.xaml">
20+
<TextBlock Style="{StaticResource MaterialDesignDisplay2TextBlock}">Transitions Demo</TextBlock>
21+
<TextBlock MaxWidth="300" TextWrapping="Wrap">
22+
The transitioner will manage your transitions. Notice how SelectedIndex is set to zero : the first slide (instead of the default of -1)
23+
</TextBlock>
24+
<materialDesign:Transitioner SelectedIndex="0" AutoApplyTransitionOrigins="True">
25+
<materialDesign:TransitionerSlide>
26+
<materialDesign:ColorZone Mode="PrimaryDark" Width="300" Height="300">
27+
<Button Style="{StaticResource MaterialDesignFloatingActionAccentButton}"
28+
Command="{x:Static materialDesign:Transitioner.MoveNextCommand}"
29+
Content="{materialDesign:PackIcon Pill}" />
30+
</materialDesign:ColorZone>
31+
</materialDesign:TransitionerSlide>
32+
<materialDesign:TransitionerSlide>
33+
<materialDesign:ColorZone Mode="PrimaryLight" Width="300" Height="300">
34+
<Button Style="{DynamicResource MaterialDesignFloatingActionMiniButton}"
35+
Command="{x:Static materialDesign:Transitioner.MovePreviousCommand}"
36+
Content="{materialDesign:PackIcon StepBackward}" />
37+
</materialDesign:ColorZone>
38+
</materialDesign:TransitionerSlide>
39+
</materialDesign:Transitioner>
40+
<TextBlock MaxWidth="300" TextWrapping="Wrap">
41+
You can use bare xaml too, without using TransitionerSlide
42+
</TextBlock>
43+
<materialDesign:Transitioner SelectedIndex="0" AutoApplyTransitionOrigins="True">
44+
<materialDesign:ColorZone Mode="PrimaryDark" Width="300" Height="300">
45+
<Button Style="{StaticResource MaterialDesignFloatingActionAccentButton}"
46+
Command="{x:Static materialDesign:Transitioner.MoveNextCommand}"
47+
Content="{materialDesign:PackIcon Pill}" />
48+
</materialDesign:ColorZone>
49+
<materialDesign:ColorZone Mode="PrimaryLight" Width="300" Height="300">
50+
<Button Style="{DynamicResource MaterialDesignFloatingActionMiniButton}"
51+
Command="{x:Static materialDesign:Transitioner.MovePreviousCommand}"
52+
Content="{materialDesign:PackIcon StepBackward}" />
53+
</materialDesign:ColorZone>
54+
</materialDesign:Transitioner>
55+
<TextBlock MaxWidth="300" TextWrapping="Wrap">
56+
You can control (and create your own) wipes with TransitionerSlide
57+
</TextBlock>
58+
<materialDesign:Transitioner SelectedIndex="0" AutoApplyTransitionOrigins="True">
59+
<materialDesign:TransitionerSlide>
60+
<materialDesign:TransitionerSlide.ForwardWipe>
61+
<materialDesign:SlideWipe Direction="Right"/>
62+
</materialDesign:TransitionerSlide.ForwardWipe>
63+
<materialDesign:ColorZone Mode="PrimaryDark" Width="300" Height="300">
64+
<Button Style="{StaticResource MaterialDesignRaisedAccentButton}"
65+
Command="{x:Static materialDesign:Transitioner.MoveNextCommand}"
66+
HorizontalAlignment="Center"
67+
Content="SlideWipe" />
68+
</materialDesign:ColorZone>
69+
</materialDesign:TransitionerSlide>
70+
<materialDesign:TransitionerSlide>
71+
<materialDesign:TransitionerSlide.BackwardWipe>
72+
<materialDesign:CircleWipe />
73+
</materialDesign:TransitionerSlide.BackwardWipe>
74+
<materialDesign:ColorZone Mode="PrimaryLight" Width="300" Height="300">
75+
<Button Command="{x:Static materialDesign:Transitioner.MovePreviousCommand}"
76+
HorizontalAlignment="Center"
77+
Content="CircleWipe" />
78+
</materialDesign:ColorZone>
79+
</materialDesign:TransitionerSlide>
80+
</materialDesign:Transitioner>
81+
<materialDesign:Transitioner SelectedIndex="0" AutoApplyTransitionOrigins="True">
82+
<materialDesign:TransitionerSlide>
83+
<materialDesign:TransitionerSlide.ForwardWipe>
84+
<materialDesign:FadeWipe Duration="00:00:0.6" />
85+
</materialDesign:TransitionerSlide.ForwardWipe>
86+
<materialDesign:ColorZone Mode="PrimaryDark" Width="300" Height="300">
87+
<Button Style="{StaticResource MaterialDesignRaisedAccentButton}"
88+
Command="{x:Static materialDesign:Transitioner.MoveNextCommand}"
89+
HorizontalAlignment="Center"
90+
Content="FadeWipe" />
91+
</materialDesign:ColorZone>
92+
</materialDesign:TransitionerSlide>
93+
<materialDesign:TransitionerSlide>
94+
<materialDesign:TransitionerSlide.BackwardWipe>
95+
<materialDesign:SlideOutWipe />
96+
</materialDesign:TransitionerSlide.BackwardWipe>
97+
<materialDesign:ColorZone Mode="PrimaryLight" Width="300" Height="300">
98+
<Button Command="{x:Static materialDesign:Transitioner.MovePreviousCommand}"
99+
HorizontalAlignment="Center"
100+
Content="SlideOutWipe" />
101+
</materialDesign:ColorZone>
102+
</materialDesign:TransitionerSlide>
103+
</materialDesign:Transitioner>
104+
<TextBlock MaxWidth="300" TextWrapping="Wrap">
105+
You can also use TransitionEffect
106+
</TextBlock>
107+
<materialDesign:Transitioner SelectedIndex="0" AutoApplyTransitionOrigins="True">
108+
<materialDesign:TransitionerSlide>
109+
<materialDesign:TransitionerSlide.OpeningEffect>
110+
<materialDesign:TransitionEffect Kind="ExpandIn" />
111+
</materialDesign:TransitionerSlide.OpeningEffect>
112+
<materialDesign:ColorZone Mode="PrimaryDark" Width="300" Height="300">
113+
<Button Style="{StaticResource MaterialDesignFloatingActionAccentButton}"
114+
Command="{x:Static materialDesign:Transitioner.MoveNextCommand}"
115+
Content="{materialDesign:PackIcon Pill}" />
116+
</materialDesign:ColorZone>
117+
</materialDesign:TransitionerSlide>
118+
<materialDesign:TransitionerSlide>
119+
<materialDesign:TransitionerSlide.OpeningEffect>
120+
<materialDesign:TransitionEffect Kind="SlideInFromTop" />
121+
</materialDesign:TransitionerSlide.OpeningEffect>
122+
<materialDesign:ColorZone Mode="PrimaryLight" Width="300" Height="300">
123+
<Button Style="{DynamicResource MaterialDesignFloatingActionMiniButton}"
124+
Command="{x:Static materialDesign:Transitioner.MovePreviousCommand}"
125+
Content="{materialDesign:PackIcon StepBackward}" />
126+
</materialDesign:ColorZone>
127+
</materialDesign:TransitionerSlide>
128+
</materialDesign:Transitioner>
129+
<TextBlock MaxWidth="300" TextWrapping="Wrap">
130+
Now we are going to slide this in by combining some extra effects. The inner content slides in, so we'll set the outer background and clip, to keep things nice.
131+
</TextBlock>
132+
<materialDesign:Transitioner SelectedIndex="0" AutoApplyTransitionOrigins="True">
133+
<materialDesign:TransitionerSlide>
134+
<materialDesign:ColorZone Mode="PrimaryDark" Width="300" Height="300">
135+
<Button Style="{StaticResource MaterialDesignFloatingActionAccentButton}"
136+
Command="{x:Static materialDesign:Transitioner.MoveNextCommand}"
137+
Content="{materialDesign:PackIcon Pill}" />
138+
</materialDesign:ColorZone>
139+
</materialDesign:TransitionerSlide>
140+
<materialDesign:TransitionerSlide ClipToBounds="True">
141+
<materialDesign:TransitionerSlide.OpeningEffects>
142+
<materialDesign:TransitionEffect Kind="SlideInFromLeft" Duration="0:0:0.8" />
143+
<materialDesign:TransitionEffect Kind="SlideInFromBottom" Duration="0:0:0.8" OffsetTime="0:0:0.15" />
144+
</materialDesign:TransitionerSlide.OpeningEffects>
145+
<materialDesign:ColorZone Mode="PrimaryLight" Width="300" Height="300">
146+
<Button Style="{DynamicResource MaterialDesignFloatingActionMiniButton}"
147+
Command="{x:Static materialDesign:Transitioner.MovePreviousCommand}"
148+
Content="{materialDesign:PackIcon StepBackward}" />
149+
</materialDesign:ColorZone>
150+
</materialDesign:TransitionerSlide>
151+
</materialDesign:Transitioner>
152+
<TextBlock MaxWidth="300" TextWrapping="Wrap">
153+
Next we will look at some granular transitions on individual elements using TransitioningContent
154+
</TextBlock>
155+
<materialDesign:Transitioner SelectedIndex="0" AutoApplyTransitionOrigins="True">
156+
<materialDesign:TransitionerSlide>
157+
<materialDesign:ColorZone Mode="PrimaryDark" Width="300" Height="300">
158+
<Button Style="{StaticResource MaterialDesignFloatingActionAccentButton}"
159+
Command="{x:Static materialDesign:Transitioner.MoveNextCommand}"
160+
Content="{materialDesign:PackIcon Pill}" />
161+
</materialDesign:ColorZone>
162+
</materialDesign:TransitionerSlide>
163+
<materialDesign:TransitionerSlide>
164+
<Grid HorizontalAlignment="Center" Width="418" >
165+
<Grid.RowDefinitions>
166+
<RowDefinition Height="Auto" />
167+
<RowDefinition Height="Auto" />
168+
<RowDefinition Height="Auto" />
169+
</Grid.RowDefinitions>
170+
<materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect SlideInFromRight, Duration=0:0:1.2}">
171+
<materialDesign:ColorZone Mode="PrimaryMid" materialDesign:ShadowAssist.ShadowDepth="Depth3" Margin="4">
172+
<StackPanel Margin="16" Orientation="Horizontal">
173+
<materialDesign:PackIcon Kind="Account" Height="32" Width="32" />
174+
<TextBlock Style="{DynamicResource MaterialDesignHeadlineTextBlock}" Margin="16 0 0 0">Contacts</TextBlock>
175+
</StackPanel>
176+
</materialDesign:ColorZone>
177+
</materialDesign:TransitioningContent>
178+
<ItemsControl Grid.Row="1">
179+
<ItemsControl.ItemsPanel>
180+
<ItemsPanelTemplate>
181+
<UniformGrid Columns="4" />
182+
</ItemsPanelTemplate>
183+
</ItemsControl.ItemsPanel>
184+
<ItemsControl.Resources>
185+
<Style TargetType="{x:Type materialDesign:ColorZone}" BasedOn="{StaticResource {x:Type materialDesign:ColorZone}}">
186+
<Setter Property="Width" Value="96" />
187+
<Setter Property="Height" Value="96" />
188+
<Setter Property="Margin" Value="4" />
189+
<Setter Property="Mode" Value="PrimaryLight" />
190+
</Style>
191+
</ItemsControl.Resources>
192+
<materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect ExpandIn}">
193+
<materialDesign:ColorZone>
194+
<materialDesign:PackIcon Kind="Phone" VerticalAlignment="Center" HorizontalAlignment="Center" />
195+
</materialDesign:ColorZone>
196+
</materialDesign:TransitioningContent>
197+
198+
<materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}">
199+
<materialDesign:TransitioningContent.OpeningEffects>
200+
<materialDesign:TransitionEffect Kind="ExpandIn" />
201+
</materialDesign:TransitioningContent.OpeningEffects>
202+
<materialDesign:ColorZone>
203+
<materialDesign:PackIcon Kind="Phone" VerticalAlignment="Center" HorizontalAlignment="Center" />
204+
</materialDesign:ColorZone>
205+
</materialDesign:TransitioningContent>
206+
207+
<materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}">
208+
<materialDesign:TransitioningContent.OpeningEffects>
209+
<materialDesign:TransitionEffect Kind="ExpandIn" />
210+
</materialDesign:TransitioningContent.OpeningEffects>
211+
<materialDesign:ColorZone>
212+
<materialDesign:PackIcon Kind="Phone" VerticalAlignment="Center" HorizontalAlignment="Center" />
213+
</materialDesign:ColorZone>
214+
</materialDesign:TransitioningContent>
215+
216+
<materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}">
217+
<materialDesign:TransitioningContent.OpeningEffects>
218+
<materialDesign:TransitionEffect Kind="ExpandIn" />
219+
</materialDesign:TransitioningContent.OpeningEffects>
220+
<materialDesign:ColorZone>
221+
<materialDesign:PackIcon Kind="Phone" VerticalAlignment="Center" HorizontalAlignment="Center" />
222+
</materialDesign:ColorZone>
223+
</materialDesign:TransitioningContent>
224+
225+
<materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}">
226+
<materialDesign:TransitioningContent.OpeningEffects>
227+
<materialDesign:TransitionEffect Kind="ExpandIn" />
228+
</materialDesign:TransitioningContent.OpeningEffects>
229+
<materialDesign:ColorZone>
230+
<materialDesign:PackIcon Kind="Phone" VerticalAlignment="Center" HorizontalAlignment="Center" />
231+
</materialDesign:ColorZone>
232+
</materialDesign:TransitioningContent>
233+
234+
<materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}">
235+
<materialDesign:TransitioningContent.OpeningEffects>
236+
<materialDesign:TransitionEffect Kind="ExpandIn" />
237+
</materialDesign:TransitioningContent.OpeningEffects>
238+
<materialDesign:ColorZone>
239+
<materialDesign:PackIcon Kind="Phone" VerticalAlignment="Center" HorizontalAlignment="Center" />
240+
</materialDesign:ColorZone>
241+
</materialDesign:TransitioningContent>
242+
243+
<materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}">
244+
<materialDesign:TransitioningContent.OpeningEffects>
245+
<materialDesign:TransitionEffect Kind="ExpandIn" />
246+
</materialDesign:TransitioningContent.OpeningEffects>
247+
<materialDesign:ColorZone>
248+
<materialDesign:PackIcon Kind="Phone" VerticalAlignment="Center" HorizontalAlignment="Center" />
249+
</materialDesign:ColorZone>
250+
</materialDesign:TransitioningContent>
251+
252+
<materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}">
253+
<materialDesign:TransitioningContent.OpeningEffects>
254+
<materialDesign:TransitionEffect Kind="ExpandIn" />
255+
</materialDesign:TransitioningContent.OpeningEffects>
256+
<materialDesign:ColorZone>
257+
<materialDesign:PackIcon Kind="Phone" VerticalAlignment="Center" HorizontalAlignment="Center" />
258+
</materialDesign:ColorZone>
259+
</materialDesign:TransitioningContent>
260+
</ItemsControl>
261+
<StackPanel Orientation="Horizontal" Grid.Row="2" HorizontalAlignment="Right">
262+
<Button Style="{DynamicResource MaterialDesignFloatingActionMiniButton}"
263+
Command="{x:Static materialDesign:Transitioner.MovePreviousCommand}"
264+
VerticalAlignment="Center" HorizontalAlignment="Left"
265+
Margin="16">
266+
<materialDesign:PackIcon Kind="StepBackward" />
267+
</Button>
268+
</StackPanel>
269+
</Grid>
270+
</materialDesign:TransitionerSlide>
271+
</materialDesign:Transitioner>
272+
</codeDisplayer:XamlDisplayerPanel>
273+
</ScrollViewer>
274+
</UserControl>

0 commit comments

Comments
 (0)