2

I'm trying to create a rounded end progress bar with a beveled border. I've got the progress bar looking like what I want but I'm having difficulty with making the border seemed beveled. Can anyone help me out with this please?

An image of what I'm trying to get it to look like is here! Bevelled border

My current XAML code for the Window is as follows:

<Window x:Class="SplashDemo2.ProgressBarWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ProgressBarWindow" Height="100" Width="500">

    <Window.Resources>
        <Style x:Key="ProgressBarStyle" TargetType="ProgressBar">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ProgressBar">
                        <Border BorderBrush="#1D4276" BorderThickness="5" 
                                CornerRadius="15" Padding="0">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,0.9" StartPoint="0.5,0">
                                    <GradientStop Color="#FFEAEAEA" Offset="0.9"/>
                                    <GradientStop Color="#FF646464"/>
                                </LinearGradientBrush>
                            </Border.Background>

                            <Grid x:Name="PART_Track" >
                                <Rectangle x:Name="PART_Indicator" 
                                           HorizontalAlignment="Left" 
                                           RadiusX="10" RadiusY="10">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush EndPoint="0.5,0.9" StartPoint="0.5,0">
                                            <GradientStop Color="#FF226494" Offset="0.9"/>
                                            <GradientStop Color="#FFEBEFFA"/>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <ProgressBar Value="50" Width="380" Height="25" 
                 Style="{StaticResource ProgressBarStyle}" 
                 HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Window>

Can anyone help me to get the border looking like the image? Many thanks.

4

1 に答える 1

5

あなたが欠けている主なものは、境界線自体のグラデーションブラシであるように私には見えます.
省略BorderBrush="#1D4276"して代わりに以下のようなものを含めると、はるかに近くなります。

<Border.BorderBrush>
    <LinearGradientBrush EndPoint="0.5,0.9" StartPoint="0.5,0">
        <GradientStop Color="#FFEBEFFA" Offset="0.9"/>
        <GradientStop Color="#FF226494"/>
    </LinearGradientBrush>
</Border.BorderBrush>
于 2012-01-26T13:01:59.577 に答える