Skip to content

Commit c41338e

Browse files
NotYoojunNotYoojun
authored
Merge pull request #221 from GID0317/#220
Gallery Revamp: IconElement Page
2 parents 3cbc35a + f9abca0 commit c41338e

File tree

2 files changed

+186
-37
lines changed

2 files changed

+186
-37
lines changed

‎source/iNKORE.UI.WPF.Modern.Gallery/Pages/Controls/Windows/IconElementPage.xaml‎

Lines changed: 102 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
xmlns:local="clr-namespace:iNKORE.UI.WPF.Modern.Gallery"
77
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
88
xmlns:sys="clr-namespace:System;assembly=mscorlib"
9-
xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
9+
xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern" xmlns:ikw="http://schemas.inkore.net/lib/ui/wpf"
1010
Title="Icon Element"
1111
d:DesignWidth="800"
1212
Loaded="Page_Loaded"
@@ -34,23 +34,117 @@
3434
Click="MonochromeButton_Click"/>
3535
</local:ControlExample.Options>
3636
</local:ControlExample>
37-
<local:ControlExample
38-
x:Name="Example2"
37+
<local:ControlExample x:Name="Example2"
38+
HeaderText="A FontIcon using pre-defined icon sets">
39+
<local:ControlExample.Example>
40+
<StackPanel>
41+
<TextBlock Margin="0,0,0,12" Style="{DynamicResource BodyTextBlockStyle}"
42+
Text="There are a bunch of pre-defined icon sets that you can use in your application. The Segoe Fluent Icons is one of them and it is used in this example. You can use the Icon property to set the icon for a control, which is the most recommended and preferred way to use icons in your application. This saves you from having to look up the glyph value and font family to use." />
43+
44+
<ikw:SimpleStackPanel Spacing="4" Orientation="Vertical" HorizontalAlignment="Left">
45+
<FrameworkElement.Resources>
46+
<Style TargetType="ikw:SimpleStackPanel">
47+
<Setter Property="Spacing" Value="8"/>
48+
<Setter Property="Orientation" Value="Horizontal"/>
49+
</Style>
50+
<Style TargetType="Button" BasedOn="{StaticResource {x:Static ui:ThemeKeys.DefaultButtonStyleKey}}">
51+
<Setter Property="HorizontalAlignment" Value="Stretch"/>
52+
<Setter Property="HorizontalContentAlignment" Value="Left"/>
53+
</Style>
54+
</FrameworkElement.Resources>
55+
56+
<!--Segoe Fluent Icons-->
57+
<TextBlock Margin="0,0,0,10" FontSize="16" FontWeight="SemiBold">
58+
Segoe Fluent Icons
59+
</TextBlock>
60+
61+
<Button>
62+
<ikw:SimpleStackPanel>
63+
<ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Settings}" />
64+
<TextBlock>
65+
SegoeFluentIcons | Settings
66+
</TextBlock>
67+
</ikw:SimpleStackPanel>
68+
</Button>
69+
<Button>
70+
<ikw:SimpleStackPanel>
71+
<ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Document}" />
72+
<TextBlock>
73+
SegoeFluentIcons | Document
74+
</TextBlock>
75+
</ikw:SimpleStackPanel>
76+
</Button>
77+
<Button>
78+
<ikw:SimpleStackPanel>
79+
<ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.SendFill}" />
80+
<TextBlock>
81+
SegoeFluentIcons | SendFill
82+
</TextBlock>
83+
</ikw:SimpleStackPanel>
84+
</Button>
85+
86+
<!--Fluent System Icons-->
87+
<TextBlock Margin="0,10" FontSize="16" FontWeight="SemiBold">
88+
Fluent System Icons
89+
</TextBlock>
90+
91+
<Button>
92+
<ikw:SimpleStackPanel>
93+
<ui:FontIcon Icon="{x:Static ui:FluentSystemIcons.Home_16_Regular}" />
94+
<TextBlock>
95+
FluentSystemIcons | Home_16_Regular
96+
</TextBlock>
97+
</ikw:SimpleStackPanel>
98+
</Button>
99+
<Button>
100+
<ikw:SimpleStackPanel>
101+
<ui:FontIcon Icon="{x:Static ui:FluentSystemIcons.Accessibility_16_Regular}" />
102+
<TextBlock>
103+
FluentSystemIcons | Accessibility_16_Regular
104+
</TextBlock>
105+
</ikw:SimpleStackPanel>
106+
</Button>
107+
</ikw:SimpleStackPanel>
108+
109+
<TextBlock Margin="0,16,0,0" Style="{DynamicResource BodyTextBlockStyle}"
110+
Text="You can also define your own icon sets by creating a static class with static properties that return the icon you want to use. This is what the SegoeFluentIcons and FluentSystemIcons classes are doing." />
111+
112+
</StackPanel>
113+
</local:ControlExample.Example>
114+
</local:ControlExample>
115+
<local:ControlExample x:Name="Example3"
116+
HeaderText="Group icon and text even faster">
117+
<local:ControlExample.Example>
118+
<StackPanel>
119+
<TextBlock Margin="0,0,0,12" Style="{DynamicResource BodyTextBlockStyle}"
120+
Text="When using icon and text together, you can use the IconAndText control to write your XAML much more concisely. The IconAndText control is a simple control that combines an icon and text together in a single control. It is used in the examples below to show how you can use it to create buttons with icons and text." />
121+
<Button Margin="0,0,0,8">
122+
<ui:IconAndText Icon="{x:Static ui:SegoeFluentIcons.Audio}" Content="Pick a music"/>
123+
</Button>
124+
<Button Padding="12,12,12,8">
125+
<ui:IconAndText Icon="{x:Static ui:SegoeFluentIcons.Send}"
126+
Content="Send" IconSize="24" Orientation="Vertical" Spacing="8"/>
127+
</Button>
128+
129+
</StackPanel>
130+
</local:ControlExample.Example>
131+
</local:ControlExample>
132+
133+
<local:ControlExample x:Name="Example4"
39134
HeaderText="A FontIcon using a glyph from a specific font family in a button">
40135
<local:ControlExample.Example>
41136
<StackPanel>
42137
<TextBlock
43138
Margin="0,0,0,12"
44139
Style="{DynamicResource BodyTextBlockStyle}"
45140
Text="Use FontIcon as the icon for a control if you want to specify a Glyph value from a FontFamily. Windows 10 uses the Segoe MDL2 Assets FontFamily and that is what this example is showing." />
46-
<Button Name="ExampleButton1">
141+
<Button>
47142
<ui:FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE790;" />
48143
</Button>
49144
</StackPanel>
50145
</local:ControlExample.Example>
51146
</local:ControlExample>
52-
<local:ControlExample
53-
x:Name="Example3"
147+
<local:ControlExample x:Name="Example5"
54148
HeaderText="A ImageIcon using a bitmap image in a button">
55149
<local:ControlExample.Example>
56150
<StackPanel>
@@ -65,16 +159,15 @@
65159
</local:ControlExample.Example>
66160
</local:ControlExample>
67161
<!--<local:ControlExample
68-
x:Name="Example4"
162+
x:Name="Example6"
69163
HeaderText="A ImageIcon using a SVG image in a button">
70164
<local:ControlExample.Example>
71165
<Button Name="ImageExample2">
72166
<ui:ImageIcon Width="50" Source="https://raw.githubusercontent.com/DiemenDesign/LibreICONS/master/svg-color/libre-camera-panorama.svg" />
73167
</Button>
74168
</local:ControlExample.Example>
75169
</local:ControlExample>-->
76-
<local:ControlExample
77-
x:Name="Example5"
170+
<local:ControlExample x:Name="Example7"
78171
HeaderText="A PathIcon in a button">
79172
<local:ControlExample.Example>
80173
<StackPanel>
@@ -88,21 +181,5 @@
88181
</StackPanel>
89182
</local:ControlExample.Example>
90183
</local:ControlExample>
91-
<local:ControlExample
92-
x:Name="Example6"
93-
HeaderText="A SymbolIcon in a button">
94-
<local:ControlExample.Example>
95-
<StackPanel>
96-
<TextBlock
97-
Margin="0,0,0,12"
98-
Style="{DynamicResource BodyTextBlockStyle}"
99-
Text="To use a SymbolIcon as the icon for a control, you specify the enum value for the glyph you would like to display. SymbolIcon's enum is based off of icons from the Segoe MDL2 font used by Windows 10." />
100-
<Button Name="AcceptButton">
101-
<ui:IconAndText Content="Confirm"
102-
Icon="{x:Static ui:SegoeFluentIcons.Accept}"/>
103-
</Button>
104-
</StackPanel>
105-
</local:ControlExample.Example>
106-
</local:ControlExample>
107184
</StackPanel>
108185
</ui:Page>

‎source/iNKORE.UI.WPF.Modern.Gallery/Pages/Controls/Windows/IconElementPage.xaml.cs‎

Lines changed: 84 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
using iNKORE.UI.WPF.Modern.Controls;
1+
using iNKORE.UI.WPF.Modern.Controls;
22
using System;
33
using System.Collections.Generic;
44
using System.Collections.ObjectModel;
@@ -55,8 +55,9 @@ public void UpdateExampleCode()
5555
Example1.Xaml = Example1Xaml;
5656
Example2.Xaml = Example2Xaml;
5757
Example3.Xaml = Example3Xaml;
58+
Example4.Xaml = Example4Xaml;
5859
Example5.Xaml = Example5Xaml;
59-
Example6.Xaml = Example6Xaml;
60+
Example7.Xaml = Example7Xaml;
6061
}
6162

6263
public string Example1Xaml => $@"
@@ -68,34 +69,105 @@ public void UpdateExampleCode()
6869
";
6970

7071
public string Example2Xaml => $@"
72+
<ikw:SimpleStackPanel Spacing=""4"" Orientation=""Vertical"" HorizontalAlignment=""Left"">
73+
<FrameworkElement.Resources>
74+
<Style TargetType=""ikw:SimpleStackPanel"">
75+
<Setter Property=""Spacing"" Value=""8""/>
76+
<Setter Property=""Orientation"" Value=""Horizontal""/>
77+
</Style>
78+
<Style TargetType=""Button"" BasedOn=""{{StaticResource {{x:Static ui:ThemeKeys.DefaultButtonStyleKey}}}}"">
79+
<Setter Property=""HorizontalAlignment"" Value=""Stretch""/>
80+
<Setter Property=""HorizontalContentAlignment"" Value=""Left""/>
81+
</Style>
82+
</FrameworkElement.Resources>
83+
84+
<!--Segoe Fluent Icons-->
85+
<TextBlock Margin=""0,0,0,10"" FontSize=""16"" FontWeight=""SemiBold"">
86+
Segoe Fluent Icons
87+
</TextBlock>
88+
89+
<Button>
90+
<ikw:SimpleStackPanel>
91+
<ui:FontIcon Icon=""{{x:Static ui:SegoeFluentIcons.Settings}}"" />
92+
<TextBlock>
93+
SegoeFluentIcons | Settings
94+
</TextBlock>
95+
</ikw:SimpleStackPanel>
96+
</Button>
97+
<Button>
98+
<ikw:SimpleStackPanel>
99+
<ui:FontIcon Icon=""{{x:Static ui:SegoeFluentIcons.Document}}"" />
100+
<TextBlock>
101+
SegoeFluentIcons | Document
102+
</TextBlock>
103+
</ikw:SimpleStackPanel>
104+
</Button>
105+
<Button>
106+
<ikw:SimpleStackPanel>
107+
<ui:FontIcon Icon=""{{x:Static ui:SegoeFluentIcons.SendFill}}"" />
108+
<TextBlock>
109+
SegoeFluentIcons | SendFill
110+
</TextBlock>
111+
</ikw:SimpleStackPanel>
112+
</Button>
113+
114+
<!--Fluent System Icons-->
115+
<TextBlock Margin=""0,10"" FontSize=""16"" FontWeight=""SemiBold"">
116+
Fluent System Icons
117+
</TextBlock>
118+
119+
<Button>
120+
<ikw:SimpleStackPanel>
121+
<ui:FontIcon Icon=""{{x:Static ui:FluentSystemIcons.Home_16_Regular}}"" />
122+
<TextBlock>
123+
FluentSystemIcons | Home_16_Regular
124+
</TextBlock>
125+
</ikw:SimpleStackPanel>
126+
</Button>
127+
<Button>
128+
<ikw:SimpleStackPanel>
129+
<ui:FontIcon Icon=""{{x:Static ui:FluentSystemIcons.Accessibility_16_Regular}}"" />
130+
<TextBlock>
131+
FluentSystemIcons | Accessibility_16_Regular
132+
</TextBlock>
133+
</ikw:SimpleStackPanel>
134+
</Button>
135+
</ikw:SimpleStackPanel>
136+
";
137+
138+
139+
public string Example3Xaml => $@"
140+
<Button Margin=""0,0,0,8"">
141+
<ui:IconAndText Icon=""{{x:Static ui:SegoeFluentIcons.Audio}}"" Content=""Pick a music""/>
142+
</Button>
143+
<Button Padding=""12,12,12,8"">
144+
<ui:IconAndText Icon=""{{x:Static ui:SegoeFluentIcons.Send}}""
145+
Content=""Send"" IconSize=""24"" Orientation=""Vertical"" Spacing=""8""/>
146+
</Button>
147+
";
148+
149+
public string Example4Xaml => $@"
71150
<Button Name=""ExampleButton1"">
72151
<ui:FontIcon FontFamily=""Segoe MDL2 Assets"" Glyph=""&#xE790;"" />
73152
</Button>
74153
";
75154

76-
public string Example3Xaml => $@"
155+
public string Example5Xaml => $@"
77156
<Button Name=""ImageExample1"" Width=""100"">
78157
<ui:ImageIcon Source=""/Assets/slices.png"" />
79158
</Button>
80159
";
81160

82-
public string Example4Xaml => $@"
161+
public string Example6Xaml => $@"
83162
<Button Name=""ImageExample2"">
84163
<ui:ImageIcon Width=""50"" Source=""https://raw.githubusercontent.com/DiemenDesign/LibreICONS/master/svg-color/libre-camera-panorama.svg"" />
85164
</Button>
86165
";
87166

88-
public string Example5Xaml => $@"
167+
public string Example7Xaml => $@"
89168
<Button Name=""Example1Button"">
90169
<ui:PathIcon HorizontalAlignment=""Center"" Data=""F1 M 16,12 20,2L 20,16 1,16"" />
91170
</Button>
92-
";
93-
94-
public string Example6Xaml => $@"
95-
<Button Name=""AcceptButton"">
96-
<ui:IconAndText Content=""Confirm""
97-
Icon=""{{x:Static ui:SegoeFluentIcons.Accept}}""/>
98-
</Button>
99171
";
100172

101173
#endregion

0 commit comments

Comments
 (0)