WPF Indeterminate Rounded Edge, Indicator overlap parent - wpf

Question

Good Evening Guys, I am new to WPF application. I have a trouble with Indeterminate progress bar design. I had researched a lot of progress bar related topic via online but I still not clear about the progress bar styling concept.
I had tried on changing the value of corner radius and set true for clip to bounds on every possible element that affected the corner radius (PART_Indicator,PART_Track,Indicator,Animation), but still no luck with this.
The Child Border always overlap it's parent. Shown as below
What I want to achieve on Progress bar shown as below.
Below is my code:
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="150">
<Grid>
<StackPanel Orientation="Vertical">
<ProgressBar Height="36" Name="progBar" VerticalAlignment="Top" IsIndeterminate="True" Foreground="Orange" BorderBrush="Gray" BorderThickness="1" >
<ProgressBar.Style>
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar" >
<Grid Name="TemplateRoot" SnapsToDevicePixels="True">
<Rectangle RadiusX="2" RadiusY="2" Fill="Transparent" />
<Border CornerRadius="10" Margin="1,1,1,1">
<Border.Background>
<SolidColorBrush Color="Transparent"/>
</Border.Background>
</Border>
<Border BorderThickness="1" BorderBrush="gray" Margin="1,1,1,1" CornerRadius="10">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="White" Offset="0.0" />
<GradientStop Color="WhiteSmoke" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Rectangle Name="PART_Track" Margin="1,1,1,1" ClipToBounds="True"/>
<Decorator Name="PART_Indicator" Margin="3,2,3,2" HorizontalAlignment="Left" ClipToBounds="True">
<Grid Name="Foreground" ClipToBounds="True">
<Rectangle RadiusX="10" RadiusY="10" Name="Indicator" ClipToBounds="True"/>
<Grid Name="Animation" ClipToBounds="True">
<Border Name="PART_GlowRect" Width="50" Margin="1" HorizontalAlignment="Left" Background="Orange" CornerRadius="10" />
</Grid>
<Grid Name="Overlay">
</Grid>
</Grid>
</Decorator>
<Border BorderThickness="0" CornerRadius="0" BorderBrush="Transparent" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ProgressBar.Style>
</ProgressBar>
</StackPanel>
</Grid>
</Window>
What had I did wrong on the code? Please for guide me regarding this issue.
Thank you.

Answer 1

Check out Clip property:
<Image
Source="sampleImages\Waterlilies.jpg"
Width="200" Height="150" HorizontalAlignment="Left">
<Image.Clip>
<EllipseGeometry
RadiusX="100"
RadiusY="75"
Center="100,75"/>
</Image.Clip>
</Image>
You can put any geometry inside Clip property. In your case it can be RectangleGeometry with RadiusX and RadiusY properties set.
More info: https://msdn.microsoft.com/ru-ru/library/system.windows.uielement.clip(v=vs.110).aspx

Answer 2

Thanks for Mikolaytis's answer, I am currently using RectangleGeometry.
I believe the Rect in RectangleGeometry it will not inherit the width from the parent width, I think I need to use code behind to recalculate the rect for different resolution.
I am sharing my code below in case somone facing the same issue as I was.
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="400">
<ProgressBar Height="36" Width="358" Name="progBar" VerticalAlignment="Top" IsIndeterminate="True" Foreground="Orange" BorderBrush="Gray" BorderThickness="1" >
<ProgressBar.Style>
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar" >
<Grid Name="TemplateRoot" SnapsToDevicePixels="True">
<Rectangle RadiusX="2" RadiusY="2" Fill="Transparent" />
<Border CornerRadius="10" Margin="1,1,1,1">
<Border.Background>
<SolidColorBrush Color="Transparent"/>
</Border.Background>
</Border>
<Border BorderThickness="1" BorderBrush="Blue" Margin="1,1,1,1" CornerRadius="10">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="Red" Offset="0.0" />
<GradientStop Color="Red" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Rectangle Name="PART_Track" Margin="0" ClipToBounds="True" />
<Border Background="black" Name="PART_Indicator" Margin="0" HorizontalAlignment="Left" ClipToBounds="True">
<Border.Clip>
<RectangleGeometry Rect="2,2,354,32" RadiusX="9" RadiusY="9.5" />
</Border.Clip>
<Grid Name="Foreground">
<Rectangle RadiusX="10" RadiusY="10" Name="Indicator" ClipToBounds="True"/>
<Grid Name="Animation" ClipToBounds="True">
<Border Name="PART_GlowRect" Width="50" Margin="1" HorizontalAlignment="Left" Background="Orange" CornerRadius="10" />
</Grid>
<Grid Name="Overlay">
</Grid>
</Grid>
</Border>
<Border BorderThickness="0" CornerRadius="0" BorderBrush="Transparent" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ProgressBar.Style>
</ProgressBar>
</Window>