Search code examples
wpfxamlprogress-barclipping

ProgressBar clips the very top of value


I'm having a slight problem with reskinning a ProgressBar in WPF. Specifically, no matter what I do, it seems to clip the inner indicator at about 99%. I've tried all sorts of things, from clipping to OpacityMask, but I can't seem to stop the top from cutting off. Any ideas what's going on here?

Code:

    <Style x:Key="BarrelStyle" TargetType="{x:Type ProgressBar}">
        <Setter Property="Value" Value="100" />
        <Setter Property="Orientation" Value="Vertical" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ProgressBar}">
                    <Grid>
                        <Border CornerRadius="10" BorderThickness="1" Padding="3,3,3,3" x:Name="PART_Track" Background="Blue">
                            <Border x:Name="PART_Indicator" CornerRadius="10" BorderBrush="#FFC06565" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
                                <Grid>
                                    <Border x:Name="Indicator_Content" CornerRadius="10" Background="Red" BorderBrush="White" BorderThickness="1"/>
                                    <Border x:Name="Indicator_Gloss" CornerRadius="10" >
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="1.0,0.5" StartPoint="0.05,0.5">
                                                <GradientStop Color="#75000000" Offset="0"/>
                                                <GradientStop Color="#7EFFFFFF" Offset="0.5"/>
                                                <GradientStop Color="#75000000" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Border.Background>
                                    </Border>
                                </Grid>
                            </Border>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Solution

  • Try setting inner most Grid's Margin="0,4" and set "PART_Indicator" Margin="0,0,0,-4". Or just use the code below:

    <Style x:Key="BarrelStyle" TargetType="{x:Type ProgressBar}">
        <Setter Property="Value" Value="100" />
        <Setter Property="Orientation" Value="Vertical" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ProgressBar}">
                    <Grid>
                        <Border CornerRadius="10" BorderThickness="1" Padding="3,3,3,3" x:Name="PART_Track" Background="Blue">
                            <Border x:Name="PART_Indicator" CornerRadius="10" BorderBrush="#FFC06565" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Margin="0,0,0,-4">
                                <Grid Margin="0,4">
                                    <Border x:Name="Indicator_Content" CornerRadius="10" Background="Red" BorderBrush="White" BorderThickness="1"/>
                                    <Border x:Name="Indicator_Gloss" CornerRadius="10" >
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="1.0,0.5" StartPoint="0.05,0.5">
                                                <GradientStop Color="#75000000" Offset="0"/>
                                                <GradientStop Color="#7EFFFFFF" Offset="0.5"/>
                                                <GradientStop Color="#75000000" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Border.Background>
                                    </Border>
                                </Grid>
                            </Border>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>