Reputation: 23
I am having an issue with the Microsoft WPF ProgressBar. I will set Width="Auto" and the width will size to the text width until a value property of ~97. Between values 97 and 100 the control will go exponentially larger until it hits MaxWidth.
The following style is setting the template for the ProgressBar. I can't seem to find anything that will cause it to behave until a Value of ~97. I do not touch the width in the code behind.
<Style x:Key="CurrentDayProgressBar" TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid>
<Border Name="PART_Track" CornerRadius="2" Background="DarkGray" BorderBrush="{DynamicResource TextBrush}" BorderThickness="1" />
<Border Name="PART_Indicator" CornerRadius="2" Background="{DynamicResource ProgressBarBackground}" HorizontalAlignment="Left" Margin="2" />
<TextBlock Name="PART_Text" Margin="2" Width="Auto" Padding="5,0,5,0" Text="{Binding RelativeSource={RelativeSource AncestorType=ProgressBar}, Path=Tag}"
Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{DynamicResource SimpleTextBlock}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The first image below is what the bar looks like when it is at a Value of 99.2. The second is my implementation in the Telerik RadProgressBar, which behaves like I expect it to. The Telerik solution may be what I have to go with, but it would be nice to know why the Microsoft control is not working.
Telerik RadProgressBar and Textbox
Upvotes: 2
Views: 676
Reputation: 2119
The PART_Track
cannot have any extra margins/borders attached to it and/or the PART_Indicator
should be nested inside it. To resolve the problem you're having, do something like:
<Border CornerRadius="2" Background="DarkGray" BorderBrush="{DynamicResource TextBrush}" BorderThickness="1" />
<Border x:Name="PART_Track" Margin="3">
<Border Name="PART_Indicator" CornerRadius="2" Background="{DynamicResource ProgressBarBackground}" HorizontalAlignment="Left" />
</Border>
<TextBlock ... />
Upvotes: 1