Skip to content

Commit 5f22a5d

Browse files
database64128Keboo
database64128
and
Keboo
authored
🔳 Add outlined assist/input chips (#2512)
* 🔳 Add outlined assist/input chips * Minor reordering of resource dictionaries Co-authored-by: Kevin Bost <[email protected]>
1 parent 4c903da commit 5f22a5d

File tree

3 files changed

+154
-6
lines changed

3 files changed

+154
-6
lines changed

‎MainDemo.Wpf/Chips.xaml

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@
7171
</WrapPanel>
7272

7373
<WrapPanel
74-
Margin="0 12 0 0"
7574
Orientation="Horizontal"
7675
smtx:XamlDisplay.Ignore="This">
7776
<smtx:XamlDisplay UniqueKey="chips_6" Margin="0 0 4 4">
@@ -112,6 +111,42 @@
112111
IconForeground="{DynamicResource PrimaryHueLightForegroundBrush}" />
113112
</smtx:XamlDisplay>
114113
</WrapPanel>
114+
115+
<WrapPanel
116+
Orientation="Horizontal"
117+
smtx:XamlDisplay.Ignore="This">
118+
<smtx:XamlDisplay UniqueKey="chips_34" Margin="0 0 6 4">
119+
<materialDesign:Chip Content="James Willock" Style="{StaticResource MaterialDesignOutlineChip}">
120+
<materialDesign:Chip.Icon>
121+
<Image Source="Resources/ProfilePic.jpg" />
122+
</materialDesign:Chip.Icon>
123+
</materialDesign:Chip>
124+
</smtx:XamlDisplay>
125+
126+
<smtx:XamlDisplay UniqueKey="chips_35" Margin="0 0 4 4">
127+
<materialDesign:Chip Content="Example Chip" Style="{StaticResource MaterialDesignOutlineChip}" />
128+
</smtx:XamlDisplay>
129+
130+
<smtx:XamlDisplay UniqueKey="chips_36" Margin="0 0 4 4">
131+
<materialDesign:Chip Content="ANZ Bank" Icon="A" Style="{StaticResource MaterialDesignOutlineChip}" />
132+
</smtx:XamlDisplay>
133+
134+
<smtx:XamlDisplay UniqueKey="chips_37" Margin="0 0 4 4">
135+
<materialDesign:Chip Content="ZNA Inc" Icon="Z" Style="{StaticResource MaterialDesignOutlineChip}" />
136+
</smtx:XamlDisplay>
137+
138+
<smtx:XamlDisplay UniqueKey="chips_38" Margin="0 0 4 4">
139+
<materialDesign:Chip
140+
Content="Twitter"
141+
Style="{StaticResource MaterialDesignOutlineChip}"
142+
IconBackground="{DynamicResource PrimaryHueDarkBrush}"
143+
IconForeground="{DynamicResource PrimaryHueDarkForegroundBrush}">
144+
<materialDesign:Chip.Icon>
145+
<materialDesign:PackIcon Kind="Twitter"/>
146+
</materialDesign:Chip.Icon>
147+
</materialDesign:Chip>
148+
</smtx:XamlDisplay>
149+
</WrapPanel>
115150
</StackPanel>
116151

117152
<StackPanel Grid.Row="2">
@@ -392,4 +427,3 @@
392427
</StackPanel>
393428
</Grid>
394429
</UserControl>
395-

‎MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Chip.xaml

Lines changed: 116 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,13 @@
33
xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf"
44
xmlns:converters="clr-namespace:MaterialDesignThemes.Wpf.Converters">
55

6-
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
7-
<converters:NullableToVisibilityConverter x:Key="NullableToVisibilityConverter" />
6+
<ResourceDictionary.MergedDictionaries>
7+
<ResourceDictionary>
8+
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
9+
<converters:NullableToVisibilityConverter x:Key="NullableToVisibilityConverter" />
10+
<converters:BrushRoundConverter x:Key="BrushRoundConverter" />
11+
</ResourceDictionary>
12+
</ResourceDictionary.MergedDictionaries>
813

914
<!-- not happy with where the tool tip is going right now -->
1015
<!--
@@ -160,4 +165,113 @@
160165
</Setter.Value>
161166
</Setter>
162167
</Style>
168+
169+
<Style x:Key="MaterialDesignOutlineChip" TargetType="{x:Type wpf:Chip}">
170+
<Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}" />
171+
<Setter Property="Background" Value="{DynamicResource MaterialDesignBodyLight}" />
172+
<Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignDivider}" />
173+
<Setter Property="BorderThickness" Value="1" />
174+
<Setter Property="Template">
175+
<Setter.Value>
176+
<ControlTemplate TargetType="{x:Type wpf:Chip}">
177+
<Grid>
178+
<Grid.ColumnDefinitions>
179+
<ColumnDefinition Width="Auto" />
180+
<ColumnDefinition Width="*" />
181+
<ColumnDefinition Width="Auto" />
182+
</Grid.ColumnDefinitions>
183+
<Border CornerRadius="16" x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Grid.ColumnSpan="3" />
184+
<Border x:Name="MouseOverBorder"
185+
Opacity="0"
186+
CornerRadius="16"
187+
Grid.ColumnSpan="2"
188+
BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"
189+
Grid.Column="0"
190+
Background="{TemplateBinding Foreground, Converter={StaticResource BrushRoundConverter}}" />
191+
<ContentControl Content="{TemplateBinding Icon}"
192+
x:Name="IconControl"
193+
Background="{TemplateBinding IconBackground}"
194+
Foreground="{TemplateBinding IconForeground}"
195+
FontSize="17"
196+
FontWeight="Regular"
197+
IsTabStop="False"
198+
Visibility="{TemplateBinding Icon, Converter={StaticResource NullableToVisibilityConverter}}"
199+
VerticalAlignment="Center"
200+
VerticalContentAlignment="Center"
201+
HorizontalContentAlignment="Center"
202+
Height="32" Width="32">
203+
<ContentControl.Clip>
204+
<EllipseGeometry RadiusX="16" RadiusY="16" Center="16,16" />
205+
</ContentControl.Clip>
206+
<ContentControl.Template>
207+
<ControlTemplate TargetType="ContentControl">
208+
<Border Background="{TemplateBinding Background}">
209+
<ContentPresenter Content="{TemplateBinding Content}"
210+
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
211+
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
212+
</Border>
213+
</ControlTemplate>
214+
</ContentControl.Template>
215+
</ContentControl>
216+
<ContentControl Content="{TemplateBinding Content}"
217+
ContentTemplate="{TemplateBinding ContentTemplate}"
218+
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
219+
ContentStringFormat="{TemplateBinding ContentTemplateSelector}"
220+
x:Name="TextBlock"
221+
IsTabStop="False"
222+
VerticalAlignment="Center"
223+
Margin="8 0 12 0"
224+
Grid.Column="1"/>
225+
<Button Grid.Column="2" Visibility="{TemplateBinding IsDeletable, Converter={StaticResource BooleanToVisibilityConverter}}"
226+
x:Name="PART_DeleteButton"
227+
ToolTip="{TemplateBinding DeleteToolTip}"
228+
Margin="-6 0 8 0"
229+
VerticalAlignment="Center"
230+
Width="16" Height="16">
231+
<Button.Template>
232+
<ControlTemplate>
233+
<Grid>
234+
<Ellipse x:Name="Bg" Fill="#FFA6A6A6" Stroke="#FF009587" StrokeThickness="0" />
235+
<wpf:PackIcon Kind="Close" Width="12" Height="12"
236+
HorizontalAlignment="Center"
237+
VerticalAlignment="Center" />
238+
</Grid>
239+
<ControlTemplate.Triggers>
240+
<Trigger Property="IsMouseOver" Value="True">
241+
<Setter TargetName="Bg" Property="StrokeThickness" Value="1" />
242+
</Trigger>
243+
</ControlTemplate.Triggers>
244+
</ControlTemplate>
245+
</Button.Template>
246+
</Button>
247+
<VisualStateManager.VisualStateGroups>
248+
<VisualStateGroup Name="CommonStates">
249+
<VisualStateGroup.Transitions>
250+
<VisualTransition GeneratedDuration="0:0:0.3" To="Normal">
251+
<VisualTransition.GeneratedEasingFunction>
252+
<CircleEase EasingMode="EaseOut" />
253+
</VisualTransition.GeneratedEasingFunction>
254+
</VisualTransition>
255+
</VisualStateGroup.Transitions>
256+
<VisualState Name="Normal" />
257+
<VisualState Name="MouseOver">
258+
<Storyboard>
259+
<DoubleAnimation Storyboard.TargetName="MouseOverBorder"
260+
Storyboard.TargetProperty="Opacity"
261+
To="0.1" Duration="0" />
262+
</Storyboard>
263+
</VisualState>
264+
<VisualState Name="Disabled" />
265+
</VisualStateGroup>
266+
</VisualStateManager.VisualStateGroups>
267+
</Grid>
268+
<ControlTemplate.Triggers>
269+
<Trigger SourceName="IconControl" Property="Visibility" Value="Collapsed">
270+
<Setter TargetName="TextBlock" Property="Margin" Value="12 0 12 0" />
271+
</Trigger>
272+
</ControlTemplate.Triggers>
273+
</ControlTemplate>
274+
</Setter.Value>
275+
</Setter>
276+
</Style>
163277
</ResourceDictionary>

‎MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Defaults.xaml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
88
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Calendar.xaml" />
99
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.CheckBox.xaml" />
10+
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Chip.xaml" />
11+
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Clock.xaml" />
1012
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ComboBox.xaml" />
1113
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.DataGrid.xaml" />
1214
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.DatePicker.xaml" />
@@ -40,8 +42,6 @@
4042
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Thumb.xaml" />
4143
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ValidationErrorTemplate.xaml" />
4244
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Window.xaml" />
43-
44-
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Clock.xaml" />
4545
</ResourceDictionary.MergedDictionaries>
4646

4747
<SolidColorBrush x:Key="MaterialDesignLightBackground" Color="#FFFAFAFA"/>

0 commit comments

Comments
 (0)