I have a picture, I want to use it in WPF as a progressbar.
Please look at the image to understand this.
The code below, repeated the image.
The moving progress-box above the progressbar.
I have tried this
<ControlTemplate
x:Key="ImageProgressBarTemplate"
TargetType="ProgressBar">
<ControlTemplate.Triggers>
<EventTrigger
RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard
x:Name="str">
<RectAnimation
x:Name="quatanim"
Storyboard.TargetName="imgbrush"
Storyboard.TargetProperty="(ImageBrush.Viewport)"
From="0,0,36,36"
To="36,0,36,36"
Duration="0:0:5"
AutoReverse="False"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
<!-- Custom progress bar goes here -->
<Border
Name="PART_Track"
Width="{TemplateBinding Width}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Height="{TemplateBinding Height}"
CornerRadius="0"
Padding="1.5">
<Grid>
<!-- Rounded mask (stretches to fill Grid) -->
<Border
Name="mask"
Background="#EEEEEE"
CornerRadius="0" />
<!-- Any content -->
<Rectangle
Name="PART_Indicator"
HorizontalAlignment="Left"
Height="{TemplateBinding Height}">
<Rectangle.OpacityMask>
<VisualBrush
Visual="{Binding ElementName=mask}" />
</Rectangle.OpacityMask>
<Rectangle.Fill>
<ImageBrush
x:Name="imgbrush"
ImageSource="/myproject;component/Assets/myimage.png"
AlignmentX="Left"
Stretch="Fill"
TileMode="Tile"
AlignmentY="Top"
ViewportUnits="Absolute"
Viewport="0,0,36,36"
ViewboxUnits="RelativeToBoundingBox"
Viewbox="0,0,1,1">
</ImageBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Border>
<ProgressBar Template="{StaticResource ImageProgressBarTemplate}"/>
The all that I need is a detailed tutorial of how to use image in wpf progressbar for this kind of images.
You have to design your own template of progressbar.
<ControlTemplate TargetType="ProgressBar">
<Canvas>
<ProgressBar x:Name="pgbar" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
Value="{TemplateBinding Value}"
Minimum="{TemplateBinding Minimum}"
Maximum="{TemplateBinding Maximum}"/>
<Image Source="image.PNG" Canvas.Left="{TemplateBinding Value}">
<Image.RenderTransform>
<!-- width / 2 and height /2-->
<TranslateTransform X="-56" Y="-25"/>
</Image.RenderTransform>
</Image>
</Canvas>
</ControlTemplate>
An improvement for the answer of Klaus Fischer:
Here is the ProgressBar:
<ProgressBar Value="{Binding ProgressbarValue}" Template="{StaticResource Progressbar2}" />
And here is the template (See post of Klaus Fischer):
<ControlTemplate x:Key="Progressbar2" TargetType="ProgressBar">
<Canvas >
<ProgressBar x:Name="pgbar" Visibility="Hidden" Width="{Binding ElementName=StatusGrid,Path=ActualWidth}" Background="Transparent" Value="{TemplateBinding Value}" />
<Image Source="Resources/Images/running.png" Height="42px" Canvas.Left="{TemplateBinding Value, Converter={StaticResource WidthConverter}, ConverterParameter={x:Reference pgbar}}" />
</Canvas>
</ControlTemplate>
As you can see, there is a converter in the
Canvas.Left
property.
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var bar = ((System.Windows.Controls.ProgressBar) parameter);
var percentPixe = bar.ActualWidth/100;
return percentPixe*(double) value-42;
}
The expression
value-42
handles the size of the image, otherwise the image would be in front of the real ProgressBar.
This should do the job.
Related
I am using UWP Community Toolkit to create blur as following:
<Grid x:Name="gridContent" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<interactivity:Interaction.Behaviors>
<behaviors:Blur x:Name="BlurBehavior"
Value="0"
Duration="0"
Delay="0"
AutomaticallyStart="True"/>
</interactivity:Interaction.Behaviors>
</Grid>
And this works just fine for the whole grid.
But, my problem is now that there is a listview in this grid, and I want to make custom header in that listview that will be semi transparent, and I want just content under that header to be blurred. So the content under that header will be dynamically changed.
Does anyone know how to achieve this?
Use Blur in a separate grid inside your content grid
Here is a code sample
<Grid Name="MainGrid">
<ListView>
....
</ListView>
<Grid VerticalAlignment="Top" HorizontalAlignment="Stretch">
<interactivity:Interaction.Behaviors>
<behaviors:Blur Value="25" Duration="0" Delay="0" AutomaticallyStart="True"/>
</interactivity:Interaction.Behaviors>
<!-- If you want color shade -->
<Grid.Background>
<SolidColorBrush Color="Red" Opacity="0.5"/>
</Grid.Background>
</Grid>
</Grid>
For more info refer UWP Hamburger Menu with Frosted glass effect
By default, the Header of the ListView is scrollable along with the content. A more elegant solution would be to extract the header template to be outside of the ScrollViewer and blur it. Note you will need to give the content a padding to give space to the header initially, and the top padding value should be equal to the height of the header.
You can do everything within a style -
<Application.Resources>
<x:Double x:Key="ListViewHeaderHeight">200</x:Double>
<Thickness x:Key="ListViewContentMargin" Top="{StaticResource ListViewHeaderHeight}"></Thickness>
<Style x:Key="BlurredHeaderListViewStyle" TargetType="ListView">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<Grid BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
<ItemsPresenter Margin="{StaticResource ListViewContentMargin}" FooterTransitions="{TemplateBinding FooterTransitions}" FooterTemplate="{TemplateBinding FooterTemplate}" Footer="{TemplateBinding Footer}" HeaderTransitions="{TemplateBinding HeaderTransitions}" Padding="{TemplateBinding Padding}"/>
</ScrollViewer>
<ContentPresenter x:Name="HeaderPresenter" Background="Transparent" Height="{StaticResource ListViewHeaderHeight}" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" VerticalAlignment="Top">
<interactivity:Interaction.Behaviors>
<behaviors:Blur x:Name="BlurBehavior" Value="12" />
</interactivity:Interaction.Behaviors>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
Now you just apply the style to any ListView you want -
<ListView Style="{StaticResource BlurredHeaderListViewStyle}">
<ListView.HeaderTemplate>
<DataTemplate>
<sampleapp:CustomHeader />
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Result
I'm changing the Standard WPF Slider's template. And I want it where you move your mouse over the area the slider occupies and the thumb starts an animation to change its size, even if the cursor isn't directly on top of the thumb.
But I don't know how to bind to a parent like that.
I'll try to post what I got without making it look nasty. Here's what I got that's relevant (I think. If you need more, tell me)
<ControlTemplate x:Key="SliderHorizontal" TargetType="{x:Type Slider}" x:Name="SliderHorizontal">
<Track x:Name="PART_Track" Grid.Row="1">
<Track.DecreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource LeftRepeatButtonTransparent}">
</RepeatButton>
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource RightRepeatButtonTransparent}"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="Thumb" Focusable="False" Height="20" OverridesDefaultStyle="True" Template="{StaticResource SliderThumbHorizontalDefault}" VerticalAlignment="Center" Width="Auto" Margin="0,0,-5.5,0">
</Thumb>
</Track.Thumb>
</Track>
</Grid>
</Border>
<ControlTemplate.Triggers>
triggers galore
</ControlTemplate.Triggers>
</ControlTemplate>
And here is the template for the thumb itself. It's the ellipse grip I want to change the size of.
<ControlTemplate x:Key="SliderThumbHorizontalDefault" TargetType="{x:Type Thumb}">
<Ellipse x:Name="grip" Fill="White" Height="15" Width="15" Effect="{StaticResource z-depth1}">
</Ellipse>
<ControlTemplate.Triggers>
more triggers
</ControlTemplate.Triggers>
</ControlTemplate>
How would I go about doing this binding?
Any help would be appreciated!!
Within the RenderTransform block I would add a scaleTransform
<Style x:Key="HorizontalSliderThumbStyle" TargetType="{x:Type Thumb}">
.....
.....
<ControlTemplate TargetType="{x:Type Thumb}">
<Canvas x:Name="canvas" SnapsToDevicePixels="true">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<TranslateTransform X="5.5" Y="11"/>
</TransformGroup>
</Canvas.RenderTransform>
Then within the control template's triggers I would add the scaling up of the canvas.
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Trigger.EnterActions>
<BeginStoryboard Name="EnlargeThumb">
<Storyboard TargetName="canvas"
TargetProperty="RenderTransform.Children[1].ScaleX" >
<DoubleAnimation To="2" Duration="0:0:0" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="EnlargeThumb" />
</Trigger.ExitActions>
</Trigger>
Note the style and what not that I got is from the template extracted via visual studio.
I'm trying to implement custom "progressbar" which is based on image that is not rectangle. I through I could use opacitymask to achieve this, but I haven't yet figured out how to do it. I have an image which has transparent background and it's colored on white from inside. Initial state is that image is completely blue, and end state is that image is completely white (except borders will remain black)
Currently I have this kind of XAML code for this, but I dont see any blue filling over image...
<Style TargetType="ProgressBar" x:Name="ImageProgressBar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Margin="{TemplateBinding Margin}"
Background="{TemplateBinding Background}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<Grid>
<Image Source="Assets/emptyprogress.png" Stretch="Fill" />
<Rectangle Fill="Blue">
<Rectangle.OpacityMask>
<ImageBrush ImageSource="Assets/emptyprogress.png" Stretch="Fill" />
</Rectangle.OpacityMask>
<Rectangle.Clip>
<RectangleGeometry x:Name="CLIPRECTANGLE" />
</Rectangle.Clip>
</Rectangle>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ProgressBar Grid.Row="3" Style="{StaticResource ImageProgressBar}"
Width="200"
Height="200"
Minimum="0"
Maximum="100"
Value="50" />
This is what I have and this should be end point
This is what I want
Your fill rectangle needs to be named ProgressBarIndicator for the ProgressBar to be able to find and fill it.
You might also consider replacing your tooth image with a PathGeometry. You can then use the same geometry to Clip the rectangle.
Here's an example with Ellipses and inappropriately hard-coded values (I'll leave a more complicated path for an artist :) )
<Grid x:Name="DeterminateRoot" Margin="{TemplateBinding Padding}" Visibility="Visible">
<Ellipse Height="50" x:Name="ProgressBarTrack" Fill="{TemplateBinding Background}" />
<Rectangle Height="50" x:Name="ProgressBarIndicator" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" >
<Rectangle.Clip>
<EllipseGeometry Center="200,25" RadiusY="25" RadiusX="200" />
</Rectangle.Clip>
</Rectangle>
</Grid>
How do I create a circle shape button but with the color affected by binding.
I have already something like this:
<Button Command="{Binding ShowDetails}" Background="{Binding Color} />
and the color that will be received will be of this format, for example: Colors.LightGray
Can anyone help me?
If you google for "circular button template silverlight" you will find lots of blog posts that describe this process. Including previous StackOverflow questions:
Silverlight: Creating a round button template
The basic steps are
Create a new ControlTemplate for your buttons that renders a circle, using an Ellipse for example.
If you want your Buttton.Background to set the Fill color, then use a TemplateBinding for the Ellipse.Fill property.
For example:
<Button Content="MyButton">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Fill="{TemplateBinding Background}"/>
<ContentPresenter Content="{TemplateBinding Content}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
You will have to write the control template for the button like this
<Button Content="MyButton">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="{TemplateBinding Background}"/>
<ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
With the color binding :
<UserControl.Resources>
<Color x:Key="MyColor">LightGray</Color>
<Style x:Key="RoundButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Width="40" Height="40" Stroke="#FF000000" StrokeThickness="1" Canvas.Left="141" Canvas.Top="61">
<Ellipse.Fill>
<SolidColorBrush Color="{StaticResource MyColor}" />
</Ellipse.Fill>
</Ellipse>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Button Style="{StaticResource RoundButton}" />
</Grid>
Enjoy ;)
I have a C# WPF project which generates daily and weekly reports automatically. I want to inform the user when new reports are available, so I thought of a badge like on the iPhone where the number of new messages appears on a little red circle:
I thought of three images: Two images with semi circles on the left and right if the number to display is small. And a third image for the middle for the case that the number is large (123) and wouldn't fit in a circle.
I want a glossy effect, so I've thought of pictures. Does anyone have a good idea how to do this without pictures but programmatically?
Use a Border element and place your text within it. You can set the CornerRadius property for the Border appropriately so that it looks like a circle (or a rounded-rectangle shape, in case the number is bigger).
Here's a first cut, which exploits the fact that CornerRadius will get clamped to half the height or width in Y and X respectively:
<Border Background="Red" CornerRadius="999" Padding="4">
<TextBlock Foreground="White" FontWeight="Bold" FontSize="12">125</TextBlock>
</Border>
I recently had the same requirement, and quickly knocked this UserControl together.
It uses a short animation to draw the user's attention to the badge.
Take a look at "Big Nick's" blog to see some elegant code for applying this UserControl to another UIElement as an Adorner (exactly what a 'badge' is!):
http://blog.bignickolson.com/2009/10/15/overlaying-controls-in-wpf-with-adorners/
(Thanks Nick!)
<UserControl x:Class="BadgeControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
Opacity="0.8"
ClipToBounds="False"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<Style TargetType="Label" x:Key="BadgeLabel">
<Setter Property="Foreground" Value="White" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Height" Value="22" />
<Setter Property="MinWidth" Value="22" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Label">
<Border Name="badgeOuterBorder" CornerRadius="10" BorderBrush="White" BorderThickness="2" Background="#C80103">
<Border.RenderTransform>
<!--
The TranslateTransform moves the badge so that when used as an Adorner, it bleeds over the upper left
edge of the adorned control.
The ScaleTransform ensures the badge is initially invisible on load ,
but gives the storyboard the ability to 'animate' it into visibility (by manipulating the ScaleTransform).
-->
<TransformGroup>
<TranslateTransform X="-8" Y="-8"/>
<ScaleTransform ScaleX="0" ScaleY="0" />
</TransformGroup>
</Border.RenderTransform>
<Border.BitmapEffect>
<!-- Give some depth to the badge with a drop-shadow -->
<DropShadowBitmapEffect Color="Black" Direction="270" ShadowDepth="3" Softness="0.2" Opacity="1"/>
</Border.BitmapEffect>
<Border CornerRadius="8" Padding="5 0 5 0">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" Opacity="0.8">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="Transparent" Offset="0.6" />
</LinearGradientBrush>
</Border.Background>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}"></ContentPresenter>
</Border>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<!--
The following storyboard animates the ScaleTransform in both the X and Y planes, so that the
badge appears to 'pop' into visibility.
The 1 second delay ensures that the parent control is fully visible before the animation begins,
otherwise, the animation may actually run before the form has rendered to the screen.
-->
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="badgeOuterBorder"
Storyboard.TargetProperty="(Border.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleX)"
From="0"
To="0.75"
BeginTime="0:0:1"
Duration="0:0:0.5">
<DoubleAnimation.EasingFunction>
<BackEase Amplitude='1' EasingMode='EaseOut' />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetName="badgeOuterBorder"
Storyboard.TargetProperty="(Border.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleY)"
From="0"
To="0.75"
BeginTime="0:0:1"
Duration="0:0:0.5">
<DoubleAnimation.EasingFunction>
<BackEase Amplitude='1' EasingMode='EaseOut' />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" ClipToBounds="False">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Name="d" ClipToBounds="False">
<Label Style="{StaticResource BadgeLabel}" Content="Badge Text" ToolTip="Badge Tooltip" ClipToBounds="False" />
</Grid>
</Grid>
</UserControl>
This is based on Chris1 answer, but this will stretch correctly when the text inside the badge is longer than one digit, I've also set the font to make it more consistent across Windows versions, changed the sizing a bit to compensate and added an outline around the badge.
I've also replaced DropShadowEffect with a Rectangle, this is because I can't use DropShadowEffect in my specific application, DropShadowEffect looks better but my Rectangle shadow is good enough, you can delete the shadow rectangle and use DropShadowEffect if you like.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<Style TargetType="Label" x:Key="CircularLabel">
<Setter Property="Foreground" Value="White" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="13" />
<Setter Property="FontFamily" Value="Arial" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Label">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Rectangle Margin="0 3 0 -3" Fill="LightGray"
RadiusX="11" RadiusY="11" Opacity="0.8"/>
<Border CornerRadius="11"
BorderBrush="DarkGray"
BorderThickness="1">
<Border
HorizontalAlignment="Center"
VerticalAlignment="Center" CornerRadius="10"
Background="#FFC90000"
BorderBrush="White"
BorderThickness="2">
<Grid>
<ContentPresenter
HorizontalAlignment="Center" VerticalAlignment="Center"
Content="{TemplateBinding Content}" Margin="5 1 6 1"/>
<Rectangle x:Name="TopShine" RadiusX="9" RadiusY="9"
VerticalAlignment="Stretch">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" Opacity="0.6">
<GradientStop Color="White" Offset="0.2" />
<GradientStop Color="Transparent" Offset="0.7" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Border>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid>
<UniformGrid>
<Label Style="{StaticResource CircularLabel}">4</Label>
<Label Style="{StaticResource CircularLabel}">100000</Label>
<Label Style="{StaticResource CircularLabel}">CLICK HERE</Label>
</UniformGrid>
</Grid>
</Page>
There are many WPF tutorials out there for glossy buttons. Basically, create a normal button and use the combination of effects and gradients to change the button control template to look like an iPhone button. This is a sample but you can do much more: http://craig.palenshus.com/silverlight/silverlight-and-the-content-presenter-in-an-iphone-like-button/
Here is my go at it, it is not perfect but it looks good enough.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<DropShadowEffect x:Key="ShadowEffect" Direction="270" BlurRadius="5" ShadowDepth="3"/>
<Style TargetType="Label" x:Key="CircularLabel">
<Setter Property="Foreground" Value="White" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Label">
<Grid>
<Rectangle HorizontalAlignment="Center" VerticalAlignment="Center" Width="20" Height="20" Fill="#FFC90000" RadiusX="10" RadiusY="10" Stroke="White" StrokeThickness="2" Effect="{StaticResource ShadowEffect}" />
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}"></ContentPresenter>
<Rectangle x:Name="TopShine" RadiusX="10" RadiusY="10" Width="20" Height="20" StrokeThickness="2">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" Opacity="0.8">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="Transparent" Offset="0.6" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid>
<Label Style="{StaticResource CircularLabel}">1</Label>
</Grid>
</Page>