Skip to content

Commit

Permalink
looks like v1 of chips
Browse files Browse the repository at this point in the history
  • Loading branch information
@ButchersBoy
ButchersBoy committed Apr 8, 2016
1 parent 2cd22c6 commit 96e7c70
Show file tree
Hide file tree
Showing 11 changed files with 268 additions and 114 deletions.
2 changes: 1 addition & 1 deletion MainDemo.Wpf/App.xaml
View file
@@ -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>
Expand Down
62 changes: 61 additions & 1 deletion MainDemo.Wpf/Chips.xaml
View file
Expand Up @@ -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>
11 changes: 11 additions & 0 deletions MainDemo.Wpf/Chips.xaml.cs
View file
Expand Up @@ -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.");
}

}
}
5 changes: 5 additions & 0 deletions MainDemo.Wpf/MainWindow.xaml
View file
Expand Up @@ -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 />
Expand Down
34 changes: 16 additions & 18 deletions MainDemo.Wpf/ProvingGround.xaml
View file
Expand Up @@ -24,33 +24,31 @@

<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>
</materialDesign:Chip.Icon>
</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"
Expand All @@ -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>
Expand Down
13 changes: 2 additions & 11 deletions MaterialDesignThemes.Wpf/Chip.cs
View file
Expand Up @@ -13,7 +13,7 @@
namespace MaterialDesignThemes.Wpf
{
[TemplatePart(Name = DeleteButtonPartName, Type = typeof(Button))]
public class Chip : Button
public class Chip : ButtonBase
{
private ButtonBase _deleteButton;

Expand Down Expand Up @@ -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)));

Expand Down Expand Up @@ -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>
Expand Down
4 changes: 4 additions & 0 deletions MaterialDesignThemes.Wpf/MaterialDesignThemes.Wpf.csproj
View file
Expand Up @@ -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>
Expand Down
84 changes: 2 additions & 82 deletions MaterialDesignThemes.Wpf/Themes/Generic.xaml
View file
Expand Up @@ -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" />
Expand All @@ -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" />
Expand Down Expand Up @@ -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}" />
Expand Down

0 comments on commit 96e7c70

Please sign in to comment.