如何在 WPF 中创建斜面渐变边框答案

【问题标题】：How to create a bevelled gradient border in WPF如何在 WPF 中创建斜面渐变边框
【发布时间】：2012-01-26 11:56:30
【问题描述】：

我正在尝试创建一个带有斜角边框的圆形结束进度条。我的进度条看起来像我想要的，但我很难让边框看起来像斜角。有人可以帮我解决这个问题吗？

我试图让它看起来像的图像在这里！ Bevelled border

我当前的 Window 的 XAML 代码如下：

<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>

谁能帮我让边框看起来像图片？非常感谢。

【问题讨论】：

我可以发誓斜边边框看起来像酒吧。
就颜色而言，是的，它很可能只是渐变方向相反。但是，我似乎无法将渐变应用于边框。

标签： wpf xaml linear-gradients

【解决方案1】：

在我看来，您缺少的主要是边框本身的渐变画笔。
如果您省略 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>

【讨论】：

太完美了，我认为 Border.Background 会给我实际边框轮廓上的渐变，但它只是给了我边框内的渐变。但是，您的建议是正确的。谢谢。