Skip to content

Commit 1f0b29e

Browse files
ButchersBoyButchersBoy
committed
flipping card and demo
1 parent 0d4a313 commit 1f0b29e

File tree

9 files changed

+621
-174
lines changed

9 files changed

+621
-174
lines changed

‎MainDemo.Wpf/App.xaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Application x:Class="MaterialDesignColors.WpfExample.App"
22
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4-
StartupUri="ProvingGround.xaml">
4+
StartupUri="MainWindow.xaml">
55
<Application.Resources>
66
<ResourceDictionary>
77
<ResourceDictionary.MergedDictionaries>

‎MainDemo.Wpf/Cards.xaml

Lines changed: 124 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,9 @@
1111
<ResourceDictionary.MergedDictionaries>
1212
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
1313
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Card.xaml" />
14-
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Popupbox.xaml" />
1514
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.CheckBox.xaml" />
15+
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Flipper.xaml" />
16+
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Popupbox.xaml" />
1617
</ResourceDictionary.MergedDictionaries>
1718
</ResourceDictionary>
1819
</UserControl.Resources>
@@ -114,39 +115,47 @@
114115
</StackPanel>
115116
</Grid>
116117
</materialDesign:Card>
117-
<materialDesign:Card Margin="4 4 0 0" Background="#03a9f4"
118+
<StackPanel>
119+
<materialDesign:Card Margin="4 4 0 0" Background="#03a9f4"
120+
Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}"
121+
Padding="0"
122+
Width="200">
123+
<Grid>
124+
<Grid.RowDefinitions>
125+
<RowDefinition Height="Auto" />
126+
<RowDefinition Height="Auto" />
127+
<RowDefinition Height="Auto" />
128+
</Grid.RowDefinitions>
129+
<TextBlock Grid.Row="0" Margin="16 16 16 4" Style="{StaticResource MaterialDesignHeadlineTextBlock}">Call Jennifer</TextBlock>
130+
<Separator Grid.Row="1" Style="{StaticResource MaterialDesignLightSeparator}"/>
131+
<TextBlock Grid.Row="2" Margin="16 0 16 8" VerticalAlignment="Center" HorizontalAlignment="Left" Style="{StaticResource MaterialDesignBody2TextBlock}">March 19, 2016</TextBlock>
132+
<StackPanel Grid.Row="2" Orientation="Horizontal" Margin="16 0 16 8" HorizontalAlignment="Right">
133+
<Button HorizontalAlignment="Right" Style="{StaticResource MaterialDesignToolForegroundButton}" Width="30" Padding="2 0 2 0"
134+
materialDesign:RippleAssist.IsCentered="True">
135+
<materialDesign:PackIcon Kind="Phone" />
136+
</Button>
137+
<materialDesign:PopupBox HorizontalAlignment="Right" Style="{StaticResource MaterialDesignToolForegroundPopupBox}" Padding="2 0 2 0">
138+
<StackPanel>
139+
<Button Content="More"/>
140+
<Button Content="Options"/>
141+
</StackPanel>
142+
</materialDesign:PopupBox>
143+
</StackPanel>
144+
</Grid>
145+
</materialDesign:Card>
146+
<materialDesign:Card Margin="4 4 0 0" Background="{DynamicResource PrimaryHueLightBrush}"
147+
Foreground="{DynamicResource PrimaryHueLightForegroundBrush}"
148+
Width="200"
149+
Padding="8">
150+
<TextBlock FontSize="16">Boring Text</TextBlock>
151+
</materialDesign:Card>
152+
<materialDesign:Card Margin="4 4 0 0" Background="{DynamicResource PrimaryHueDarkBrush}"
118153
Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}"
119-
Padding="0"
120-
Width="200">
121-
<Grid>
122-
<Grid.RowDefinitions>
123-
<RowDefinition Height="Auto" />
124-
<RowDefinition Height="Auto" />
125-
<RowDefinition Height="Auto" />
126-
</Grid.RowDefinitions>
127-
<TextBlock Grid.Row="0" Margin="16 16 16 4" Style="{StaticResource MaterialDesignHeadlineTextBlock}">Call Jennifer</TextBlock>
128-
<Separator Grid.Row="1" Style="{StaticResource MaterialDesignLightSeparator}"/>
129-
<TextBlock Grid.Row="2" Margin="16 0 16 8" VerticalAlignment="Center" HorizontalAlignment="Left" Style="{StaticResource MaterialDesignBody2TextBlock}">March 19, 2016</TextBlock>
130-
<StackPanel Grid.Row="2" Orientation="Horizontal" Margin="16 0 16 8" HorizontalAlignment="Right">
131-
<Button HorizontalAlignment="Right" Style="{StaticResource MaterialDesignToolForegroundButton}" Width="30" Padding="2 0 2 0"
132-
materialDesign:RippleAssist.IsCentered="True">
133-
<materialDesign:PackIcon Kind="Phone" />
134-
</Button>
135-
<materialDesign:PopupBox HorizontalAlignment="Right" Style="{StaticResource MaterialDesignToolForegroundPopupBox}" Padding="2 0 2 0">
136-
<StackPanel>
137-
<Button Content="More"/>
138-
<Button Content="Options"/>
139-
</StackPanel>
140-
</materialDesign:PopupBox>
141-
</StackPanel>
142-
</Grid>
143-
</materialDesign:Card>
144-
<materialDesign:Card Margin="4 4 0 0" Background="{DynamicResource PrimaryHueLightBrush}"
145-
Foreground="{DynamicResource PrimaryHueLightForegroundBrush}"
146154
Width="200"
147-
Padding="8">
148-
<TextBlock FontSize="16">Boring Text</TextBlock>
149-
</materialDesign:Card>
155+
Padding="8" UniformCornerRadius="6">
156+
<TextBlock TextWrapping="Wrap">You can adjust the corner radius</TextBlock>
157+
</materialDesign:Card>
158+
</StackPanel>
150159
<materialDesign:Card Margin="4 4 0 0" Background="{DynamicResource PrimaryHueDarkBrush}"
151160
Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}"
152161
Width="200"
@@ -165,11 +174,88 @@
165174
</StackPanel>
166175
</StackPanel>
167176
</materialDesign:Card>
168-
<materialDesign:Card Margin="4 4 0 0" Background="{DynamicResource PrimaryHueDarkBrush}"
169-
Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}"
170-
Width="200"
171-
Padding="8" UniformCornerRadius="6">
172-
<TextBlock TextWrapping="Wrap">You can adjust the corner radius</TextBlock>
173-
</materialDesign:Card>
177+
178+
<!--
179+
For the Card styled <Flipper />, bring in this resource dictionary (see top of this file)
180+
pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Flipper.xaml
181+
-->
182+
<StackPanel>
183+
<materialDesign:Flipper Style="{StaticResource MaterialDesignCardFlipper}" Margin="4 4 0 0">
184+
<materialDesign:Flipper.FrontContent>
185+
<Button Style="{StaticResource MaterialDesignFlatButton}"
186+
Command="{x:Static materialDesign:Flipper.FlipCommand}"
187+
Margin="8"
188+
Width="184"
189+
>FLIPPABLZ!</Button>
190+
</materialDesign:Flipper.FrontContent>
191+
<materialDesign:Flipper.BackContent>
192+
<Button Style="{StaticResource MaterialDesignFlatButton}"
193+
Command="{x:Static materialDesign:Flipper.FlipCommand}"
194+
Margin="8"
195+
Width="184"
196+
>GO BACK</Button>
197+
</materialDesign:Flipper.BackContent>
198+
</materialDesign:Flipper>
199+
<materialDesign:Flipper Style="{StaticResource MaterialDesignCardFlipper}" Margin="4 4 0 0" >
200+
<materialDesign:Flipper.FrontContent>
201+
<Grid Height="256" Width="200">
202+
<Grid.RowDefinitions>
203+
<RowDefinition Height="160" />
204+
<RowDefinition Height="*" />
205+
</Grid.RowDefinitions>
206+
<materialDesign:ColorZone Mode="PrimaryLight" VerticalAlignment="Stretch">
207+
<materialDesign:PackIcon Kind="AccountCircle" Height="128" Width="128"
208+
VerticalAlignment="Center" HorizontalAlignment="Center" />
209+
</materialDesign:ColorZone>
210+
<StackPanel Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">
211+
<TextBlock>James Willock</TextBlock>
212+
<Button Style="{StaticResource MaterialDesignFlatButton}"
213+
Command="{x:Static materialDesign:Flipper.FlipCommand}"
214+
Margin="0 4 0 0"
215+
>EDIT</Button>
216+
</StackPanel>
217+
</Grid>
218+
</materialDesign:Flipper.FrontContent>
219+
<materialDesign:Flipper.BackContent>
220+
<Grid Height="256" Width="200">
221+
<Grid.RowDefinitions>
222+
<RowDefinition Height="Auto" />
223+
<RowDefinition Height="*" />
224+
</Grid.RowDefinitions>
225+
<materialDesign:ColorZone Mode="Accent" Padding="6">
226+
<StackPanel Orientation="Horizontal">
227+
<Button Style="{StaticResource MaterialDesignToolForegroundButton}"
228+
Command="{x:Static materialDesign:Flipper.FlipCommand}"
229+
HorizontalAlignment="Left">
230+
<materialDesign:PackIcon Kind="ArrowLeft" HorizontalAlignment="Right" />
231+
</Button>
232+
<TextBlock Margin="8 0 0 0" VerticalAlignment="Center">EDIT USER</TextBlock>
233+
</StackPanel>
234+
</materialDesign:ColorZone>
235+
<Grid Grid.Row="1" Margin="0 6 0 0" HorizontalAlignment="Center" VerticalAlignment="Top"
236+
Width="172">
237+
<Grid.RowDefinitions>
238+
<RowDefinition />
239+
<RowDefinition />
240+
<RowDefinition />
241+
<RowDefinition />
242+
</Grid.RowDefinitions>
243+
<TextBox materialDesign:HintAssist.Hint="First name" materialDesign:HintAssist.IsFloating="True"
244+
Margin="0 12 0 0">James</TextBox>
245+
<TextBox Grid.Row="1" materialDesign:HintAssist.Hint="Last name" materialDesign:HintAssist.IsFloating="True"
246+
Margin="0 12 0 0">Willock</TextBox>
247+
<StackPanel Grid.Row="2" Orientation="Horizontal" Margin="0 12 0 0" HorizontalAlignment="Right">
248+
<TextBlock VerticalAlignment="Center">Email Contact</TextBlock>
249+
<ToggleButton Margin="8 0 0 0"></ToggleButton>
250+
</StackPanel>
251+
<StackPanel Grid.Row="3" Orientation="Horizontal" Margin="0 12 0 0" HorizontalAlignment="Right">
252+
<TextBlock VerticalAlignment="Center">Telephone Contact</TextBlock>
253+
<ToggleButton Margin="8 0 0 0"></ToggleButton>
254+
</StackPanel>
255+
</Grid>
256+
</Grid>
257+
</materialDesign:Flipper.BackContent>
258+
</materialDesign:Flipper>
259+
</StackPanel>
174260
</WrapPanel>
175261
</UserControl>

‎MainDemo.Wpf/MaterialDesignDemo.csproj

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,6 @@
157157
<DependentUpon>ProvingGround.xaml</DependentUpon>
158158
</Compile>
159159
<Compile Include="ProvingGroundStuff\MeasuringTextBox.cs" />
160-
<Compile Include="ProvingGroundStuff\Planez.cs" />
161160
<Compile Include="Shadows.xaml.cs">
162161
<DependentUpon>Shadows.xaml</DependentUpon>
163162
</Compile>

‎MainDemo.Wpf/ProvingGround.xaml

Lines changed: 74 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@
44
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
55
x:Class="MaterialDesignColors.WpfExample.ProvingGround"
66
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
7-
xmlns:converters="clr-namespace:MaterialDesignThemes.Wpf.Converters;assembly=MaterialDesignThemes.Wpf"
87
xmlns:wpfExample="clr-namespace:MaterialDesignColors.WpfExample"
9-
xmlns:provingGroundStuff="clr-namespace:MaterialDesignDemo.ProvingGroundStuff"
108
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
119
TextElement.FontWeight="Regular"
1210
TextElement.FontSize="13"
@@ -46,26 +44,79 @@
4644
</UserControl.Resources>
4745

4846
<Grid>
49-
<ContentControl RenderTransformOrigin=".5,.5">
50-
<materialDesign:Card Margin="4 4 0 0" Width="220">
51-
<Grid>
52-
<Grid.RowDefinitions>
53-
<RowDefinition Height="140" />
54-
<RowDefinition Height="140" />
55-
</Grid.RowDefinitions>
56-
<Image Source="Resources/Contact.png" Height="140" Stretch="UniformToFill"/>
57-
<Button Grid.Row="1" Style="{StaticResource MaterialDesignFlatButton}"
58-
HorizontalAlignment="Center" VerticalAlignment="Center">
59-
<StackPanel Orientation="Horizontal">
60-
<materialDesign:PackIcon Kind="Rotate3d" />
61-
<TextBlock Margin="8 0 0 0">FLIP ME!</TextBlock>
62-
</StackPanel>
63-
</Button>
64-
</Grid>
65-
</materialDesign:Card>
66-
<ContentControl.RenderTransform>
67-
<SkewTransform AngleX="0" AngleY="45" CenterX=".5" CenterY=".5" ></SkewTransform>
68-
</ContentControl.RenderTransform>
69-
</ContentControl>
47+
<Grid.ColumnDefinitions>
48+
<ColumnDefinition />
49+
<ColumnDefinition />
50+
<ColumnDefinition />
51+
</Grid.ColumnDefinitions>
52+
<Border BorderThickness="2" BorderBrush="Black">
53+
<materialDesign:Plane3D HorizontalAlignment="Left" VerticalAlignment="Top">
54+
<materialDesign:Card>
55+
<Border Width="{Binding ElementName=MyCardContent, Path=ActualWidth}" Height="{Binding ElementName=MyCardContent, Path=ActualHeight}">
56+
<Border.Background>
57+
<VisualBrush Visual="{Binding ElementName=MyCardContent}" Stretch="None"/>
58+
</Border.Background>
59+
</Border>
60+
</materialDesign:Card>
61+
</materialDesign:Plane3D>
62+
</Border>
63+
64+
65+
<Border BorderThickness="2" BorderBrush="Green" Grid.Column="1">
66+
<materialDesign:Flipper>
67+
<materialDesign:Flipper.FrontContent>
68+
<materialDesign:Card Width="220">
69+
<Grid>
70+
<Grid.RowDefinitions>
71+
<RowDefinition Height="Auto" />
72+
<RowDefinition Height="100" />
73+
</Grid.RowDefinitions>
74+
<Image Source="Resources/Contact.png" Height="180" Stretch="UniformToFill"/>
75+
<Button Grid.Row="1" Style="{StaticResource MaterialDesignFlatButton}"
76+
Command="{x:Static materialDesign:Flipper.FlipCommand}"
77+
HorizontalAlignment="Center" VerticalAlignment="Center">
78+
<StackPanel Orientation="Horizontal">
79+
<materialDesign:PackIcon Kind="Rotate3d" />
80+
<TextBlock Margin="8 0 0 0">FLIPPABLZ!</TextBlock>
81+
</StackPanel>
82+
</Button>
83+
</Grid>
84+
</materialDesign:Card>
85+
</materialDesign:Flipper.FrontContent>
86+
<materialDesign:Flipper.BackContent>
87+
<materialDesign:Card Width="220" Height="280">
88+
<Button Style="{StaticResource MaterialDesignFlatButton}"
89+
Command="{x:Static materialDesign:Flipper.FlipCommand}"
90+
Margin="8">
91+
<StackPanel Orientation="Horizontal">
92+
<materialDesign:PackIcon Kind="ArrowLeft" />
93+
<TextBlock Margin="8 0 0 0">FLIP BACK</TextBlock>
94+
</StackPanel>
95+
</Button>
96+
</materialDesign:Card>
97+
</materialDesign:Flipper.BackContent>
98+
</materialDesign:Flipper>
99+
</Border>
100+
101+
<materialDesign:Card Width="220" Grid.Column="2">
102+
<Grid>
103+
<Grid.RowDefinitions>
104+
<RowDefinition Height="Auto" />
105+
<RowDefinition Height="100" />
106+
</Grid.RowDefinitions>
107+
<Image Source="Resources/Contact.png" Height="180" Stretch="UniformToFill"/>
108+
<Button Grid.Row="1" Style="{StaticResource MaterialDesignFlatButton}"
109+
HorizontalAlignment="Center" VerticalAlignment="Center">
110+
<StackPanel Orientation="Horizontal">
111+
<materialDesign:PackIcon Kind="Rotate3d" />
112+
<TextBlock Margin="8 0 0 0">FLIP ME!</TextBlock>
113+
</StackPanel>
114+
</Button>
115+
</Grid>
116+
</materialDesign:Card>
117+
70118
</Grid>
71119
</UserControl>
120+
121+
122+

0 commit comments

Comments
 (0)