WPF Indeterminate Rounded Edge, Indicator overlap parent

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.

score 0 · Accepted Answer · answered Dec 11 '17 at 14:20

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

score 0 · Answer 2 · answered Dec 13 '17 at 02:12

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>

WPF Indeterminate Rounded Edge, Indicator overlap parent

2 Answers2