MaterialDesignInXAML · ButchersBoy · Apr 8, 2016 · Jan 4, 2016 · Mar 23, 2016 · Apr 6, 2016
diff --git a/MainDemo.Wpf/Chips.xaml b/MainDemo.Wpf/Chips.xaml
@@ -0,0 +1,73 @@
+<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">
+        <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
@@ -0,0 +1,39 @@
+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();
+        }
+
+        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
@@ -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/MaterialDesignDemo.csproj b/MainDemo.Wpf/MaterialDesignDemo.csproj
@@ -76,6 +76,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>
@@ -192,6 +195,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/ProvingGround.xaml b/MainDemo.Wpf/ProvingGround.xaml
@@ -22,8 +22,61 @@
     </UserControl.Resources>
 
 
-    <StackPanel Margin="24" HorizontalAlignment="Stretch">
-        <ProgressBar Style="{StaticResource MaterialDesignCircularProgressBar}" Value="20"  />
+    <StackPanel>
+        <WrapPanel Margin="24" 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="24" 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>
 
 </UserControl>
diff --git 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
@@ -0,0 +1,132 @@
+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
+{
+    [TemplatePart(Name = DeleteButtonPartName, Type = typeof(Button))]
+    public class Chip : ButtonBase
+    {
+        private ButtonBase _deleteButton;
+
+        public const string DeleteButtonPartName = "PART_DeleteButton";
+
+        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 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 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/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>
@@ -218,6 +222,7 @@
   </ItemGroup>
   <ItemGroup>
     <Compile Include="Card.cs" />
+    <Compile Include="Chip.cs" />
     <Compile Include="Clock.cs" />
     <Compile Include="ClockChoiceMadeEventArgs.cs" />
     <Compile Include="ClockItemButton.cs" />