Skip to content

Commit c47fd67

Browse files
ButchersBoyButchersBoy
committed
first cut at badges
1 parent fcf3e08 commit c47fd67

File tree

6 files changed

+235
-65
lines changed

6 files changed

+235
-65
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: 3 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -49,71 +49,10 @@
4949
<ColumnDefinition />
5050
<ColumnDefinition />
5151
</Grid.ColumnDefinitions>
52-
<Border BorderThickness="2" BorderBrush="Black">
53-
<materialDesign:Plane3D HorizontalAlignment="Left" VerticalAlignment="Top">
54-
<materialDesign:Card>
55-
<Border Width="{Binding ElementName=MyCardContent, Path=ActualWidth}" Height="{Binding ElementName=MyCardContent, Path=ActualHeight}">
56-
<Border.Background>
57-
<VisualBrush Visual="{Binding ElementName=MyCardContent}" Stretch="None"/>
58-
</Border.Background>
59-
</Border>
60-
</materialDesign:Card>
61-
</materialDesign:Plane3D>
62-
</Border>
63-
64-
65-
<Border BorderThickness="2" BorderBrush="Green" Grid.Column="1">
66-
<materialDesign:Flipper>
67-
<materialDesign:Flipper.FrontContent>
68-
<materialDesign:Card Width="220">
69-
<Grid>
70-
<Grid.RowDefinitions>
71-
<RowDefinition Height="Auto" />
72-
<RowDefinition Height="100" />
73-
</Grid.RowDefinitions>
74-
<Image Source="Resources/Contact.png" Height="180" Stretch="UniformToFill"/>
75-
<Button Grid.Row="1" Style="{StaticResource MaterialDesignFlatButton}"
76-
Command="{x:Static materialDesign:Flipper.FlipCommand}"
77-
HorizontalAlignment="Center" VerticalAlignment="Center">
78-
<StackPanel Orientation="Horizontal">
79-
<materialDesign:PackIcon Kind="Rotate3d" />
80-
<TextBlock Margin="8 0 0 0">FLIPPABLZ!</TextBlock>
81-
</StackPanel>
82-
</Button>
83-
</Grid>
84-
</materialDesign:Card>
85-
</materialDesign:Flipper.FrontContent>
86-
<materialDesign:Flipper.BackContent>
87-
<materialDesign:Card Width="220" Height="280">
88-
<Button Style="{StaticResource MaterialDesignFlatButton}"
89-
Command="{x:Static materialDesign:Flipper.FlipCommand}"
90-
Margin="8">
91-
<StackPanel Orientation="Horizontal">
92-
<materialDesign:PackIcon Kind="ArrowLeft" />
93-
<TextBlock Margin="8 0 0 0">FLIP BACK</TextBlock>
94-
</StackPanel>
95-
</Button>
96-
</materialDesign:Card>
97-
</materialDesign:Flipper.BackContent>
98-
</materialDesign:Flipper>
99-
</Border>
10052

101-
<materialDesign:Card Width="220" Grid.Column="2">
102-
<Grid>
103-
<Grid.RowDefinitions>
104-
<RowDefinition Height="Auto" />
105-
<RowDefinition Height="100" />
106-
</Grid.RowDefinitions>
107-
<Image Source="Resources/Contact.png" Height="180" Stretch="UniformToFill"/>
108-
<Button Grid.Row="1" Style="{StaticResource MaterialDesignFlatButton}"
109-
HorizontalAlignment="Center" VerticalAlignment="Center">
110-
<StackPanel Orientation="Horizontal">
111-
<materialDesign:PackIcon Kind="Rotate3d" />
112-
<TextBlock Margin="8 0 0 0">FLIP ME!</TextBlock>
113-
</StackPanel>
114-
</Button>
115-
</Grid>
116-
</materialDesign:Card>
53+
<materialDesign:Badged Margin="64" Badge="3">
54+
<Button>MAIL</Button>
55+
</materialDesign:Badged>
11756

11857
</Grid>
11958
</UserControl>

‎MaterialDesignThemes.Wpf/Badged.cs

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
using System.Windows;
7+
using System.Windows.Controls;
8+
using System.Windows.Data;
9+
using System.Windows.Documents;
10+
using System.Windows.Input;
11+
using System.Windows.Media;
12+
using System.Windows.Media.Imaging;
13+
using System.Windows.Navigation;
14+
using System.Windows.Shapes;
15+
using System.Windows.Threading;
16+
17+
namespace MaterialDesignThemes.Wpf
18+
{
19+
public enum BadgePlacementMode
20+
{
21+
TopLeft,
22+
Top,
23+
TopRight,
24+
Right,
25+
BottomRight,
26+
Bottom,
27+
BottomLeft,
28+
Left
29+
}
30+
31+
[TemplatePart(Name = BadgeContainerPartName, Type = typeof(UIElement))]
32+
public class Badged : ContentControl
33+
{
34+
public const string BadgeContainerPartName = "PART_BadgeContainer";
35+
36+
static Badged()
37+
{
38+
DefaultStyleKeyProperty.OverrideMetadata(typeof(Badged), new FrameworkPropertyMetadata(typeof(Badged)));
39+
}
40+
41+
public static readonly DependencyProperty BadgeProperty = DependencyProperty.Register(
42+
"Badge", typeof(object), typeof(Badged), new FrameworkPropertyMetadata(default(object), FrameworkPropertyMetadataOptions.AffectsArrange));
43+
44+
public object Badge
45+
{
46+
get { return (object) GetValue(BadgeProperty); }
47+
set { SetValue(BadgeProperty, value); }
48+
}
49+
50+
public static readonly DependencyProperty BadgeBackgroundProperty = DependencyProperty.Register(
51+
"BadgeBackground", typeof(Brush), typeof(Badged), new PropertyMetadata(default(Brush)));
52+
53+
public Brush BadgeBackground
54+
{
55+
get { return (Brush) GetValue(BadgeBackgroundProperty); }
56+
set { SetValue(BadgeBackgroundProperty, value); }
57+
}
58+
59+
public static readonly DependencyProperty BadgeForegroundProperty = DependencyProperty.Register(
60+
"BadgeForeground", typeof(Brush), typeof(Badged), new PropertyMetadata(default(Brush)));
61+
62+
public Brush BadgeForeground
63+
{
64+
get { return (Brush) GetValue(BadgeForegroundProperty); }
65+
set { SetValue(BadgeForegroundProperty, value); }
66+
}
67+
68+
public static readonly DependencyProperty BadgeColorZoneModeProperty = DependencyProperty.Register(
69+
"BadgeColorZoneMode", typeof(ColorZoneMode), typeof(Badged), new PropertyMetadata(default(ColorZoneMode)));
70+
71+
public ColorZoneMode BadgeColorZoneMode
72+
{
73+
get { return (ColorZoneMode) GetValue(BadgeColorZoneModeProperty); }
74+
set { SetValue(BadgeColorZoneModeProperty, value); }
75+
}
76+
77+
public static readonly DependencyProperty BadgePlacementModeProperty = DependencyProperty.Register(
78+
"BadgePlacementMode", typeof(BadgePlacementMode), typeof(Badged), new PropertyMetadata(default(BadgePlacementMode)));
79+
80+
private FrameworkElement _badgeContainer;
81+
82+
public BadgePlacementMode BadgePlacementMode
83+
{
84+
get { return (BadgePlacementMode) GetValue(BadgePlacementModeProperty); }
85+
set { SetValue(BadgePlacementModeProperty, value); }
86+
}
87+
88+
public override void OnApplyTemplate()
89+
{
90+
base.OnApplyTemplate();
91+
92+
_badgeContainer = GetTemplateChild(BadgeContainerPartName) as FrameworkElement;
93+
}
94+
95+
protected override Size ArrangeOverride(Size arrangeBounds)
96+
{
97+
var result = base.ArrangeOverride(arrangeBounds);
98+
99+
if (_badgeContainer == null) return result;
100+
101+
var containerDesiredSize = _badgeContainer.DesiredSize;
102+
if ((containerDesiredSize.Width == 0.0 || containerDesiredSize.Height == 0.0)
103+
&& !double.IsNaN(_badgeContainer.ActualWidth) && !double.IsInfinity(_badgeContainer.ActualWidth)
104+
&& !double.IsNaN(_badgeContainer.ActualHeight) && !double.IsInfinity(_badgeContainer.ActualHeight))
105+
{
106+
containerDesiredSize = new Size(_badgeContainer.ActualWidth, _badgeContainer.ActualHeight);
107+
}
108+
109+
var h = 0 - containerDesiredSize.Width / 2;
110+
var v = 0 - containerDesiredSize.Height / 2;
111+
_badgeContainer.Margin = new Thickness(0);
112+
_badgeContainer.Margin = new Thickness(h, v, h, v);
113+
114+
return result;
115+
}
116+
}
117+
}

‎MaterialDesignThemes.Wpf/MaterialDesignThemes.Wpf.csproj

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,10 @@
7474
<Generator>MSBuild:Compile</Generator>
7575
<SubType>Designer</SubType>
7676
</Page>
77+
<Page Include="Themes\MaterialDesignTheme.Badged.xaml">
78+
<SubType>Designer</SubType>
79+
<Generator>MSBuild:Compile</Generator>
80+
</Page>
7781
<Page Include="Themes\MaterialDesignTheme.Calendar.xaml">
7882
<SubType>Designer</SubType>
7983
<Generator>MSBuild:Compile</Generator>
@@ -240,6 +244,7 @@
240244
</Page>
241245
</ItemGroup>
242246
<ItemGroup>
247+
<Compile Include="Badged.cs" />
243248
<Compile Include="Card.cs" />
244249
<Compile Include="Chip.cs" />
245250
<Compile Include="Clock.cs" />

‎MaterialDesignThemes.Wpf/Themes/Generic.xaml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
MaterialDesignTheme.Defaults.xaml
1717
in your App.xaml
1818
-->
19+
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Badged.xaml" />
1920
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Card.xaml" />
2021
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Chip.xaml" />
2122
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Clock.xaml" />

‎MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Badged.xaml

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
2+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3+
xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf">
4+
5+
<Style TargetType="{x:Type wpf:Badged}">
6+
<Setter Property="HorizontalAlignment" Value="Left" />
7+
<Setter Property="VerticalAlignment" Value="Top" />
8+
<Setter Property="BadgeColorZoneMode" Value="PrimaryLight" />
9+
<Setter Property="BadgePlacementMode" Value="TopRight" />
10+
<Setter Property="Template">
11+
<Setter.Value>
12+
<ControlTemplate TargetType="{x:Type wpf:Badged}">
13+
<Grid>
14+
<Border Background="{TemplateBinding Background}"
15+
BorderBrush="{TemplateBinding BorderBrush}"
16+
BorderThickness="{TemplateBinding BorderThickness}">
17+
<ContentPresenter Content="{TemplateBinding Content}"
18+
ContentStringFormat="{TemplateBinding ContentStringFormat}"
19+
ContentTemplate="{TemplateBinding ContentTemplate}"
20+
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
21+
Margin="{TemplateBinding Padding}"
22+
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
23+
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
24+
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
25+
</Border>
26+
<Border x:Name="PART_BadgeContainer"
27+
CornerRadius="9" Background="{TemplateBinding BadgeBackground}"
28+
MinWidth="18" MinHeight="18"
29+
HorizontalAlignment="Left" VerticalAlignment="Top" Padding="2">
30+
<ContentControl Foreground="{TemplateBinding BadgeForeground}"
31+
HorizontalAlignment="Center" VerticalAlignment="Center"
32+
Content="{TemplateBinding Badge}" />
33+
</Border>
34+
</Grid>
35+
<ControlTemplate.Triggers>
36+
<Trigger Property="BadgePlacementMode" Value="TopLeft">
37+
<Setter TargetName="PART_BadgeContainer" Property="HorizontalAlignment" Value="Left" />
38+
<Setter TargetName="PART_BadgeContainer" Property="VerticalAlignment" Value="Top" />
39+
</Trigger>
40+
<Trigger Property="BadgePlacementMode" Value="Top">
41+
<Setter TargetName="PART_BadgeContainer" Property="HorizontalAlignment" Value="Center" />
42+
<Setter TargetName="PART_BadgeContainer" Property="VerticalAlignment" Value="Top" />
43+
</Trigger>
44+
<Trigger Property="BadgePlacementMode" Value="TopRight">
45+
<Setter TargetName="PART_BadgeContainer" Property="HorizontalAlignment" Value="Right" />
46+
<Setter TargetName="PART_BadgeContainer" Property="VerticalAlignment" Value="Top" />
47+
</Trigger>
48+
<Trigger Property="BadgePlacementMode" Value="Right">
49+
<Setter TargetName="PART_BadgeContainer" Property="HorizontalAlignment" Value="Right" />
50+
<Setter TargetName="PART_BadgeContainer" Property="VerticalAlignment" Value="Center" />
51+
</Trigger>
52+
<Trigger Property="BadgePlacementMode" Value="BottomRight">
53+
<Setter TargetName="PART_BadgeContainer" Property="HorizontalAlignment" Value="Right" />
54+
<Setter TargetName="PART_BadgeContainer" Property="VerticalAlignment" Value="Bottom" />
55+
</Trigger>
56+
<Trigger Property="BadgePlacementMode" Value="Bottom">
57+
<Setter TargetName="PART_BadgeContainer" Property="HorizontalAlignment" Value="Center" />
58+
<Setter TargetName="PART_BadgeContainer" Property="VerticalAlignment" Value="Bottom" />
59+
</Trigger>
60+
<Trigger Property="BadgePlacementMode" Value="BottomLeft">
61+
<Setter TargetName="PART_BadgeContainer" Property="HorizontalAlignment" Value="Left" />
62+
<Setter TargetName="PART_BadgeContainer" Property="VerticalAlignment" Value="Bottom" />
63+
</Trigger>
64+
<Trigger Property="BadgePlacementMode" Value="Left">
65+
<Setter TargetName="PART_BadgeContainer" Property="HorizontalAlignment" Value="Left" />
66+
<Setter TargetName="PART_BadgeContainer" Property="VerticalAlignment" Value="Center" />
67+
</Trigger>
68+
</ControlTemplate.Triggers>
69+
</ControlTemplate>
70+
</Setter.Value>
71+
</Setter>
72+
<Style.Triggers>
73+
<Trigger Property="BadgeColorZoneMode" Value="Standard">
74+
<Setter Property="BadgeBackground" Value="{DynamicResource MaterialDesignPaper}" />
75+
<Setter Property="BadgeForeground" Value="{DynamicResource MaterialDesignBody}" />
76+
</Trigger>
77+
<Trigger Property="BadgeColorZoneMode" Value="Inverted">
78+
<Setter Property="BadgeBackground" Value="{DynamicResource MaterialDesignBody}" />
79+
<Setter Property="BadgeForeground" Value="{DynamicResource MaterialDesignPaper}" />
80+
</Trigger>
81+
<Trigger Property="BadgeColorZoneMode" Value="PrimaryLight">
82+
<Setter Property="BadgeBackground" Value="{DynamicResource PrimaryHueLightBrush}" />
83+
<Setter Property="BadgeForeground" Value="{DynamicResource PrimaryHueLightForegroundBrush}" />
84+
</Trigger>
85+
<Trigger Property="BadgeColorZoneMode" Value="PrimaryMid">
86+
<Setter Property="BadgeBackground" Value="{DynamicResource PrimaryHueMidBrush}" />
87+
<Setter Property="BadgeForeground" Value="{DynamicResource PrimaryHueMidForegroundBrush}" />
88+
</Trigger>
89+
<Trigger Property="BadgeColorZoneMode" Value="PrimaryDark">
90+
<Setter Property="BadgeBackground" Value="{DynamicResource PrimaryHueDarkBrush}" />
91+
<Setter Property="BadgeForeground" Value="{DynamicResource PrimaryHueDarkForegroundBrush}" />
92+
</Trigger>
93+
<Trigger Property="BadgeColorZoneMode" Value="Accent">
94+
<Setter Property="BadgeBackground" Value="{DynamicResource SecondaryAccentBrush}" />
95+
<Setter Property="BadgeForeground" Value="{DynamicResource SecondaryAccentForegroundBrush}" />
96+
</Trigger>
97+
<Trigger Property="BadgeColorZoneMode" Value="Light">
98+
<Setter Property="BadgeBackground" Value="{DynamicResource MaterialDesignLightBackground}" />
99+
<Setter Property="BadgeForeground" Value="{DynamicResource MaterialDesignLightForeground}" />
100+
</Trigger>
101+
<Trigger Property="BadgeColorZoneMode" Value="Dark">
102+
<Setter Property="BadgeBackground" Value="{DynamicResource MaterialDesignDarkBackground}" />
103+
<Setter Property="BadgeForeground" Value="{DynamicResource MaterialDesignDarkForeground}" />
104+
</Trigger>
105+
</Style.Triggers>
106+
</Style>
107+
108+
</ResourceDictionary>

0 commit comments

Comments
 (0)