From 6fc0d122f577f5807070b1f08030786129227efa Mon Sep 17 00:00:00 2001
From: James Willock <james@dragablz.net>
Date: Mon, 4 Jan 2016 20:29:08 +0000
Subject: [PATCH 1/3] start of chip stuff

---
 MainDemo.Wpf/Chips.xaml                       | 13 ++++++
 MainDemo.Wpf/Chips.xaml.cs                    | 28 ++++++++++++
 MainDemo.Wpf/MainDemo.Wpf.csproj              |  7 +++
 MainDemo.Wpf/MainWindow.xaml                  |  5 +++
 MaterialDesignThemes.Wpf/Chip.cs              | 45 +++++++++++++++++++
 .../MaterialDesignThemes.Wpf.csproj           |  1 +
 MaterialDesignThemes.Wpf/Themes/Generic.xaml  | 21 +++++++++
 7 files changed, 120 insertions(+)
 create mode 100644 MainDemo.Wpf/Chips.xaml
 create mode 100644 MainDemo.Wpf/Chips.xaml.cs
 create mode 100644 MaterialDesignThemes.Wpf/Chip.cs

diff --git a/MainDemo.Wpf/Chips.xaml b/MainDemo.Wpf/Chips.xaml
new file mode 100644
index 0000000000..aaed3f7aee
--- /dev/null
+++ b/MainDemo.Wpf/Chips.xaml
@@ -0,0 +1,13 @@
+<UserControl x:Class="MaterialDesignColors.WpfExample.Chips"
+             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:local="clr-namespace:MaterialDesignColors.WpfExample"
+             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             mc:Ignorable="d" 
+             d:DesignHeight="300" d:DesignWidth="300">
+    <Grid Margin="32">
+        <materialDesign:Chip Text="Butcher's Boy" />
+    </Grid>
+</UserControl>
diff --git a/MainDemo.Wpf/Chips.xaml.cs b/MainDemo.Wpf/Chips.xaml.cs
new file mode 100644
index 0000000000..98a89c07ec
--- /dev/null
+++ b/MainDemo.Wpf/Chips.xaml.cs
@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace MaterialDesignColors.WpfExample
+{
+    /// <summary>
+    /// Interaction logic for Chips.xaml
+    /// </summary>
+    public partial class Chips : UserControl
+    {
+        public Chips()
+        {
+            InitializeComponent();
+        }
+    }
+}
diff --git a/MainDemo.Wpf/MainDemo.Wpf.csproj b/MainDemo.Wpf/MainDemo.Wpf.csproj
index dfeb289fdf..b2ad498755 100644
--- a/MainDemo.Wpf/MainDemo.Wpf.csproj
+++ b/MainDemo.Wpf/MainDemo.Wpf.csproj
@@ -75,6 +75,9 @@
     <Compile Include="Cards.xaml.cs">
       <DependentUpon>Cards.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Chips.xaml.cs">
+      <DependentUpon>Chips.xaml</DependentUpon>
+    </Compile>
     <Compile Include="ColorZones.xaml.cs">
       <DependentUpon>ColorZones.xaml</DependentUpon>
     </Compile>
@@ -154,6 +157,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Chips.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="ColorZones.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
diff --git a/MainDemo.Wpf/MainWindow.xaml b/MainDemo.Wpf/MainWindow.xaml
index f5eff0116f..b51a1a29a1 100644
--- a/MainDemo.Wpf/MainWindow.xaml
+++ b/MainDemo.Wpf/MainWindow.xaml
@@ -95,6 +95,11 @@
                                 <wpfExample:Cards />
                             </domain:DemoItem.Content>
                         </domain:DemoItem>
+                        <domain:DemoItem Name="Chips">
+                            <domain:DemoItem.Content>
+                                <wpfExample:Chips />
+                            </domain:DemoItem.Content>
+                        </domain:DemoItem>
                         <domain:DemoItem Name="Colour Zones">
                             <domain:DemoItem.Content>
                                 <wpfExample:ColorZones />
diff --git a/MaterialDesignThemes.Wpf/Chip.cs b/MaterialDesignThemes.Wpf/Chip.cs
new file mode 100644
index 0000000000..f85c395320
--- /dev/null
+++ b/MaterialDesignThemes.Wpf/Chip.cs
@@ -0,0 +1,45 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+
+namespace MaterialDesignThemes.Wpf
+{
+    public class Chip : Control
+    {
+        static Chip()
+        {
+            DefaultStyleKeyProperty.OverrideMetadata(typeof(Chip), new FrameworkPropertyMetadata(typeof(Chip)));
+        }
+
+        public static readonly DependencyProperty IconProperty = DependencyProperty.Register(
+            "Icon", typeof (object), typeof (Chip), new PropertyMetadata(default(object)));
+
+        public object Icon
+        {
+            get { return (object) GetValue(IconProperty); }
+            set { SetValue(IconProperty, value); }
+        }
+
+        public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
+            "Text", typeof (string), typeof (Chip), new PropertyMetadata(default(string)));
+
+        public string Text
+        {
+            get { return (string) GetValue(TextProperty); }
+            set { SetValue(TextProperty, value); }
+        }
+
+        public static readonly DependencyProperty IsDeletableProperty = DependencyProperty.Register(
+            "IsDeletable", typeof (bool), typeof (Chip), new PropertyMetadata(default(bool)));
+
+        public bool IsDeletable
+        {
+            get { return (bool) GetValue(IsDeletableProperty); }
+            set { SetValue(IsDeletableProperty, value); }
+        }
+    }
+}
diff --git a/MaterialDesignThemes.Wpf/MaterialDesignThemes.Wpf.csproj b/MaterialDesignThemes.Wpf/MaterialDesignThemes.Wpf.csproj
index d592463542..16cbab6736 100644
--- a/MaterialDesignThemes.Wpf/MaterialDesignThemes.Wpf.csproj
+++ b/MaterialDesignThemes.Wpf/MaterialDesignThemes.Wpf.csproj
@@ -207,6 +207,7 @@
   </ItemGroup>
   <ItemGroup>
     <Compile Include="Card.cs" />
+    <Compile Include="Chip.cs" />
     <Compile Include="Clock.cs" />
     <Compile Include="ClockChoiceMadeEventArgs.cs" />
     <Compile Include="ClockItemButton.cs" />
diff --git a/MaterialDesignThemes.Wpf/Themes/Generic.xaml b/MaterialDesignThemes.Wpf/Themes/Generic.xaml
index 94044d2934..c698e9de9e 100644
--- a/MaterialDesignThemes.Wpf/Themes/Generic.xaml
+++ b/MaterialDesignThemes.Wpf/Themes/Generic.xaml
@@ -366,6 +366,27 @@
             </Setter.Value>
         </Setter>
     </Style>
+
+    <Style TargetType="{x:Type local:Chip}">
+        <Setter Property="Height" Value="32" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type local:Chip}">
+                    <Grid>
+                        <Border CornerRadius="16" Background="#12000000"></Border>
+                        <TextBlock Text="{TemplateBinding Text}"
+                                   VerticalAlignment="Center"
+                                   Margin="12 0 12 0" />
+                        <!-- button Bg #89000000 -->
+                        <!--
+                        <Button></Button>
+                        -->
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
     
     <Style TargetType="{x:Type local:ColorZone}">
         <Setter Property="Background" Value="{DynamicResource MaterialDesignPaper}" />

From 03e5fd897c81d319c1ea1440067d82665c0bebfa Mon Sep 17 00:00:00 2001
From: ButchersBoy <james.willock@mulhollandsoftware.com>
Date: Thu, 7 Apr 2016 15:49:18 +0100
Subject: [PATCH 2/3] chip stuff

---
 MainDemo.Wpf/App.xaml                        |  2 +-
 MainDemo.Wpf/ProvingGround.xaml              | 59 +++++++++++-
 MainDemo.Wpf/ProvingGround.xaml.cs           | 10 ++
 MaterialDesignThemes.Wpf/Chip.cs             | 98 +++++++++++++++++++-
 MaterialDesignThemes.Wpf/Themes/Generic.xaml | 72 ++++++++++++--
 5 files changed, 231 insertions(+), 10 deletions(-)

diff --git a/MainDemo.Wpf/App.xaml b/MainDemo.Wpf/App.xaml
index 4ae04ab7f4..e7fe4592d9 100644
--- a/MainDemo.Wpf/App.xaml
+++ b/MainDemo.Wpf/App.xaml
@@ -1,7 +1,7 @@
 <Application x:Class="MaterialDesignColors.WpfExample.App"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             StartupUri="MainWindow.xaml">
+             StartupUri="ProvingGround.xaml">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
diff --git a/MainDemo.Wpf/ProvingGround.xaml b/MainDemo.Wpf/ProvingGround.xaml
index d2d045b296..b55f3f3f58 100644
--- a/MainDemo.Wpf/ProvingGround.xaml
+++ b/MainDemo.Wpf/ProvingGround.xaml
@@ -22,8 +22,63 @@
     </UserControl.Resources>
 
 
-    <StackPanel Margin="24" HorizontalAlignment="Stretch">
-        <ProgressBar Style="{StaticResource MaterialDesignCircularProgressBar}" Value="20"  />
+    <StackPanel>
+        <WrapPanel Margin="24" Orientation="Horizontal">
+            <materialDesign:Chip Text="James Willock" 
+                             Margin="0 0 6 4">
+                <materialDesign:Chip.Icon>
+                    <Image Source="Resources/ProfilePic.jpg"></Image>
+                </materialDesign:Chip.Icon>
+            </materialDesign:Chip>
+            <materialDesign:Chip Text="Example Chip" 
+                             Margin="0 0 4 4" />
+            <materialDesign:Chip Text="ANZ Bank" 
+                             Icon="A" 
+                             Margin="0 0 4 4" />
+            <materialDesign:Chip Text="ZNA Inc" 
+                             Icon="Z" 
+                             IconBackground="{DynamicResource PrimaryHueMidBrush}"
+                             IconForeground="{DynamicResource PrimaryHueMidForegroundBrush}"
+                             Margin="0 0 4 4" />
+            <materialDesign:Chip Text="Twitter"                                  
+                                 IconBackground="{DynamicResource PrimaryHueMidBrush}"
+                                 IconForeground="{DynamicResource PrimaryHueMidForegroundBrush}"
+                                 Margin="0 0 4 4">
+                <materialDesign:Chip.Icon>
+                    <materialDesign:PackIcon Kind="Twitter"></materialDesign:PackIcon>
+                </materialDesign:Chip.Icon>
+            </materialDesign:Chip>
+        </WrapPanel>
+        <WrapPanel Margin="24" Orientation="Horizontal">
+            <materialDesign:Chip Text="James Willock"
+                                 IsDeletable="True"
+                                 Margin="0 0 4 4"
+                                 x:Name="ButtonsDemoChip"
+                                 Click="ButtonsDemoChip_OnClick"
+                                 DeleteClick="ButtonsDemoChip_OnDeleteClick"
+                                 ToolTip="Just a tool tip"
+                                 DeleteToolTip="Your friendly neighbour delete button"
+                                 >
+                <materialDesign:Chip.Icon>
+                    <Image Source="Resources/ProfilePic.jpg"></Image>
+                </materialDesign:Chip.Icon>
+            </materialDesign:Chip>
+            <materialDesign:Chip Text="Example Chip"
+                                 IsDeletable="True"
+                                 ToolTip="This is an example chip"
+                                 Margin="0 0 4 4">
+            </materialDesign:Chip>
+            <materialDesign:Chip Text="ANZ Bank" 
+                                 Icon="A"
+                                 IsDeletable="True"
+                                 Margin="0 0 4 4" />
+            <materialDesign:Chip Text="ZNA Inc" 
+                                 Icon="Z" 
+                                 IsDeletable="True"
+                                 IconBackground="{DynamicResource PrimaryHueMidBrush}"
+                                 IconForeground="{DynamicResource PrimaryHueMidForegroundBrush}"
+                                 Margin="0 0 4 4" />
+        </WrapPanel>
     </StackPanel>
 
 </UserControl>
diff --git a/MainDemo.Wpf/ProvingGround.xaml.cs b/MainDemo.Wpf/ProvingGround.xaml.cs
index 2a087b3ce1..093bb36428 100644
--- a/MainDemo.Wpf/ProvingGround.xaml.cs
+++ b/MainDemo.Wpf/ProvingGround.xaml.cs
@@ -35,6 +35,16 @@ private void Button_Click(object sender, RoutedEventArgs e)
             System.Diagnostics.Process.Start("https://twitter.com/James_Willock");
 
         }
+
+        private void ButtonsDemoChip_OnClick(object sender, RoutedEventArgs e)
+        {
+            Console.WriteLine("Chip clicked.");
+        }
+
+        private void ButtonsDemoChip_OnDeleteClick(object sender, RoutedEventArgs e)
+        {
+            Console.WriteLine("Chip delete clicked.");
+        }
     }
 
     public class ProvingGroundViewModel : INotifyPropertyChanged
diff --git a/MaterialDesignThemes.Wpf/Chip.cs b/MaterialDesignThemes.Wpf/Chip.cs
index f85c395320..d9d6f22938 100644
--- a/MaterialDesignThemes.Wpf/Chip.cs
+++ b/MaterialDesignThemes.Wpf/Chip.cs
@@ -1,15 +1,24 @@
 using System;
 using System.Collections.Generic;
+using System.ComponentModel;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 using System.Windows;
 using System.Windows.Controls;
+using System.Windows.Controls.Primitives;
+using System.Windows.Input;
+using System.Windows.Media;
 
 namespace MaterialDesignThemes.Wpf
 {
-    public class Chip : Control
+    [TemplatePart(Name = DeleteButtonPartName, Type = typeof(Button))]
+    public class Chip : Button
     {
+        private ButtonBase _deleteButton;
+
+        public const string DeleteButtonPartName = "PART_DeleteButton";
+
         static Chip()
         {
             DefaultStyleKeyProperty.OverrideMetadata(typeof(Chip), new FrameworkPropertyMetadata(typeof(Chip)));
@@ -24,6 +33,24 @@ public object Icon
             set { SetValue(IconProperty, value); }
         }
 
+        public static readonly DependencyProperty IconBackgroundProperty = DependencyProperty.Register(
+            "IconBackground", typeof (Brush), typeof (Chip), new PropertyMetadata(default(Brush)));
+
+        public Brush IconBackground
+        {
+            get { return (Brush) GetValue(IconBackgroundProperty); }
+            set { SetValue(IconBackgroundProperty, value); }
+        }
+
+        public static readonly DependencyProperty IconForegroundProperty = DependencyProperty.Register(
+            "IconForeground", typeof (Brush), typeof (Chip), new PropertyMetadata(default(Brush)));
+
+        public Brush IconForeground
+        {
+            get { return (Brush) GetValue(IconForegroundProperty); }
+            set { SetValue(IconForegroundProperty, value); }
+        }
+    
         public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
             "Text", typeof (string), typeof (Chip), new PropertyMetadata(default(string)));
 
@@ -36,10 +63,79 @@ public string Text
         public static readonly DependencyProperty IsDeletableProperty = DependencyProperty.Register(
             "IsDeletable", typeof (bool), typeof (Chip), new PropertyMetadata(default(bool)));
 
+        /// <summary>
+        /// Indicates if the delete button should be visible.
+        /// </summary>
         public bool IsDeletable
         {
             get { return (bool) GetValue(IsDeletableProperty); }
             set { SetValue(IsDeletableProperty, value); }
         }
+
+        public static readonly DependencyProperty DeleteCommandProperty = DependencyProperty.Register(
+            "DeleteCommand", typeof (ICommand), typeof (Chip), new PropertyMetadata(default(ICommand)));        
+
+        public ICommand DeleteCommand
+        {
+            get { return (ICommand) GetValue(DeleteCommandProperty); }
+            set { SetValue(DeleteCommandProperty, value); }
+        }
+
+        public static readonly DependencyProperty DeleteCommandParameterProperty = DependencyProperty.Register(
+            "DeleteCommandParameter", typeof (object), typeof (Chip), new PropertyMetadata(default(object)));
+
+        public object DeleteCommandParameter
+        {
+            get { return (object) GetValue(DeleteCommandParameterProperty); }
+            set { SetValue(DeleteCommandParameterProperty, value); }
+        }
+
+        public static readonly DependencyProperty DeleteToolTipProperty = DependencyProperty.Register(
+            "DeleteToolTip", typeof (object), typeof (Chip), new PropertyMetadata(default(object)));
+
+        public object DeleteToolTip
+        {
+            get { return (object) GetValue(DeleteToolTipProperty); }
+            set { SetValue(DeleteToolTipProperty, value); }
+        }
+
+        /// <summary>
+        /// Event correspond to delete button left mouse button click 
+        /// </summary>
+        public static readonly RoutedEvent DeleteClickEvent = EventManager.RegisterRoutedEvent("DeleteClick", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(Chip));
+
+        /// <summary>
+        /// Add / Remove DeleteClickEvent handler 
+        /// </summary>
+        [Category("Behavior")]
+        public event RoutedEventHandler DeleteClick { add { AddHandler(DeleteClickEvent, value); } remove { RemoveHandler(DeleteClickEvent, value); } }
+
+        public override void OnApplyTemplate()
+        {
+            if (_deleteButton != null)
+                _deleteButton.Click -= DeleteButtonOnClick;
+
+            _deleteButton = GetTemplateChild(DeleteButtonPartName) as ButtonBase;
+            if (_deleteButton != null)
+                _deleteButton.Click += DeleteButtonOnClick;
+
+            base.OnApplyTemplate();
+        }
+
+        protected virtual void OnDeleteClick()
+        {
+            var newEvent = new RoutedEventArgs(DeleteClickEvent, this);
+            RaiseEvent(newEvent);
+
+            var command = DeleteCommand;
+            if (command != null && command.CanExecute(DeleteCommandParameter))
+                command.Execute(DeleteCommandParameter);
+        }
+
+        private void DeleteButtonOnClick(object sender, RoutedEventArgs routedEventArgs)
+        {
+            OnDeleteClick();
+            routedEventArgs.Handled = true;
+        }
     }
 }
diff --git a/MaterialDesignThemes.Wpf/Themes/Generic.xaml b/MaterialDesignThemes.Wpf/Themes/Generic.xaml
index 97a2408df0..5e6fbe80ac 100644
--- a/MaterialDesignThemes.Wpf/Themes/Generic.xaml
+++ b/MaterialDesignThemes.Wpf/Themes/Generic.xaml
@@ -31,6 +31,7 @@
 		
 	<converters:BrushToRadialGradientBrushConverter x:Key="BrushToRadialGradientBrushConverter" />
     <converters:DrawerOffsetConverter x:Key="DrawerOffsetConverter" />
+    <converters:NullableToVisibilityConverter x:Key="NullableToVisibilityConverter" />
     
     <Style TargetType="{x:Type local:Ripple}">
         <Setter Property="RecognizesAccessKey" Value="True" />
@@ -398,19 +399,78 @@
     <Style TargetType="{x:Type local:Chip}">
         <Setter Property="Height" Value="32" />
         <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="FontSize" Value="13" />
+        <Setter Property="Background" Value="#12000000" />
+        <Setter Property="IconBackground" Value="#FF009587" />
+        <Setter Property="IconForeground" Value="#FFfafafa" />
+        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type local:Chip}">
                     <Grid>
-                        <Border CornerRadius="16" Background="#12000000"></Border>
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto" />
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="Auto" />
+                        </Grid.ColumnDefinitions>
+                        <Border CornerRadius="16" Background="{TemplateBinding Background}" Grid.ColumnSpan="3" />
+                        <ContentControl Content="{TemplateBinding Icon}"
+                                        x:Name="IconControl"
+                                        Background="{TemplateBinding IconBackground}"
+                                        Foreground="{TemplateBinding IconForeground}"
+                                        FontSize="17"
+                                        FontWeight="Regular"
+                                        Visibility="{TemplateBinding Icon, Converter={StaticResource NullVisibilityConverter}}"
+                                        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>
                         <TextBlock Text="{TemplateBinding Text}"
+                                   x:Name="TextBlock"
                                    VerticalAlignment="Center"
-                                   Margin="12 0 12 0" />
-                        <!-- button Bg #89000000 -->
-                        <!--
-                        <Button></Button>
-                        -->
+                                   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" />
+                                        <local: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>
                     </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>

From 96e7c707e23d81bffd6f6965b82126f8bc001c0b Mon Sep 17 00:00:00 2001
From: ButchersBoy <james.willock@mulhollandsoftware.com>
Date: Fri, 8 Apr 2016 11:16:23 +0100
Subject: [PATCH 3/3] looks like v1 of chips

---
 MainDemo.Wpf/App.xaml                         |   2 +-
 MainDemo.Wpf/Chips.xaml                       |  62 ++++++-
 MainDemo.Wpf/Chips.xaml.cs                    |  11 ++
 MainDemo.Wpf/MainWindow.xaml                  |   5 +
 MainDemo.Wpf/ProvingGround.xaml               |  34 ++--
 MaterialDesignThemes.Wpf/Chip.cs              |  13 +-
 .../MaterialDesignThemes.Wpf.csproj           |   4 +
 MaterialDesignThemes.Wpf/Themes/Generic.xaml  |  84 +--------
 .../Themes/MaterialDesignTheme.Chip.xaml      | 161 ++++++++++++++++++
 .../Themes/MaterialDesignTheme.Dark.xaml      |   2 +
 .../Themes/MaterialDesignTheme.Light.xaml     |   4 +-
 11 files changed, 268 insertions(+), 114 deletions(-)
 create mode 100644 MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Chip.xaml

diff --git a/MainDemo.Wpf/App.xaml b/MainDemo.Wpf/App.xaml
index e7fe4592d9..4ae04ab7f4 100644
--- a/MainDemo.Wpf/App.xaml
+++ b/MainDemo.Wpf/App.xaml
@@ -1,7 +1,7 @@
 <Application x:Class="MaterialDesignColors.WpfExample.App"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             StartupUri="ProvingGround.xaml">
+             StartupUri="MainWindow.xaml">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
diff --git a/MainDemo.Wpf/Chips.xaml b/MainDemo.Wpf/Chips.xaml
index aaed3f7aee..8e12919457 100644
--- a/MainDemo.Wpf/Chips.xaml
+++ b/MainDemo.Wpf/Chips.xaml
@@ -8,6 +8,66 @@
              mc:Ignorable="d" 
              d:DesignHeight="300" d:DesignWidth="300">
     <Grid Margin="32">
-        <materialDesign:Chip Text="Butcher's Boy" />
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
+        <TextBlock Style="{StaticResource MaterialDesignTitleTextBlock}">Chips</TextBlock>
+        <StackPanel Grid.Row="1" Margin="0 16 0 0">
+            <WrapPanel Orientation="Horizontal">
+                <materialDesign:Chip Content="James Willock" Margin="0 0 6 4">
+                    <materialDesign:Chip.Icon>
+                        <Image Source="Resources/ProfilePic.jpg" />
+                    </materialDesign:Chip.Icon>
+                </materialDesign:Chip>
+                <materialDesign:Chip Margin="0 0 4 4">
+                    Example Chip
+                </materialDesign:Chip>
+                <materialDesign:Chip Content="ANZ Bank" 
+                             Icon="A" 
+                             Margin="0 0 4 4" />
+                <materialDesign:Chip Content="ZNA Inc" 
+                             Icon="Z" 
+                             Margin="0 0 4 4" />
+                <materialDesign:Chip Content="Twitter"                                  
+                                 IconBackground="{DynamicResource PrimaryHueDarkBrush}"
+                                 IconForeground="{DynamicResource PrimaryHueDarkForegroundBrush}"
+                                 Margin="0 0 4 4">
+                    <materialDesign:Chip.Icon>
+                        <materialDesign:PackIcon Kind="Twitter"></materialDesign:PackIcon>
+                    </materialDesign:Chip.Icon>
+                </materialDesign:Chip>
+            </WrapPanel>
+            <WrapPanel Margin="0 12 0 0" Orientation="Horizontal">
+                <materialDesign:Chip Content="James Willock"
+                                 IsDeletable="True"
+                                 Margin="0 0 4 4"
+                                 x:Name="ButtonsDemoChip"
+                                 Click="ButtonsDemoChip_OnClick"
+                                 DeleteClick="ButtonsDemoChip_OnDeleteClick"
+                                 ToolTip="Just a tool tip"
+                                 DeleteToolTip="Your friendly neighbour delete button"
+                                 >
+                    <materialDesign:Chip.Icon>
+                        <Image Source="Resources/ProfilePic.jpg"></Image>
+                    </materialDesign:Chip.Icon>
+                </materialDesign:Chip>
+                <materialDesign:Chip Content="Example Chip"
+                                 IsDeletable="True"
+                                 ToolTip="This is an example chip"
+                                 Margin="0 0 4 4">
+                </materialDesign:Chip>
+                <materialDesign:Chip Content="ANZ Bank" 
+                                 Icon="A"
+                                 IsDeletable="True"
+                                 Margin="0 0 4 4" />
+                <materialDesign:Chip Content="ZNA Inc" 
+                                 Icon="Z" 
+                                 IsDeletable="True"
+                                 IconBackground="{DynamicResource PrimaryHueLightBrush}"
+                                 IconForeground="{DynamicResource PrimaryHueLightForegroundBrush}"
+                                 Margin="0 0 4 4" />
+            </WrapPanel>
+        </StackPanel>
     </Grid>
 </UserControl>
diff --git a/MainDemo.Wpf/Chips.xaml.cs b/MainDemo.Wpf/Chips.xaml.cs
index 98a89c07ec..197eea420d 100644
--- a/MainDemo.Wpf/Chips.xaml.cs
+++ b/MainDemo.Wpf/Chips.xaml.cs
@@ -24,5 +24,16 @@ public Chips()
         {
             InitializeComponent();
         }
+
+        private void ButtonsDemoChip_OnClick(object sender, RoutedEventArgs e)
+        {
+            Console.WriteLine("Chip clicked.");
+        }
+
+        private void ButtonsDemoChip_OnDeleteClick(object sender, RoutedEventArgs e)
+        {
+            Console.WriteLine("Chip delete clicked.");
+        }
+
     }
 }
diff --git a/MainDemo.Wpf/MainWindow.xaml b/MainDemo.Wpf/MainWindow.xaml
index effc3ddb17..f020337cae 100644
--- a/MainDemo.Wpf/MainWindow.xaml
+++ b/MainDemo.Wpf/MainWindow.xaml
@@ -88,6 +88,11 @@
                                 <wpfExample:Sliders />
                             </domain:DemoItem.Content>
                         </domain:DemoItem>
+                        <domain:DemoItem Name="Chips">
+                            <domain:DemoItem.Content>
+                                <wpfExample:Chips />
+                            </domain:DemoItem.Content>
+                        </domain:DemoItem>
                         <domain:DemoItem Name="Typography">
                             <domain:DemoItem.Content>
                                 <wpfExample:Typography />
diff --git a/MainDemo.Wpf/ProvingGround.xaml b/MainDemo.Wpf/ProvingGround.xaml
index b55f3f3f58..023b438a12 100644
--- a/MainDemo.Wpf/ProvingGround.xaml
+++ b/MainDemo.Wpf/ProvingGround.xaml
@@ -24,25 +24,23 @@
 
     <StackPanel>
         <WrapPanel Margin="24" Orientation="Horizontal">
-            <materialDesign:Chip Text="James Willock" 
-                             Margin="0 0 6 4">
+            <materialDesign:Chip Content="James Willock" Margin="0 0 6 4">
                 <materialDesign:Chip.Icon>
-                    <Image Source="Resources/ProfilePic.jpg"></Image>
+                    <Image Source="Resources/ProfilePic.jpg" />
                 </materialDesign:Chip.Icon>
             </materialDesign:Chip>
-            <materialDesign:Chip Text="Example Chip" 
-                             Margin="0 0 4 4" />
-            <materialDesign:Chip Text="ANZ Bank" 
+            <materialDesign:Chip Margin="0 0 4 4">
+                Example Chip
+            </materialDesign:Chip>
+            <materialDesign:Chip Content="ANZ Bank" 
                              Icon="A" 
                              Margin="0 0 4 4" />
-            <materialDesign:Chip Text="ZNA Inc" 
+            <materialDesign:Chip Content="ZNA Inc" 
                              Icon="Z" 
-                             IconBackground="{DynamicResource PrimaryHueMidBrush}"
-                             IconForeground="{DynamicResource PrimaryHueMidForegroundBrush}"
                              Margin="0 0 4 4" />
-            <materialDesign:Chip Text="Twitter"                                  
-                                 IconBackground="{DynamicResource PrimaryHueMidBrush}"
-                                 IconForeground="{DynamicResource PrimaryHueMidForegroundBrush}"
+            <materialDesign:Chip Content="Twitter"                                  
+                                 IconBackground="{DynamicResource PrimaryHueDarkBrush}"
+                                 IconForeground="{DynamicResource PrimaryHueDarkForegroundBrush}"
                                  Margin="0 0 4 4">
                 <materialDesign:Chip.Icon>
                     <materialDesign:PackIcon Kind="Twitter"></materialDesign:PackIcon>
@@ -50,7 +48,7 @@
             </materialDesign:Chip>
         </WrapPanel>
         <WrapPanel Margin="24" Orientation="Horizontal">
-            <materialDesign:Chip Text="James Willock"
+            <materialDesign:Chip Content="James Willock"
                                  IsDeletable="True"
                                  Margin="0 0 4 4"
                                  x:Name="ButtonsDemoChip"
@@ -63,20 +61,20 @@
                     <Image Source="Resources/ProfilePic.jpg"></Image>
                 </materialDesign:Chip.Icon>
             </materialDesign:Chip>
-            <materialDesign:Chip Text="Example Chip"
+            <materialDesign:Chip Content="Example Chip"
                                  IsDeletable="True"
                                  ToolTip="This is an example chip"
                                  Margin="0 0 4 4">
             </materialDesign:Chip>
-            <materialDesign:Chip Text="ANZ Bank" 
+            <materialDesign:Chip Content="ANZ Bank" 
                                  Icon="A"
                                  IsDeletable="True"
                                  Margin="0 0 4 4" />
-            <materialDesign:Chip Text="ZNA Inc" 
+            <materialDesign:Chip Content="ZNA Inc" 
                                  Icon="Z" 
                                  IsDeletable="True"
-                                 IconBackground="{DynamicResource PrimaryHueMidBrush}"
-                                 IconForeground="{DynamicResource PrimaryHueMidForegroundBrush}"
+                                 IconBackground="{DynamicResource PrimaryHueLightBrush}"
+                                 IconForeground="{DynamicResource PrimaryHueLightForegroundBrush}"
                                  Margin="0 0 4 4" />
         </WrapPanel>
     </StackPanel>
diff --git a/MaterialDesignThemes.Wpf/Chip.cs b/MaterialDesignThemes.Wpf/Chip.cs
index d9d6f22938..d3650da648 100644
--- a/MaterialDesignThemes.Wpf/Chip.cs
+++ b/MaterialDesignThemes.Wpf/Chip.cs
@@ -13,7 +13,7 @@
 namespace MaterialDesignThemes.Wpf
 {
     [TemplatePart(Name = DeleteButtonPartName, Type = typeof(Button))]
-    public class Chip : Button
+    public class Chip : ButtonBase
     {
         private ButtonBase _deleteButton;
 
@@ -51,15 +51,6 @@ public Brush IconForeground
             set { SetValue(IconForegroundProperty, value); }
         }
     
-        public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
-            "Text", typeof (string), typeof (Chip), new PropertyMetadata(default(string)));
-
-        public string Text
-        {
-            get { return (string) GetValue(TextProperty); }
-            set { SetValue(TextProperty, value); }
-        }
-
         public static readonly DependencyProperty IsDeletableProperty = DependencyProperty.Register(
             "IsDeletable", typeof (bool), typeof (Chip), new PropertyMetadata(default(bool)));
 
@@ -98,7 +89,7 @@ public object DeleteToolTip
             get { return (object) GetValue(DeleteToolTipProperty); }
             set { SetValue(DeleteToolTipProperty, value); }
         }
-
+        
         /// <summary>
         /// Event correspond to delete button left mouse button click 
         /// </summary>
diff --git a/MaterialDesignThemes.Wpf/MaterialDesignThemes.Wpf.csproj b/MaterialDesignThemes.Wpf/MaterialDesignThemes.Wpf.csproj
index a2bddebab8..709fd941ab 100644
--- a/MaterialDesignThemes.Wpf/MaterialDesignThemes.Wpf.csproj
+++ b/MaterialDesignThemes.Wpf/MaterialDesignThemes.Wpf.csproj
@@ -75,6 +75,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Themes\MaterialDesignTheme.Chip.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Themes\MaterialDesignTheme.Clock.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
diff --git a/MaterialDesignThemes.Wpf/Themes/Generic.xaml b/MaterialDesignThemes.Wpf/Themes/Generic.xaml
index 4aefbeced1..671a76b1cb 100644
--- a/MaterialDesignThemes.Wpf/Themes/Generic.xaml
+++ b/MaterialDesignThemes.Wpf/Themes/Generic.xaml
@@ -16,6 +16,7 @@
 				in your App.xaml
 		-->
         <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Card.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.PopupBox.xaml" />
         <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.RatingBar.xaml" />
@@ -32,8 +33,7 @@
 		
 	<converters:BrushToRadialGradientBrushConverter x:Key="BrushToRadialGradientBrushConverter" />
     <converters:DrawerOffsetConverter x:Key="DrawerOffsetConverter" />
-    <converters:NullableToVisibilityConverter x:Key="NullableToVisibilityConverter" />
-    
+
     <Style TargetType="{x:Type local:Ripple}">
         <Setter Property="RecognizesAccessKey" Value="True" />
         <Setter Property="HorizontalAlignment" Value="Stretch" />
@@ -397,86 +397,6 @@
         </Setter>
     </Style>
 
-    <Style TargetType="{x:Type local:Chip}">
-        <Setter Property="Height" Value="32" />
-        <Setter Property="HorizontalAlignment" Value="Left" />
-        <Setter Property="FontSize" Value="13" />
-        <Setter Property="Background" Value="#12000000" />
-        <Setter Property="IconBackground" Value="#FF009587" />
-        <Setter Property="IconForeground" Value="#FFfafafa" />
-        <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="Template">
-            <Setter.Value>
-                <ControlTemplate TargetType="{x:Type local:Chip}">
-                    <Grid>
-                        <Grid.ColumnDefinitions>
-                            <ColumnDefinition Width="Auto" />
-                            <ColumnDefinition Width="*" />
-                            <ColumnDefinition Width="Auto" />
-                        </Grid.ColumnDefinitions>
-                        <Border CornerRadius="16" Background="{TemplateBinding Background}" Grid.ColumnSpan="3" />
-                        <ContentControl Content="{TemplateBinding Icon}"
-                                        x:Name="IconControl"
-                                        Background="{TemplateBinding IconBackground}"
-                                        Foreground="{TemplateBinding IconForeground}"
-                                        FontSize="17"
-                                        FontWeight="Regular"
-                                        Visibility="{TemplateBinding Icon, Converter={StaticResource NullVisibilityConverter}}"
-                                        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>
-                        <TextBlock Text="{TemplateBinding Text}"
-                                   x:Name="TextBlock"
-                                   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" />
-                                        <local: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>
-                    </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>
-    
     <Style TargetType="{x:Type local:ColorZone}">
         <Setter Property="Background" Value="{DynamicResource MaterialDesignPaper}" />
         <Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}" />
diff --git a/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Chip.xaml b/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Chip.xaml
new file mode 100644
index 0000000000..9382f69ab5
--- /dev/null
+++ b/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Chip.xaml
@@ -0,0 +1,161 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:local="clr-namespace:MaterialDesignThemes.Wpf.Themes"
+                    xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf"
+                    xmlns:converters="clr-namespace:MaterialDesignThemes.Wpf.Converters">
+
+    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
+    <converters:NullableToVisibilityConverter x:Key="NullableToVisibilityConverter" />
+
+    <!-- not happy with where the tool tip is going right now -->
+    <!--
+    <Style x:Key="MaterialDesignChipToolTip" TargetType="ToolTip">
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="ToolTip">
+                    <wpf:Card Foreground="{DynamicResource MaterialDesignBody}"
+                              FontSize="15"
+                              FontWeight="Regular"
+                              Padding="0 8 0 8"
+                              RenderOptions.ClearTypeHint="Enabled"  
+                              wpf:ShadowAssist.ShadowDepth="Depth3"
+                              Margin="8">
+                        <Grid Margin="16 8 16 8">
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="Auto" />
+                            </Grid.ColumnDefinitions>
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="Auto" />
+                            </Grid.RowDefinitions>
+
+                            <Border>
+                                <Border.Background>
+                                    <VisualBrush Visual="{Binding ElementName=PART_MonthView}" Stretch="UniformToFill"/>
+                                </Border.Background>
+                                <Border.RenderTransform>
+                                    <TranslateTransform X="0"/>
+                                </Border.RenderTransform>
+                            </Border>
+
+                            <ContentControl Content="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=wpf:Chip}, Path=Icon}"
+                                            x:Name="IconControl"
+                                            Background="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=wpf:Chip}, Path=IconBackground}"
+                                            Foreground="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=wpf:Chip}, Path=IconForeground}"
+                                            FontSize="17"
+                                            FontWeight="Regular"
+                                            Visibility="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=wpf:Chip}, Path=Icon, Converter={StaticResource NullableToVisibilityConverter}}"
+                                            VerticalAlignment="Center"
+                                            VerticalContentAlignment="Center"
+                                            HorizontalContentAlignment="Center"
+                                            Height="32" Width="32"
+                                            Margin="0 0 8 0">
+                                <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 Grid.Column="1" Content="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=wpf:Chip}, Path=Content}"
+                                            FontSize="13" />
+                            <ContentControl Grid.Column="1" Grid.Row="1" Content="{TemplateBinding Content}"
+                                            FontSize="11"/>
+                        </Grid>
+                    </wpf:Card>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+    -->
+    
+    <Style TargetType="{x:Type wpf:Chip}">
+        <Setter Property="Height" Value="32" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="FontSize" Value="13" />
+        <Setter Property="Background" Value="{DynamicResource MaterialDesignChipBackground}" />
+        <Setter Property="IconBackground" Value="{DynamicResource PrimaryHueMidBrush}" />
+        <Setter Property="IconForeground" Value="{DynamicResource PrimaryHueMidForegroundBrush}" />
+        <Setter Property="Cursor" Value="Hand" />
+        <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" Background="{TemplateBinding Background}" Grid.ColumnSpan="3" />
+                        <ContentControl Content="{TemplateBinding Icon}"
+                                        x:Name="IconControl"
+                                        Background="{TemplateBinding IconBackground}"
+                                        Foreground="{TemplateBinding IconForeground}"
+                                        FontSize="17"
+                                        FontWeight="Regular"
+                                        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"
+                                        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>
+                    </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>
\ No newline at end of file
diff --git a/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Dark.xaml b/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Dark.xaml
index 12d5d50f5a..204dcbee9f 100644
--- a/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Dark.xaml
+++ b/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Dark.xaml
@@ -26,4 +26,6 @@
 
     <SolidColorBrush x:Key="MaterialDesignToolTipBackground" Color="#eeeeee" />
 
+    <SolidColorBrush x:Key="MaterialDesignChipBackground" Color="#FF2E3C43" />
+
 </ResourceDictionary>
\ No newline at end of file
diff --git a/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Light.xaml b/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Light.xaml
index ad8ce333fd..d4c388ce47 100644
--- a/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Light.xaml
+++ b/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Light.xaml
@@ -23,5 +23,7 @@
     <SolidColorBrush x:Key="MaterialDesignFlatButtonRipple" Color="#FFB6B6B6" />
 
     <SolidColorBrush x:Key="MaterialDesignToolTipBackground" Color="#757575" />
-
+    
+    <SolidColorBrush x:Key="MaterialDesignChipBackground" Color="#12000000" />
+    
 </ResourceDictionary>
\ No newline at end of file