Skip to content

Commit ff54e4d

Browse files
ButchersBoyButchersBoy
committed
badge animations
1 parent bfb5c9f commit ff54e4d

File tree

6 files changed

+95
-8
lines changed

6 files changed

+95
-8
lines changed

‎MainDemo.Wpf/Buttons.xaml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,12 @@
182182
BadgeColorZoneMode="Dark">
183183
<Button>STATUS</Button>
184184
</materialDesign:Badged>
185+
<materialDesign:Badged Margin="0 12 28 4"
186+
x:Name="CountingBadge"
187+
BadgeColorZoneMode="PrimaryDark">
188+
<Button Style="{StaticResource MaterialDesignRaisedLightButton}"
189+
Click="CountingButton_OnClick">CLICK ME!</Button>
190+
</materialDesign:Badged>
185191
<Button Content="{materialDesign:PackIcon AirplaneTakeoff}"
186192
Margin="0 12 8 4"
187193
ToolTip="Icon">

‎MainDemo.Wpf/Buttons.xaml.cs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,5 +49,16 @@ private void PopupBox_OnClosed(object sender, RoutedEventArgs e)
4949
{
5050
Console.WriteLine("Just making sure the popup has closed.");
5151
}
52+
53+
private void CountingButton_OnClick(object sender, RoutedEventArgs e)
54+
{
55+
if (CountingBadge.Badge == null || Equals(CountingBadge.Badge, ""))
56+
CountingBadge.Badge = 0;
57+
58+
var next = int.Parse(CountingBadge.Badge.ToString()) + 1;
59+
60+
CountingBadge.Badge = next < 21 ? (object)next : null;
61+
62+
}
5263
}
5364
}

‎MainDemo.Wpf/ProvingGround.xaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,8 @@
5050
<ColumnDefinition />
5151
</Grid.ColumnDefinitions>
5252

53-
<materialDesign:Badged Margin="32" Badge="3">
54-
<Button>MAIL</Button>
53+
<materialDesign:Badged Margin="64" Badge="" x:Name="Counter">
54+
<Button Click="CounterButton_OnClick">MAIL</Button>
5555
</materialDesign:Badged>
5656

5757
<materialDesign:Badged Margin="32" Badge="{materialDesign:PackIcon Kind=Heart}"

‎MainDemo.Wpf/ProvingGround.xaml.cs‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,15 @@ public ProvingGround()
3333
{
3434
SelectedTime = new DateTime(2000, 1, 1, 3, 15, 0)
3535
};
36-
}
36+
}
37+
38+
private void CounterButton_OnClick(object sender, RoutedEventArgs e)
39+
{
40+
if (Counter.Badge == null || Equals(Counter.Badge, ""))
41+
Counter.Badge = 0;
42+
43+
Counter.Badge = int.Parse(Counter.Badge.ToString()) + 1;
44+
}
3745
}
3846

3947
public class ProvingGroundViewModel : INotifyPropertyChanged

‎MaterialDesignThemes.Wpf/Badged.cs‎

Lines changed: 42 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,15 @@ public enum BadgePlacementMode
2020
public class Badged : ContentControl
2121
{
2222
public const string BadgeContainerPartName = "PART_BadgeContainer";
23+
private FrameworkElement _badgeContainer;
2324

2425
static Badged()
2526
{
2627
DefaultStyleKeyProperty.OverrideMetadata(typeof(Badged), new FrameworkPropertyMetadata(typeof(Badged)));
2728
}
2829

2930
public static readonly DependencyProperty BadgeProperty = DependencyProperty.Register(
30-
"Badge", typeof(object), typeof(Badged), new FrameworkPropertyMetadata(default(object), FrameworkPropertyMetadataOptions.AffectsArrange));
31+
"Badge", typeof(object), typeof(Badged), new FrameworkPropertyMetadata(default(object), FrameworkPropertyMetadataOptions.AffectsArrange, OnBadgeChanged));
3132

3233
public object Badge
3334
{
@@ -63,16 +64,53 @@ public ColorZoneMode BadgeColorZoneMode
6364
}
6465

6566
public static readonly DependencyProperty BadgePlacementModeProperty = DependencyProperty.Register(
66-
"BadgePlacementMode", typeof(BadgePlacementMode), typeof(Badged), new PropertyMetadata(default(BadgePlacementMode)));
67-
68-
private FrameworkElement _badgeContainer;
67+
"BadgePlacementMode", typeof(BadgePlacementMode), typeof(Badged), new PropertyMetadata(default(BadgePlacementMode)));
6968

7069
public BadgePlacementMode BadgePlacementMode
7170
{
7271
get { return (BadgePlacementMode) GetValue(BadgePlacementModeProperty); }
7372
set { SetValue(BadgePlacementModeProperty, value); }
7473
}
7574

75+
public static readonly RoutedEvent BadgeChangedEvent =
76+
EventManager.RegisterRoutedEvent(
77+
"BadgeChanged",
78+
RoutingStrategy.Bubble,
79+
typeof(RoutedPropertyChangedEventHandler<object>),
80+
typeof(Badged));
81+
82+
public event RoutedPropertyChangedEventHandler<object> BadgeChanged
83+
{
84+
add { AddHandler(BadgeChangedEvent, value); }
85+
remove { RemoveHandler(BadgeChangedEvent, value); }
86+
}
87+
88+
private static readonly DependencyPropertyKey IsBadgeSetPropertyKey =
89+
DependencyProperty.RegisterReadOnly(
90+
"IsBadgeSet", typeof(bool), typeof(Badged),
91+
new PropertyMetadata(default(bool)));
92+
93+
public static readonly DependencyProperty IsBadgeSetProperty =
94+
IsBadgeSetPropertyKey.DependencyProperty;
95+
96+
public bool IsBadgeSet
97+
{
98+
get { return (bool) GetValue(IsBadgeSetProperty); }
99+
private set { SetValue(IsBadgeSetPropertyKey, value); }
100+
}
101+
102+
private static void OnBadgeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
103+
{
104+
var instance = (Badged)d;
105+
106+
instance.IsBadgeSet = !string.IsNullOrWhiteSpace(e.NewValue as string) || (e.NewValue != null && !(e.NewValue is string));
107+
108+
var args = new RoutedPropertyChangedEventArgs<object>(
109+
e.OldValue,
110+
e.NewValue) {RoutedEvent = BadgeChangedEvent};
111+
instance.RaiseEvent(args);
112+
}
113+
76114
public override void OnApplyTemplate()
77115
{
78116
base.OnApplyTemplate();

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

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
33
xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf">
44

5+
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
6+
<SineEase EasingMode="EaseOut" x:Key="BadgeEase" />
7+
58
<Style TargetType="{x:Type wpf:Badged}">
69
<Setter Property="HorizontalAlignment" Value="Left" />
710
<Setter Property="VerticalAlignment" Value="Top" />
@@ -28,20 +31,41 @@
2831
MinWidth="18" MinHeight="18"
2932
HorizontalAlignment="Left" VerticalAlignment="Top" Padding="2"
3033
TextElement.FontSize="11"
31-
TextElement.FontWeight="DemiBold">
34+
TextElement.FontWeight="DemiBold"
35+
RenderTransformOrigin=".5,.5"
36+
Visibility="{TemplateBinding IsBadgeSet, Converter={StaticResource BooleanToVisibilityConverter}}">
3237
<Border.Resources>
3338
<Style TargetType="wpf:PackIcon">
3439
<Setter Property="Width" Value="12" />
3540
<Setter Property="Height" Value="12" />
3641
</Style>
3742
</Border.Resources>
43+
<Border.RenderTransform>
44+
<ScaleTransform x:Name="BadgeScaleTransform" ScaleX="1" ScaleY="1" />
45+
</Border.RenderTransform>
3846
<ContentControl Foreground="{TemplateBinding BadgeForeground}"
3947
HorizontalAlignment="Center" VerticalAlignment="Center"
4048
Margin="1 0 1 0"
4149
Content="{TemplateBinding Badge}" />
4250
</Border>
4351
</Grid>
4452
<ControlTemplate.Triggers>
53+
<EventTrigger RoutedEvent="BadgeChanged">
54+
<EventTrigger.Actions>
55+
<BeginStoryboard>
56+
<Storyboard>
57+
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BadgeScaleTransform" Storyboard.TargetProperty="ScaleX">
58+
<EasingDoubleKeyFrame Value="1.4" KeyTime="0" />
59+
<EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.3" EasingFunction="{StaticResource BadgeEase}" />
60+
</DoubleAnimationUsingKeyFrames>
61+
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BadgeScaleTransform" Storyboard.TargetProperty="ScaleY">
62+
<EasingDoubleKeyFrame Value="1.4" KeyTime="0" />
63+
<EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.3" EasingFunction="{StaticResource BadgeEase}" />
64+
</DoubleAnimationUsingKeyFrames>
65+
</Storyboard>
66+
</BeginStoryboard>
67+
</EventTrigger.Actions>
68+
</EventTrigger>
4569
<Trigger Property="BadgePlacementMode" Value="TopLeft">
4670
<Setter TargetName="PART_BadgeContainer" Property="HorizontalAlignment" Value="Left" />
4771
<Setter TargetName="PART_BadgeContainer" Property="VerticalAlignment" Value="Top" />

0 commit comments

Comments
 (0)