Writing a "Progress Pie" style for WPF ProgressBar

Question

I'm trying to write a WPF style for ProgressBar that turns the standard bar in a "Progress pie".

This is what I've tried so far:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
                    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                    mc:Ignorable="d">

    <Style x:Key="ProgressPie" TargetType="{x:Type ProgressBar}">
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ProgressBar}">
                    <Grid x:Name="TemplateRoot" SnapsToDevicePixels="true">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <Ellipse x:Name="PART_Track"
                                 Fill="{TemplateBinding Background}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"/>

                        <ed:Arc x:Name="PART_Indicator"
                                ArcThickness="1"
                                ArcThicknessUnit="Percent"
                                Fill="{StaticResource SomeStaticBrush}"
                                ToolTip="{TemplateBinding Value}"
                                EndAngle="{TemplateBinding Value}"/>

                        <ed:Arc x:Name="OuterPieBorder"
                                ArcThickness="{TemplateBinding BorderThickness}"
                                ArcThicknessUnit="Pixel"
                                Stroke="{TemplateBinding BorderBrush}"
                                StartAngle="0"
                                EndAngle="360"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                Margin="0"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Unfortunately I have at least a couple problems:

• It seems that the width of PART_Indicator is bound to the Value of the template. How come? I haven't written anything to do so.
• I can't find a simple way to position PART_Indicator so that the center of the pie coincides with the center of PART_Track; any suggestions?

Answer 1

It seems that the width of PART_Indicator is bound to the Value of the template. How come? I haven't written anything to do so.

That is how templates works :) see this for more explanations.

Regarding your second question I dont see any "magic answer" (I guess there isnt), but this answer might help you.

If you can read french, or you trust google translate, there is this one as well which does what you want, and seems pretty complete.