Skip to content

Commit

Permalink
🔳 Add outlined assist/input chips (#2512)
Browse files Browse the repository at this point in the history 
* 🔳 Add outlined assist/input chips

* Minor reordering of resource dictionaries

Co-authored-by: Kevin Bost <kitokeboo@gmail.com>
  • Loading branch information
@database64128 @Keboo
database64128 and Keboo authored Dec 3, 2021
1 parent 4c903da commit 5f22a5d
Show file tree
Hide file tree
Showing 3 changed files with 154 additions and 6 deletions.
38 changes: 36 additions & 2 deletions MainDemo.Wpf/Chips.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,6 @@
</WrapPanel>

<WrapPanel
Margin="0 12 0 0"
Orientation="Horizontal"
smtx:XamlDisplay.Ignore="This">
<smtx:XamlDisplay UniqueKey="chips_6" Margin="0 0 4 4">
Expand Down Expand Up @@ -112,6 +111,42 @@
IconForeground="{DynamicResource PrimaryHueLightForegroundBrush}" />
</smtx:XamlDisplay>
</WrapPanel>

<WrapPanel
Orientation="Horizontal"
smtx:XamlDisplay.Ignore="This">
<smtx:XamlDisplay UniqueKey="chips_34" Margin="0 0 6 4">
<materialDesign:Chip Content="James Willock" Style="{StaticResource MaterialDesignOutlineChip}">
<materialDesign:Chip.Icon>
<Image Source="Resources/ProfilePic.jpg" />
</materialDesign:Chip.Icon>
</materialDesign:Chip>
</smtx:XamlDisplay>

<smtx:XamlDisplay UniqueKey="chips_35" Margin="0 0 4 4">
<materialDesign:Chip Content="Example Chip" Style="{StaticResource MaterialDesignOutlineChip}" />
</smtx:XamlDisplay>

<smtx:XamlDisplay UniqueKey="chips_36" Margin="0 0 4 4">
<materialDesign:Chip Content="ANZ Bank" Icon="A" Style="{StaticResource MaterialDesignOutlineChip}" />
</smtx:XamlDisplay>

<smtx:XamlDisplay UniqueKey="chips_37" Margin="0 0 4 4">
<materialDesign:Chip Content="ZNA Inc" Icon="Z" Style="{StaticResource MaterialDesignOutlineChip}" />
</smtx:XamlDisplay>

<smtx:XamlDisplay UniqueKey="chips_38" Margin="0 0 4 4">
<materialDesign:Chip
Content="Twitter"
Style="{StaticResource MaterialDesignOutlineChip}"
IconBackground="{DynamicResource PrimaryHueDarkBrush}"
IconForeground="{DynamicResource PrimaryHueDarkForegroundBrush}">
<materialDesign:Chip.Icon>
<materialDesign:PackIcon Kind="Twitter"/>
</materialDesign:Chip.Icon>
</materialDesign:Chip>
</smtx:XamlDisplay>
</WrapPanel>
</StackPanel>

<StackPanel Grid.Row="2">
Expand Down Expand Up @@ -392,4 +427,3 @@
</StackPanel>
</Grid>
</UserControl>

118 changes: 116 additions & 2 deletions MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Chip.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,13 @@
xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf"
xmlns:converters="clr-namespace:MaterialDesignThemes.Wpf.Converters">

<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<converters:NullableToVisibilityConverter x:Key="NullableToVisibilityConverter" />
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<converters:NullableToVisibilityConverter x:Key="NullableToVisibilityConverter" />
<converters:BrushRoundConverter x:Key="BrushRoundConverter" />
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>

<!-- not happy with where the tool tip is going right now -->
<!--
Expand Down Expand Up @@ -160,4 +165,113 @@
</Setter.Value>
</Setter>
</Style>

<Style x:Key="MaterialDesignOutlineChip" TargetType="{x:Type wpf:Chip}">
<Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}" />
<Setter Property="Background" Value="{DynamicResource MaterialDesignBodyLight}" />
<Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignDivider}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type wpf:Chip}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border CornerRadius="16" x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Grid.ColumnSpan="3" />
<Border x:Name="MouseOverBorder"
Opacity="0"
CornerRadius="16"
Grid.ColumnSpan="2"
BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"
Grid.Column="0"
Background="{TemplateBinding Foreground, Converter={StaticResource BrushRoundConverter}}" />
<ContentControl Content="{TemplateBinding Icon}"
x:Name="IconControl"
Background="{TemplateBinding IconBackground}"
Foreground="{TemplateBinding IconForeground}"
FontSize="17"
FontWeight="Regular"
IsTabStop="False"
Visibility="{TemplateBinding Icon, Converter={StaticResource NullableToVisibilityConverter}}"
VerticalAlignment="Center"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center"
Height="32" Width="32">
<ContentControl.Clip>
<EllipseGeometry RadiusX="16" RadiusY="16" Center="16,16" />
</ContentControl.Clip>
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<Border Background="{TemplateBinding Background}">
<ContentPresenter Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
<ContentControl Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
ContentStringFormat="{TemplateBinding ContentTemplateSelector}"
x:Name="TextBlock"
IsTabStop="False"
VerticalAlignment="Center"
Margin="8 0 12 0"
Grid.Column="1"/>
<Button Grid.Column="2" Visibility="{TemplateBinding IsDeletable, Converter={StaticResource BooleanToVisibilityConverter}}"
x:Name="PART_DeleteButton"
ToolTip="{TemplateBinding DeleteToolTip}"
Margin="-6 0 8 0"
VerticalAlignment="Center"
Width="16" Height="16">
<Button.Template>
<ControlTemplate>
<Grid>
<Ellipse x:Name="Bg" Fill="#FFA6A6A6" Stroke="#FF009587" StrokeThickness="0" />
<wpf:PackIcon Kind="Close" Width="12" Height="12"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bg" Property="StrokeThickness" Value="1" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3" To="Normal">
<VisualTransition.GeneratedEasingFunction>
<CircleEase EasingMode="EaseOut" />
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState Name="Normal" />
<VisualState Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MouseOverBorder"
Storyboard.TargetProperty="Opacity"
To="0.1" Duration="0" />
</Storyboard>
</VisualState>
<VisualState Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="IconControl" Property="Visibility" Value="Collapsed">
<Setter TargetName="TextBlock" Property="Margin" Value="12 0 12 0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
4 changes: 2 additions & 2 deletions MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Defaults.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Calendar.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.CheckBox.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Chip.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Clock.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ComboBox.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.DataGrid.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.DatePicker.xaml" />
Expand Down Expand Up @@ -40,8 +42,6 @@
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Thumb.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ValidationErrorTemplate.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Window.xaml" />

<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Clock.xaml" />
</ResourceDictionary.MergedDictionaries>

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

0 comments on commit 5f22a5d

Please sign in to comment.