Adding the Notification Bell to your Custom LaunchBox Themes

[faeran]

The Notification Bell is highly customizable and can be themed to match your overall aesthetic. This post is to allow you to add the same notification bell that appears in the default theme.

Open your theme's MainView.xaml file and do the following:

Step 1: Add the following namespaces (if missing):

xmlns:converter="clr-namespace:Unbroken.LaunchBox.Windows.Converters;assembly=Unbroken.LaunchBox.Windows"
xmlns:dsktp="clr-namespace:Unbroken.LaunchBox.Windows.Desktop.Controls;assembly=LaunchBox" 

Step 2: Add the MultiplyBy converter to the <Window.Resources> section:

<converter:MultiplyByConverter x:Key="MultiplyByConverter" />

Step 3: Add the Notification Bell code and place it anywhere in the layout you prefer:

<dsktp:NotificationsButton x:Name="Notifications" Margin="5,1,20,0" Background="Transparent" BorderThickness="0" Focusable="True" Opacity="1.0" FocusVisualStyle="{x:Null}" RenderTransformOrigin="0.5,0">
	<Button.Style>
		<Style TargetType="{x:Type dsktp:NotificationsButton}">
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type dsktp:NotificationsButton}">
						<Grid x:Name="Grid" Margin="0,0" Background="Transparent" RenderTransformOrigin="0.5,0">
							<Grid.RenderTransform>
								<RotateTransform Angle="0"/>
							</Grid.RenderTransform>
							<Path x:Name="Bell" Fill="White" Opacity="0.4" Stretch="Fill" Height="16" Width="13" Margin="10,0" HorizontalAlignment="Center" Data="M48.3149 52.2484C33.7174 56.3509 18.2721 56.3542 3.67282 52.2581C-0.942449 50.9544 0.212581 43.9029 5.14011 44.3187V29.1341C5.14011 1.59404 46.8598 1.60711 46.8598 29.1341V44.3138C51.7777 43.9008 52.9548 50.9731 48.3149 52.2484ZM19.22 57.0542C19.6841 58.4892 20.5912 59.74 21.8111 60.6268C23.0309 61.5137 24.5005 61.9909 26.0086 61.9898C27.5168 61.9886 28.9857 61.5093 30.2042 60.6207C31.4227 59.732 32.3281 58.4799 32.79 57.0442C28.2739 57.4026 23.7366 57.406 19.22 57.0542ZM32.72 7.28421C32.72 -2.41542 19.28 -2.41704 19.28 7.29421C23.3292 5.67256 28.4697 6.22163 32.72 7.28421Z"/>
							<Path x:Name="Overlay" Fill="White" Opacity="0" Stretch="Fill" Height="16" Width="13" Margin="10,0" HorizontalAlignment="Center" Data="M50.3149 52.2484C35.7174 56.3509 20.2721 56.3542 5.67282 52.2581C1.05755 50.9544 2.21258 43.9029 7.14011 44.3187V29.1341C7.14011 1.59404 48.8598 1.60711 48.8598 29.1341V44.3138C53.7777 43.9008 54.9548 50.9731 50.3149 52.2484ZM21.22 57.0542C21.6841 58.4892 22.5912 59.74 23.8111 60.6268C25.0309 61.5137 26.5005 61.9909 28.0086 61.9898C29.5168 61.9886 30.9857 61.5093 32.2042 60.6207C33.4227 59.732 34.328 58.4799 34.79 57.0442C30.2739 57.4026 25.7366 57.406 21.22 57.0542ZM34.72 7.28421C34.72 -2.41542 21.28 -2.41704 21.28 7.29421C25.3292 5.67256 30.4697 6.22163 34.72 7.28421ZM55.7529 21.6878C54.1011 15.6596 50.3803 10.405 45.2426 6.84504C45.0245 6.69659 44.7565 6.64032 44.4971 6.68851C44.2377 6.73669 44.0078 6.88541 43.8575 7.10229C43.7072 7.31917 43.6487 7.58665 43.6946 7.84648C43.7406 8.10631 43.8874 8.33745 44.103 8.48958C48.8542 11.7806 52.2954 16.6391 53.8232 22.2132C53.8946 22.4672 54.0634 22.6827 54.2929 22.8127C54.5225 22.9428 54.7941 22.9769 55.0486 22.9076C55.3032 22.8383 55.52 22.6712 55.6519 22.4427C55.7839 22.2143 55.8201 21.9429 55.7529 21.6878ZM11.8969 8.48958C12.1125 8.33745 12.2593 8.10631 12.3053 7.84648C12.3513 7.58665 12.2928 7.31917 12.1425 7.10229C11.9922 6.88541 11.7623 6.73669 11.5028 6.68851C11.2434 6.64032 10.9754 6.69659 10.7573 6.84504C5.61964 10.405 1.89882 15.6596 0.246998 21.6878C0.179755 21.9429 0.216042 22.2143 0.347954 22.4427C0.479867 22.6712 0.696716 22.8383 0.951265 22.9076C1.20581 22.9769 1.47744 22.9428 1.70696 22.8127C1.93649 22.6827 2.10533 22.4672 2.17669 22.2132C3.70452 16.6391 7.1457 11.7806 11.8969 8.48958Z">
								<Path.Effect>
									<DropShadowEffect x:Name="DropShadow" Color="White" BlurRadius="55" ShadowDepth="0" Opacity="1.0" />
								</Path.Effect>
							</Path>
							<Grid x:Name="GridNotification" Opacity="0">
								<Border x:Name="Border" Height="12" Width="12" CornerRadius="6" Opacity="0" BorderThickness="1" BorderBrush="#232429" Background="#30DB72" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,5,5,0">
									<Viewbox Margin="-1,0,0,0">
										<TextBlock Text="{Binding ElementName=Notifications, Path=UnreadNotifications}" FontWeight="Bold" Foreground="#232429" HorizontalAlignment="Center" VerticalAlignment="Center" />
									</Viewbox>
								</Border>
							</Grid>
						</Grid>
						<ControlTemplate.Triggers>
							<DataTrigger Binding="{Binding Converter={StaticResource IsGreaterThan}, ConverterParameter='0', ElementName=Notifications, Path=UnreadNotifications}" Value="True">
								<Setter TargetName="Bell" Property="Opacity"  Value="0.7" />
							</DataTrigger>
							<MultiDataTrigger>
								<MultiDataTrigger.Conditions>
									<Condition Binding="{Binding ElementName=Grid, Path=IsMouseOver}" Value="True"/>
									<Condition Binding="{Binding Converter={StaticResource IsGreaterThan}, ConverterParameter='0', ElementName=Notifications, Path=UnreadNotifications}" Value="True"/>
								</MultiDataTrigger.Conditions>
								<Setter TargetName="Bell" Property="Opacity" Value="1.0"/>
							</MultiDataTrigger>
							<MultiDataTrigger>
								<MultiDataTrigger.Conditions>
									<Condition Binding="{Binding ElementName=Grid, Path=IsMouseOver}" Value="True"/>
									<Condition Binding="{Binding ElementName=Notifications, Path=UnreadNotifications}" Value="0"/>
								</MultiDataTrigger.Conditions>
								<Setter TargetName="Bell" Property="Opacity" Value="0.7"/>
							</MultiDataTrigger>
							<DataTrigger Binding="{Binding ElementName=Notifications, Path=UnreadNotifications}" Value="0">
								<DataTrigger.EnterActions>
									<StopStoryboard BeginStoryboardName="NotificationRaisedAnimation" />
								</DataTrigger.EnterActions>
							</DataTrigger>
							<EventTrigger RoutedEvent="NotificationRaised">
								<BeginStoryboard Name="NotificationRaisedAnimation">
									<Storyboard FillBehavior="HoldEnd">
										<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="(Grid.RenderTransform).(RotateTransform.Angle)" AutoReverse="True">
											<EasingDoubleKeyFrame KeyTime="0:0:0" Value="0">
												<EasingDoubleKeyFrame.EasingFunction>
													<SineEase EasingMode="EaseOut"/>
												</EasingDoubleKeyFrame.EasingFunction>
											</EasingDoubleKeyFrame>
											<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="10">
												<EasingDoubleKeyFrame.EasingFunction>
													<SineEase EasingMode="EaseOut"/>
												</EasingDoubleKeyFrame.EasingFunction>
											</EasingDoubleKeyFrame>
											<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-10">
												<EasingDoubleKeyFrame.EasingFunction>
													<SineEase EasingMode="EaseInOut"/>
												</EasingDoubleKeyFrame.EasingFunction>
											</EasingDoubleKeyFrame>
										</DoubleAnimationUsingKeyFrames>
										<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Overlay" Storyboard.TargetProperty="Opacity" AutoReverse="True">
											<EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
											<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
											<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
										</DoubleAnimationUsingKeyFrames>
										<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Opacity">
											<EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
											<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0"/>
											<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
										</DoubleAnimationUsingKeyFrames>
										<DoubleAnimation Storyboard.TargetName="GridNotification" Storyboard.TargetProperty="Opacity" Duration="0:0:0.2" To="1"/>
									</Storyboard>
								</BeginStoryboard>
							</EventTrigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</Button.Style>
</dsktp:NotificationsButton>

 

That's it. At this point you can optionally adjust the look of the Notification Bell to your liking.

If you would like to theme the way the notifications look, grab the following files from the Default theme and place them into your custom theme. Then open them up and theme to your hearts content:

• NotificationView.xaml - What each notification looks like
• NotificationListView.xaml - What the notification center looks like