Skip to content

Commit efbc5c9

Browse files
ButchersBoyButchersBoy
committed
auto generate icon data from source, add PackIcon control, setup style, drop a few icons into the demo. #171 
1 parent c8b80e6 commit efbc5c9

File tree

11 files changed

+1711
-87
lines changed

11 files changed

+1711
-87
lines changed

‎MainDemo.Wpf/Home.xaml

Lines changed: 13 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -59,24 +59,14 @@
5959
<Button Style="{DynamicResource MaterialDesignFlatButton}" HorizontalAlignment="Left"
6060
x:Name="GitHubButton" Click="GitHubButton_OnClick">
6161
<StackPanel Orientation="Horizontal">
62-
<Viewbox Width="16" Height="16">
63-
<Canvas Width="24" Height="24">
64-
<Path Data="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
65-
Fill="{DynamicResource MaterialDesignBody}" />
66-
</Canvas>
67-
</Viewbox>
62+
<materialDesign:PackIcon Kind="GithubCircle" />
6863
<TextBlock Margin="8 0 0 0" VerticalAlignment="Center">GitHub</TextBlock>
6964
</StackPanel>
7065
</Button>
7166
<Button Style="{DynamicResource MaterialDesignFlatButton}" HorizontalAlignment="Right"
7267
x:Name="TwitterButton" Click="TwitterButton_OnClick">
7368
<StackPanel Orientation="Horizontal">
74-
<Viewbox Width="16" Height="16">
75-
<Canvas Width="24" Height="24">
76-
<Path Data="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"
77-
Fill="{DynamicResource MaterialDesignBody}" />
78-
</Canvas>
79-
</Viewbox>
69+
<materialDesign:PackIcon Kind="Twitter" />
8070
<TextBlock Margin="8 0 0 0" VerticalAlignment="Center">Twitter</TextBlock>
8171
</StackPanel>
8272
</Button>
@@ -87,24 +77,14 @@
8777
<Button Style="{DynamicResource MaterialDesignFlatButton}" HorizontalAlignment="Left"
8878
x:Name="ChatButton" Click="ChatButton_OnClick">
8979
<StackPanel Orientation="Horizontal">
90-
<Viewbox Width="16" Height="16">
91-
<Canvas Width="24" Height="24">
92-
<Path Data="M7.5,2A2,2 0 0,1 9.5,4A2,2 0 0,1 7.5,6A2,2 0 0,1 5.5,4A2,2 0 0,1 7.5,2M6,7H9A2,2 0 0,1 11,9V14.5H9.5V22H5.5V14.5H4V9A2,2 0 0,1 6,7M16.5,2A2,2 0 0,1 18.5,4A2,2 0 0,1 16.5,6A2,2 0 0,1 14.5,4A2,2 0 0,1 16.5,2M15,22V16H12L14.59,8.41C14.84,7.59 15.6,7 16.5,7C17.4,7 18.16,7.59 18.41,8.41L21,16H18V22H15Z"
93-
Fill="{DynamicResource MaterialDesignBody}" />
94-
</Canvas>
95-
</Viewbox>
80+
<materialDesign:PackIcon Kind="Message" />
9681
<TextBlock Margin="8 0 0 0" VerticalAlignment="Center">Chat</TextBlock>
9782
</StackPanel>
9883
</Button>
9984
<Button Style="{DynamicResource MaterialDesignFlatButton}" HorizontalAlignment="Right"
10085
x:Name="EmailButton" Click="EmailButton_OnClick">
10186
<StackPanel Orientation="Horizontal">
102-
<Viewbox Width="16" Height="16">
103-
<Canvas Width="24" Height="24">
104-
<Path Data="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"
105-
Fill="{DynamicResource MaterialDesignBody}" />
106-
</Canvas>
107-
</Viewbox>
87+
<materialDesign:PackIcon Kind="Email" />
10888
<TextBlock Margin="8 0 0 0" VerticalAlignment="Center">Email</TextBlock>
10989
</StackPanel>
11090
</Button>
@@ -121,11 +101,7 @@
121101
<ColumnDefinition Width="200" />
122102
<ColumnDefinition Width="*" />
123103
</Grid.ColumnDefinitions>
124-
<Viewbox Width="160" Height="160" HorizontalAlignment="Center" VerticalAlignment="Center">
125-
<Canvas Width="24" Height="24">
126-
<Path Data="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" Fill="Black" />
127-
</Canvas>
128-
</Viewbox>
104+
<materialDesign:PackIcon Kind="GithubCircle" Width="160" Height="160" HorizontalAlignment="Center" VerticalAlignment="Center" />
129105
<StackPanel Grid.Column="1">
130106
<TextBlock FontSize="28" Margin="16 16 16 8" FontWeight="Light">Open Source</TextBlock>
131107
<TextBlock TextWrapping="Wrap" Margin="16 0 16 8" Foreground="{DynamicResource MaterialDesignBodyLight}"
@@ -141,17 +117,13 @@
141117
Margin="32" Grid.Row="1">
142118
<StackPanel>
143119
<Button ToolTip="GitHub" Click="GitHubButton_OnClick">
144-
<Viewbox Width="24" Height="24">
145-
<Canvas Width="24" Height="24">
146-
<Path Data="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
147-
Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Button}, Path=Foreground}" />
148-
</Canvas>
149-
</Viewbox>
120+
<materialDesign:PackIcon Kind="GithubCircle" Height="20" Width="20" />
150121
</Button>
151122
<Button ToolTip="Twitter" Click="TwitterButton_OnClick"
152123
Background="{DynamicResource PrimaryHueMidBrush}"
153-
Foreground="{DynamicResource PrimaryHueMidForegroundBrush}"
154-
>#</Button>
124+
Foreground="{DynamicResource PrimaryHueMidForegroundBrush}">
125+
<materialDesign:PackIcon Kind="Twitter" Height="20" Width="20" />
126+
</Button>
155127
<Button ToolTip="Chat" Click="ChatButton_OnClick">
156128
<!-- mix up the colours by brinking in a named palette (see merged dictionaries at top) -->
157129
<Button.Background>
@@ -160,17 +132,14 @@
160132
<Button.Foreground>
161133
<SolidColorBrush Color="{StaticResource GreenPrimary500Foreground}"></SolidColorBrush>
162134
</Button.Foreground>
163-
<Viewbox Width="16" Height="16">
164-
<Canvas Width="24" Height="24">
165-
<Path Data="M7.5,2A2,2 0 0,1 9.5,4A2,2 0 0,1 7.5,6A2,2 0 0,1 5.5,4A2,2 0 0,1 7.5,2M6,7H9A2,2 0 0,1 11,9V14.5H9.5V22H5.5V14.5H4V9A2,2 0 0,1 6,7M16.5,2A2,2 0 0,1 18.5,4A2,2 0 0,1 16.5,6A2,2 0 0,1 14.5,4A2,2 0 0,1 16.5,2M15,22V16H12L14.59,8.41C14.84,7.59 15.6,7 16.5,7C17.4,7 18.16,7.59 18.41,8.41L21,16H18V22H15Z"
166-
Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Button}, Path=Foreground}" />
167-
</Canvas>
168-
</Viewbox>
135+
<materialDesign:PackIcon Kind="Message" Height="20" Width="20" />
169136
</Button>
170137
<Button ToolTip="Email" Click="EmailButton_OnClick"
171138
Background="{DynamicResource SecondaryAccentBrush}"
172139
Foreground="{DynamicResource SecondaryAccentForegroundBrush}"
173-
>@</Button>
140+
>
141+
<materialDesign:PackIcon Kind="Email" Height="20" Width="20" />
142+
</Button>
174143
</StackPanel>
175144
</materialDesign:PopupBox>
176145
</Grid>

‎MaterialDesignThemes.Wpf/MaterialDesignThemes.Wpf.csproj

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -256,6 +256,9 @@
256256
<Compile Include="MaterialDataGridComboBoxColumn.cs" />
257257
<Compile Include="MaterialDataGridTextColumn.cs" />
258258
<Compile Include="MaterialDateDisplay.cs" />
259+
<Compile Include="PackIcon.cs" />
260+
<Compile Include="PackIconDataFactory.cs" />
261+
<Compile Include="PackIconKind.cs" />
259262
<Compile Include="PopupBox.cs" />
260263
<Compile Include="PaletteHelper.cs" />
261264
<Compile Include="PasswordFieldAssist.cs" />

‎MaterialDesignThemes.Wpf/PackIcon.cs

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
using System.Windows;
7+
using System.Windows.Controls;
8+
9+
namespace MaterialDesignThemes.Wpf
10+
{
11+
/// <summary>
12+
/// Icon from the Material Design Icons project, <see cref="https://materialdesignicons.com/"/>.
13+
/// </summary>
14+
public class PackIcon : Control
15+
{
16+
private static readonly Lazy<IReadOnlyDictionary<PackIconKind, string>> DataIndex =
17+
new Lazy<IReadOnlyDictionary<PackIconKind, string>>(PackIconDataFactory.Create);
18+
19+
static PackIcon()
20+
{
21+
DefaultStyleKeyProperty.OverrideMetadata(typeof(PackIcon), new FrameworkPropertyMetadata(typeof(PackIcon)));
22+
}
23+
24+
public static readonly DependencyProperty KindProperty = DependencyProperty.Register(
25+
"Kind", typeof (PackIconKind), typeof (PackIcon), new PropertyMetadata(default(PackIconKind)));
26+
27+
/// <summary>
28+
/// Gets or sets the icon to display.
29+
/// </summary>
30+
public PackIconKind Kind
31+
{
32+
get { return (PackIconKind) GetValue(KindProperty); }
33+
set { SetValue(KindProperty, value); }
34+
}
35+
36+
private static readonly DependencyPropertyKey DataPropertyKey =
37+
DependencyProperty.RegisterReadOnly(
38+
"Data", typeof (string), typeof (PackIcon),
39+
new PropertyMetadata(default(string), PropertyChangedCallback));
40+
41+
private static void PropertyChangedCallback(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
42+
{
43+
((PackIcon)dependencyObject).UpdateData();
44+
}
45+
46+
public static readonly DependencyProperty DataProperty =
47+
DataPropertyKey.DependencyProperty;
48+
49+
/// <summary>
50+
/// Gets the path data for the icon.
51+
/// </summary>
52+
public string Data
53+
{
54+
get { return (string) GetValue(DataProperty); }
55+
private set { SetValue(DataPropertyKey, value); }
56+
}
57+
58+
public override void OnApplyTemplate()
59+
{
60+
UpdateData();
61+
62+
base.OnApplyTemplate();
63+
}
64+
65+
private void UpdateData()
66+
{
67+
Data = DataIndex.Value[Kind];
68+
}
69+
}
70+
}

‎MaterialDesignThemes.Wpf/PackIconDataFactory.cs

Lines changed: 14 additions & 0 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)