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
176
177
178
179
180
|
<UserControl x:Class="MaterialDesignColors.WpfExample.Home"
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"
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 Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.PopupBox.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TextBlock.xaml" />
<!-- throw in some extra colour for our floating action button -->
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/MaterialDesignColor.Green.Named.Primary.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid HorizontalAlignment="Center" VerticalAlignment="Top" Margin="16">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="Resources/ms-icon-310x310.png" Stretch="Uniform" Width="100" Height="100" />
<StackPanel Grid.Column="1" Margin="24 0 0 0" VerticalAlignment="Center">
<TextBlock Style="{StaticResource MaterialDesignDisplay1TextBlock}" TextWrapping="Wrap">Welcome to Material Design In XAML Toolkit</TextBlock>
<Button Style="{StaticResource MaterialDesignFlatButton}"
Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
CommandParameter="{x:Static Dock.Left}">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Binoculars" />
<TextBlock Margin="8 0 0 0">EXPLORE</TextBlock>
</StackPanel>
</Button>
</StackPanel>
</Grid>
<ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Margin="0 0 0 32">
<Grid>
<StackPanel Orientation="Horizontal">
<materialDesign:Card Width="420" Margin="4 2 8 16" Height="270">
<Grid VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="Resources/Contact.png" Grid.RowSpan="5" StretchDirection="Both" VerticalAlignment="Stretch" Stretch="UniformToFill" />
<TextBlock Grid.Column="1" Style="{StaticResource MaterialDesignHeadlineTextBlock}" Margin="16 16 16 2">Get In Touch</TextBlock>
<TextBlock Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" Margin="16 0 16 8" Foreground="{DynamicResource MaterialDesignBodyLight}"
VerticalAlignment="Center">Say hello, make a feature request, or raise a bug through one of these channels:</TextBlock>
<Border Grid.Column="1" Grid.Row="2" BorderThickness="0 1 0 0" BorderBrush="{DynamicResource MaterialDesignDivider}" Margin="0 8 0 0">
<Grid Margin="8">
<Button Style="{DynamicResource MaterialDesignFlatButton}" HorizontalAlignment="Left"
x:Name="GitHubButton" Click="GitHubButton_OnClick">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="GithubCircle" />
<TextBlock Margin="8 0 0 0" VerticalAlignment="Center">GitHub</TextBlock>
</StackPanel>
</Button>
<Button Style="{DynamicResource MaterialDesignFlatButton}" HorizontalAlignment="Right"
x:Name="TwitterButton" Click="TwitterButton_OnClick">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Twitter" />
<TextBlock Margin="8 0 0 0" VerticalAlignment="Center">Twitter</TextBlock>
</StackPanel>
</Button>
</Grid>
</Border>
<Border Grid.Column="1" Grid.Row="3" BorderThickness="0 1 0 0" BorderBrush="{DynamicResource MaterialDesignDivider}">
<Grid Margin="8">
<Button Style="{DynamicResource MaterialDesignFlatButton}" HorizontalAlignment="Left"
x:Name="ChatButton" Click="ChatButton_OnClick">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Message" />
<TextBlock Margin="8 0 0 0" VerticalAlignment="Center">Chat</TextBlock>
</StackPanel>
</Button>
<Button Style="{DynamicResource MaterialDesignFlatButton}" HorizontalAlignment="Right"
x:Name="EmailButton" Click="EmailButton_OnClick">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Email" />
<TextBlock Margin="8 0 0 0" VerticalAlignment="Center">Email</TextBlock>
</StackPanel>
</Button>
</Grid>
</Border>
</Grid>
</materialDesign:Card>
<materialDesign:Card Width="420" Margin="8 2 4 16" Height="270">
<Grid VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<materialDesign:PackIcon Kind="GithubCircle" Width="160" Height="160" HorizontalAlignment="Center" VerticalAlignment="Center" />
<StackPanel Grid.Column="1">
<TextBlock Style="{StaticResource MaterialDesignHeadlineTextBlock}" Margin="16 16 16 8">Open Source</TextBlock>
<TextBlock TextWrapping="Wrap" Margin="16 0 16 8" Foreground="{DynamicResource MaterialDesignBodyLight}"
VerticalAlignment="Top">This project is completely open source. If you like it and want to say thanks you could hit the GitHub Star button, tweet or post about it, or tell your mum about it!</TextBlock>
</StackPanel>
<Border Grid.Row="1" Grid.ColumnSpan="2" BorderThickness="0 1 0 0" BorderBrush="{DynamicResource MaterialDesignDivider}" Padding="8">
<DockPanel>
<Button Style="{DynamicResource MaterialDesignFlatButton}"
DockPanel.Dock="Right"
x:Name="DonateButton" Click="DonateButton_OnClick">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Gift" />
<TextBlock Margin="8 0 0 0" VerticalAlignment="Center">Donate</TextBlock>
</StackPanel>
</Button>
<TextBlock Foreground="{DynamicResource MaterialDesignBodyLight}" TextWrapping="Wrap" Margin="16" VerticalAlignment="Center">
Feel like you want to make a donation? It would be gratefully received. Click the button to donate via Pledgie.
</TextBlock>
</DockPanel>
</Border>
</Grid>
</materialDesign:Card>
</StackPanel>
</Grid>
</ScrollViewer>
<materialDesign:PopupBox Style="{StaticResource MaterialDesignMultiFloatingActionPopupBox}"
HorizontalAlignment="Right" VerticalAlignment="Bottom"
Margin="32" Grid.Row="1">
<StackPanel>
<Button ToolTip="GitHub" Click="GitHubButton_OnClick">
<materialDesign:PackIcon Kind="GithubCircle" Height="20" Width="20" />
</Button>
<Button ToolTip="Twitter" Click="TwitterButton_OnClick"
Background="{DynamicResource PrimaryHueMidBrush}"
Foreground="{DynamicResource PrimaryHueMidForegroundBrush}">
<materialDesign:PackIcon Kind="Twitter" />
</Button>
<Button ToolTip="Chat" Click="ChatButton_OnClick">
<!-- mix up the colours by brinking in a named palette (see merged dictionaries at top) -->
<Button.Background>
<SolidColorBrush Color="{StaticResource GreenPrimary500}" />
</Button.Background>
<Button.Foreground>
<SolidColorBrush Color="{StaticResource GreenPrimary500Foreground}" />
</Button.Foreground>
<materialDesign:PackIcon Kind="Message" />
</Button>
<Button ToolTip="Email" Click="EmailButton_OnClick"
Background="{DynamicResource SecondaryAccentBrush}"
Foreground="{DynamicResource SecondaryAccentForegroundBrush}"
>
<materialDesign:PackIcon Kind="Email" />
</Button>
<Button ToolTip="Feel like you want to make a donation? It would be gratefully received. Click the button to donate via Pledgie."
Click="DonateButton_OnClick">
<Button.Background>
<SolidColorBrush Color="{StaticResource GreenPrimary200}" />
</Button.Background>
<Button.Foreground>
<SolidColorBrush Color="{StaticResource GreenPrimary200Foreground}" />
</Button.Foreground>
<materialDesign:PackIcon Kind="Gift" />
</Button>
</StackPanel>
</materialDesign:PopupBox>
</Grid>
</UserControl>
|
