Skip to content

Commit 03e5fd8

Browse files
ButchersBoyButchersBoy
committed
chip stuff
1 parent b540a43 commit 03e5fd8

File tree

5 files changed

+231
-10
lines changed

5 files changed

+231
-10
lines changed

‎MainDemo.Wpf/App.xaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Application x:Class="MaterialDesignColors.WpfExample.App"
22
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4-
StartupUri="MainWindow.xaml">
4+
StartupUri="ProvingGround.xaml">
55
<Application.Resources>
66
<ResourceDictionary>
77
<ResourceDictionary.MergedDictionaries>

‎MainDemo.Wpf/ProvingGround.xaml

Lines changed: 57 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,63 @@
2222
</UserControl.Resources>
2323

2424

25-
<StackPanel Margin="24" HorizontalAlignment="Stretch">
26-
<ProgressBar Style="{StaticResource MaterialDesignCircularProgressBar}" Value="20" />
25+
<StackPanel>
26+
<WrapPanel Margin="24" Orientation="Horizontal">
27+
<materialDesign:Chip Text="James Willock"
28+
Margin="0 0 6 4">
29+
<materialDesign:Chip.Icon>
30+
<Image Source="Resources/ProfilePic.jpg"></Image>
31+
</materialDesign:Chip.Icon>
32+
</materialDesign:Chip>
33+
<materialDesign:Chip Text="Example Chip"
34+
Margin="0 0 4 4" />
35+
<materialDesign:Chip Text="ANZ Bank"
36+
Icon="A"
37+
Margin="0 0 4 4" />
38+
<materialDesign:Chip Text="ZNA Inc"
39+
Icon="Z"
40+
IconBackground="{DynamicResource PrimaryHueMidBrush}"
41+
IconForeground="{DynamicResource PrimaryHueMidForegroundBrush}"
42+
Margin="0 0 4 4" />
43+
<materialDesign:Chip Text="Twitter"
44+
IconBackground="{DynamicResource PrimaryHueMidBrush}"
45+
IconForeground="{DynamicResource PrimaryHueMidForegroundBrush}"
46+
Margin="0 0 4 4">
47+
<materialDesign:Chip.Icon>
48+
<materialDesign:PackIcon Kind="Twitter"></materialDesign:PackIcon>
49+
</materialDesign:Chip.Icon>
50+
</materialDesign:Chip>
51+
</WrapPanel>
52+
<WrapPanel Margin="24" Orientation="Horizontal">
53+
<materialDesign:Chip Text="James Willock"
54+
IsDeletable="True"
55+
Margin="0 0 4 4"
56+
x:Name="ButtonsDemoChip"
57+
Click="ButtonsDemoChip_OnClick"
58+
DeleteClick="ButtonsDemoChip_OnDeleteClick"
59+
ToolTip="Just a tool tip"
60+
DeleteToolTip="Your friendly neighbour delete button"
61+
>
62+
<materialDesign:Chip.Icon>
63+
<Image Source="Resources/ProfilePic.jpg"></Image>
64+
</materialDesign:Chip.Icon>
65+
</materialDesign:Chip>
66+
<materialDesign:Chip Text="Example Chip"
67+
IsDeletable="True"
68+
ToolTip="This is an example chip"
69+
Margin="0 0 4 4">
70+
</materialDesign:Chip>
71+
<materialDesign:Chip Text="ANZ Bank"
72+
Icon="A"
73+
IsDeletable="True"
74+
Margin="0 0 4 4" />
75+
<materialDesign:Chip Text="ZNA Inc"
76+
Icon="Z"
77+
IsDeletable="True"
78+
IconBackground="{DynamicResource PrimaryHueMidBrush}"
79+
IconForeground="{DynamicResource PrimaryHueMidForegroundBrush}"
80+
Margin="0 0 4 4" />
81+
</WrapPanel>
2782
</StackPanel>
2883

2984
</UserControl>

‎MainDemo.Wpf/ProvingGround.xaml.cs

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,16 @@ private void Button_Click(object sender, RoutedEventArgs e)
3535
System.Diagnostics.Process.Start("https://twitter.com/James_Willock");
3636

3737
}
38+
39+
private void ButtonsDemoChip_OnClick(object sender, RoutedEventArgs e)
40+
{
41+
Console.WriteLine("Chip clicked.");
42+
}
43+
44+
private void ButtonsDemoChip_OnDeleteClick(object sender, RoutedEventArgs e)
45+
{
46+
Console.WriteLine("Chip delete clicked.");
47+
}
3848
}
3949

4050
public class ProvingGroundViewModel : INotifyPropertyChanged

‎MaterialDesignThemes.Wpf/Chip.cs

Lines changed: 97 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,24 @@
11
using System;
22
using System.Collections.Generic;
3+
using System.ComponentModel;
34
using System.Linq;
45
using System.Text;
56
using System.Threading.Tasks;
67
using System.Windows;
78
using System.Windows.Controls;
9+
using System.Windows.Controls.Primitives;
10+
using System.Windows.Input;
11+
using System.Windows.Media;
812

913
namespace MaterialDesignThemes.Wpf
1014
{
11-
public class Chip : Control
15+
[TemplatePart(Name = DeleteButtonPartName, Type = typeof(Button))]
16+
public class Chip : Button
1217
{
18+
private ButtonBase _deleteButton;
19+
20+
public const string DeleteButtonPartName = "PART_DeleteButton";
21+
1322
static Chip()
1423
{
1524
DefaultStyleKeyProperty.OverrideMetadata(typeof(Chip), new FrameworkPropertyMetadata(typeof(Chip)));
@@ -24,6 +33,24 @@ public object Icon
2433
set { SetValue(IconProperty, value); }
2534
}
2635

36+
public static readonly DependencyProperty IconBackgroundProperty = DependencyProperty.Register(
37+
"IconBackground", typeof (Brush), typeof (Chip), new PropertyMetadata(default(Brush)));
38+
39+
public Brush IconBackground
40+
{
41+
get { return (Brush) GetValue(IconBackgroundProperty); }
42+
set { SetValue(IconBackgroundProperty, value); }
43+
}
44+
45+
public static readonly DependencyProperty IconForegroundProperty = DependencyProperty.Register(
46+
"IconForeground", typeof (Brush), typeof (Chip), new PropertyMetadata(default(Brush)));
47+
48+
public Brush IconForeground
49+
{
50+
get { return (Brush) GetValue(IconForegroundProperty); }
51+
set { SetValue(IconForegroundProperty, value); }
52+
}
53+
2754
public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
2855
"Text", typeof (string), typeof (Chip), new PropertyMetadata(default(string)));
2956

@@ -36,10 +63,79 @@ public string Text
3663
public static readonly DependencyProperty IsDeletableProperty = DependencyProperty.Register(
3764
"IsDeletable", typeof (bool), typeof (Chip), new PropertyMetadata(default(bool)));
3865

66+
/// <summary>
67+
/// Indicates if the delete button should be visible.
68+
/// </summary>
3969
public bool IsDeletable
4070
{
4171
get { return (bool) GetValue(IsDeletableProperty); }
4272
set { SetValue(IsDeletableProperty, value); }
4373
}
74+
75+
public static readonly DependencyProperty DeleteCommandProperty = DependencyProperty.Register(
76+
"DeleteCommand", typeof (ICommand), typeof (Chip), new PropertyMetadata(default(ICommand)));
77+
78+
public ICommand DeleteCommand
79+
{
80+
get { return (ICommand) GetValue(DeleteCommandProperty); }
81+
set { SetValue(DeleteCommandProperty, value); }
82+
}
83+
84+
public static readonly DependencyProperty DeleteCommandParameterProperty = DependencyProperty.Register(
85+
"DeleteCommandParameter", typeof (object), typeof (Chip), new PropertyMetadata(default(object)));
86+
87+
public object DeleteCommandParameter
88+
{
89+
get { return (object) GetValue(DeleteCommandParameterProperty); }
90+
set { SetValue(DeleteCommandParameterProperty, value); }
91+
}
92+
93+
public static readonly DependencyProperty DeleteToolTipProperty = DependencyProperty.Register(
94+
"DeleteToolTip", typeof (object), typeof (Chip), new PropertyMetadata(default(object)));
95+
96+
public object DeleteToolTip
97+
{
98+
get { return (object) GetValue(DeleteToolTipProperty); }
99+
set { SetValue(DeleteToolTipProperty, value); }
100+
}
101+
102+
/// <summary>
103+
/// Event correspond to delete button left mouse button click
104+
/// </summary>
105+
public static readonly RoutedEvent DeleteClickEvent = EventManager.RegisterRoutedEvent("DeleteClick", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(Chip));
106+
107+
/// <summary>
108+
/// Add / Remove DeleteClickEvent handler
109+
/// </summary>
110+
[Category("Behavior")]
111+
public event RoutedEventHandler DeleteClick { add { AddHandler(DeleteClickEvent, value); } remove { RemoveHandler(DeleteClickEvent, value); } }
112+
113+
public override void OnApplyTemplate()
114+
{
115+
if (_deleteButton != null)
116+
_deleteButton.Click -= DeleteButtonOnClick;
117+
118+
_deleteButton = GetTemplateChild(DeleteButtonPartName) as ButtonBase;
119+
if (_deleteButton != null)
120+
_deleteButton.Click += DeleteButtonOnClick;
121+
122+
base.OnApplyTemplate();
123+
}
124+
125+
protected virtual void OnDeleteClick()
126+
{
127+
var newEvent = new RoutedEventArgs(DeleteClickEvent, this);
128+
RaiseEvent(newEvent);
129+
130+
var command = DeleteCommand;
131+
if (command != null && command.CanExecute(DeleteCommandParameter))
132+
command.Execute(DeleteCommandParameter);
133+
}
134+
135+
private void DeleteButtonOnClick(object sender, RoutedEventArgs routedEventArgs)
136+
{
137+
OnDeleteClick();
138+
routedEventArgs.Handled = true;
139+
}
44140
}
45141
}

‎MaterialDesignThemes.Wpf/Themes/Generic.xaml

Lines changed: 66 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131

3232
<converters:BrushToRadialGradientBrushConverter x:Key="BrushToRadialGradientBrushConverter" />
3333
<converters:DrawerOffsetConverter x:Key="DrawerOffsetConverter" />
34+
<converters:NullableToVisibilityConverter x:Key="NullableToVisibilityConverter" />
3435

3536
<Style TargetType="{x:Type local:Ripple}">
3637
<Setter Property="RecognizesAccessKey" Value="True" />
@@ -398,19 +399,78 @@
398399
<Style TargetType="{x:Type local:Chip}">
399400
<Setter Property="Height" Value="32" />
400401
<Setter Property="HorizontalAlignment" Value="Left" />
402+
<Setter Property="FontSize" Value="13" />
403+
<Setter Property="Background" Value="#12000000" />
404+
<Setter Property="IconBackground" Value="#FF009587" />
405+
<Setter Property="IconForeground" Value="#FFfafafa" />
406+
<Setter Property="Cursor" Value="Hand" />
401407
<Setter Property="Template">
402408
<Setter.Value>
403409
<ControlTemplate TargetType="{x:Type local:Chip}">
404410
<Grid>
405-
<Border CornerRadius="16" Background="#12000000"></Border>
411+
<Grid.ColumnDefinitions>
412+
<ColumnDefinition Width="Auto" />
413+
<ColumnDefinition Width="*" />
414+
<ColumnDefinition Width="Auto" />
415+
</Grid.ColumnDefinitions>
416+
<Border CornerRadius="16" Background="{TemplateBinding Background}" Grid.ColumnSpan="3" />
417+
<ContentControl Content="{TemplateBinding Icon}"
418+
x:Name="IconControl"
419+
Background="{TemplateBinding IconBackground}"
420+
Foreground="{TemplateBinding IconForeground}"
421+
FontSize="17"
422+
FontWeight="Regular"
423+
Visibility="{TemplateBinding Icon, Converter={StaticResource NullVisibilityConverter}}"
424+
VerticalAlignment="Center"
425+
VerticalContentAlignment="Center"
426+
HorizontalContentAlignment="Center"
427+
Height="32" Width="32">
428+
<ContentControl.Clip>
429+
<EllipseGeometry RadiusX="16" RadiusY="16" Center="16,16" />
430+
</ContentControl.Clip>
431+
<ContentControl.Template>
432+
<ControlTemplate TargetType="ContentControl">
433+
<Border Background="{TemplateBinding Background}">
434+
<ContentPresenter Content="{TemplateBinding Content}"
435+
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
436+
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
437+
</Border>
438+
</ControlTemplate>
439+
</ContentControl.Template>
440+
</ContentControl>
406441
<TextBlock Text="{TemplateBinding Text}"
442+
x:Name="TextBlock"
407443
VerticalAlignment="Center"
408-
Margin="12 0 12 0" />
409-
<!-- button Bg #89000000 -->
410-
<!--
411-
<Button></Button>
412-
-->
444+
Margin="8 0 12 0"
445+
Grid.Column="1"/>
446+
<Button Grid.Column="2" Visibility="{TemplateBinding IsDeletable, Converter={StaticResource BooleanToVisibilityConverter}}"
447+
x:Name="PART_DeleteButton"
448+
ToolTip="{TemplateBinding DeleteToolTip}"
449+
Margin="-6 0 8 0"
450+
VerticalAlignment="Center"
451+
Width="16" Height="16">
452+
<Button.Template>
453+
<ControlTemplate>
454+
<Grid>
455+
<Ellipse x:Name="Bg" Fill="#FFA6A6A6" Stroke="#FF009587" StrokeThickness="0" />
456+
<local:PackIcon Kind="Close" Width="12" Height="12"
457+
HorizontalAlignment="Center"
458+
VerticalAlignment="Center" />
459+
</Grid>
460+
<ControlTemplate.Triggers>
461+
<Trigger Property="IsMouseOver" Value="True">
462+
<Setter TargetName="Bg" Property="StrokeThickness" Value="1" />
463+
</Trigger>
464+
</ControlTemplate.Triggers>
465+
</ControlTemplate>
466+
</Button.Template>
467+
</Button>
413468
</Grid>
469+
<ControlTemplate.Triggers>
470+
<Trigger SourceName="IconControl" Property="Visibility" Value="Collapsed">
471+
<Setter TargetName="TextBlock" Property="Margin" Value="12 0 12 0" />
472+
</Trigger>
473+
</ControlTemplate.Triggers>
414474
</ControlTemplate>
415475
</Setter.Value>
416476
</Setter>

0 commit comments

Comments
 (0)