Question

我正在尝试实现这种非线性渐变：

我的问题：我只能创建从上到中心/从下到中心或从左到中心/从右到中心的渐变，但是它应该具有某种圆形的渐变或类似的东西。我需要与上图相同。

目前，进度条和其中的动画都使用线性渐变，但这不是我所需要的。

                <Border BorderThickness="1"
                        BorderBrush="#33B8F0"
                        Padding="2"
                        Background="#2F2865"
                        CornerRadius="2">
                    <ProgressBar IsIndeterminate="True"
                                 MinHeight="40"
                                 BorderThickness="0">
                        <ProgressBar.Background>
                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                <GradientStop Color="#206fb6" Offset="0.0" />
                                <GradientStop Color="#39437d" Offset="0.2" />
                                <GradientStop Color="#39437d" Offset="0.8" />
                                <GradientStop Color="#206fb6" Offset="1.0" />
                            </LinearGradientBrush>
                        </ProgressBar.Background>
                        <ProgressBar.Foreground>
                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                <GradientStop Color="#38e2ff" Offset="0.0" />
                                <GradientStop Color="#78c4fe" Offset="0.1" />
                                <GradientStop Color="#78c4fe" Offset="0.89" />
                                <GradientStop Color="#38e2ff" Offset="1.0" />
                            </LinearGradientBrush>
                        </ProgressBar.Foreground>
                    </ProgressBar>
                </Border>

它看起来像这样。

Answer 1

这种方法有点不寻常，但我认为它可以为您解决问题。您可以通过模糊边框来获得所需的外观。请注意，下面的代码是更多的伪XAML，您将需要使用它们来适应您的需求

            <Grid Height="20" Width="200">
                <Grid>
                    <Border BorderBrush="#241C59" BorderThickness="1" CornerRadius="1" Background="#2D255B">
                        <Border BorderBrush="#206fb6" BorderThickness="4" CornerRadius="2" ClipToBounds="True" Margin="-1">
                            <Border.Effect>
                                <BlurEffect Radius="10"/>
                            </Border.Effect>
                        </Border>
                    </Border>
                    <Border Margin="1" VerticalAlignment="Stretch" BorderThickness="0." Background="#69ABDB" HorizontalAlignment="Left" Width="50">
                        <Border BorderBrush="#38e2ff" BorderThickness="2" CornerRadius="2" ClipToBounds="False">
                            <Border.Effect>
                                <BlurEffect Radius="5"/>
                            </Border.Effect>
                        </Border>
                    </Border>
                </Grid>
            </Grid>

您的请求：

结果：

您可能需要稍微修改一下颜色以使其完全匹配，但总的来说，这将为您做到

作为背景的控件可以使用如下所示的可视笔刷来应用：

<ProgressBar>
    <ProgressBar.Background>
        <VisualBrush>
            <VisualBrush.Visual>
                <Border BorderBrush="HotPink">
                </Border>
            </VisualBrush.Visual>
        </VisualBrush>
    </ProgressBar.Background>
</ProgressBar>

或者通过使用自定义控件模板甚至更好

编辑：当您请求更详细的版本时，它将向您展示如何将prograssbar与自定义控件模板一起使用通常，您将必须使用转换器来缩放内部条以匹配百分比。但是我很懒惰，在这里给你提供了一个解决方案，该解决方案仅在progressbar宽度大约为100 px时才有效，但是应该很容易让您弄清楚如何使用转换器，因此您可以从中删除宽度定义并添加大小转换器。不能在这里为您完成所有工作：P

            <ProgressBar Value="40" Height="20" Width="100">
                <ProgressBar.Style>
                    <Style TargetType="ProgressBar">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ProgressBar">
                                    <Viewbox Stretch="Fill">                                            
                                      <Grid Height="{TemplateBinding Height}" Width="102">
                                        <Grid>
                                            <Border BorderBrush="#241C59" BorderThickness="1" CornerRadius="1" Background="#2D255B">
                                                <Border BorderBrush="#206fb6" BorderThickness="4" CornerRadius="2" ClipToBounds="True" Margin="-1">
                                                    <Border.Effect>
                                                        <BlurEffect Radius="10"/>
                                                    </Border.Effect>
                                                </Border>
                                            </Border>
                                            <Border Margin="1" VerticalAlignment="Stretch" Background="#69ABDB" HorizontalAlignment="Left" Width="{TemplateBinding Value}">
                                                <Border BorderBrush="#38e2ff" BorderThickness="2" CornerRadius="2" ClipToBounds="False">
                                                    <Border.Effect>
                                                        <BlurEffect Radius="5"/>
                                                    </Border.Effect>
                                                </Border>
                                            </Border>
                                        </Grid>
                                    </Grid>
                                    </Viewbox>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ProgressBar.Style>
            </ProgressBar>

如何在WPF中创建圆角渐变

1 个答案: