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?

score 1 · Accepted Answer · edited May 23 '17 at 11:54

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.

edited May 23 '17 at 11:54

Community

1
1

answered Feb 13 '14 at 14:02

Olivier

5,578
2
31
46

Thanks, while waiting for an answer I also found that out. To sum up: * The width of `PART_Indicator` is set to `Value * PART_Track` by the template and apparently there's nothing to do about it. * `Arc` doesn't allow to specify natively the position of the center point, to achieve that a custom shape is necessary. – elnigno Feb 13 '14 at 14:13
You got it... But I dont see why this is an issue... you're not obliged to declare PART_Indicator, are you ? – Olivier Feb 13 '14 at 14:27
I'm not sure, I've tried to rename it and the application would still compile; however, I got a crash when trying to display the progress bar. – elnigno Feb 13 '14 at 14:37
Ok, I never tried :) Just put a fake border with Visility="Collapsed" & x:Name="PART_Indicator", then ! – Olivier Feb 13 '14 at 21:26
I guess that would work, but the other issue would still remain. I'll have to think of something else. – elnigno Feb 14 '14 at 07:55

Writing a "Progress Pie" style for WPF ProgressBar

1 Answers1