views:

37

answers:

1

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>
+1  A: 

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

<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>
Pavel
Yep, that works. Basically by putting everything in a new border I get what I needed. Thanks!
Ari Roth