wpf - 从进度条中去除光泽？

Question

所以有人建议我使用 WPF 表单为我的应用程序制作自定义 UI。我想尝试的第一件事是更改进度条的外观。唯一让我对它的新外观望而却步的是它顶部的光泽效果。我希望进度条主要由纯色制成。无论如何要删除进度条的光泽部分？

显示在这里:



谢谢。

Answer 1

您可以通过编辑 ControlTemplate 来实现您想要的任何样式。进度条。这是一个例子:

免责声明:我不是设计师。

<!-- Brushed used by the progress bar style -->
<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill" EndPoint="0,0" MappingMode="Absolute" StartPoint="-100,0">
    <GradientStop Color="#00000000" Offset="0"/>
    <GradientStop Color="#FF000000" Offset="0.4"/>
    <GradientStop Color="#FF000000" Offset="0.6"/>
    <GradientStop Color="#00000000" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ProgressBarTopHighlight" Color="#80FFFFFF" />
<!-- progress bar style -->
<Style x:Key="FlatProgressBar" TargetType="{x:Type ProgressBar}">
    <Setter Property="Foreground" Value="#01D328"/>
    <Setter Property="Background" Value="#C7C7C7"/>
    <Setter Property="BorderBrush" Value="#B2B2B2"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ProgressBar}">
                <Grid x:Name="Background" SnapsToDevicePixels="true">
                    <Rectangle Fill="{TemplateBinding Background}" RadiusY="2" RadiusX="2"/>
                    <Border Background="{x:Null}" CornerRadius="2" Margin="1"/>
                    <Border BorderBrush="#80FFFFFF" BorderThickness="1,0,1,1" Background="{StaticResource ProgressBarTopHighlight}" Margin="1"/>
                    <Rectangle x:Name="PART_Track" Margin="1"/>
                    <Decorator x:Name="PART_Indicator" HorizontalAlignment="Left" Margin="1">
                        <Grid x:Name="Foreground">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition MaxWidth="15"/>
                                <ColumnDefinition Width="0.1*"/>
                                <ColumnDefinition MaxWidth="15"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Rectangle x:Name="Indicator" Grid.ColumnSpan="3" Fill="{TemplateBinding Foreground}" Grid.RowSpan="2"/>
                            <Rectangle x:Name="Animation" Grid.ColumnSpan="3" Fill="{TemplateBinding Foreground}" Grid.RowSpan="2">
                                <Rectangle.OpacityMask>
                                    <MultiBinding>
                                        <MultiBinding.Converter>
                                            <Themes:ProgressBarHighlightConverter/>
                                        </MultiBinding.Converter>
                                        <Binding Source="{StaticResource ProgressBarIndicatorAnimatedFill}"/>
                                        <Binding ElementName="Background" Path="ActualWidth"/>
                                        <Binding ElementName="Background" Path="ActualHeight"/>
                                    </MultiBinding>
                                </Rectangle.OpacityMask>
                            </Rectangle>
                        </Grid>
                    </Decorator>
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="Orientation" Value="Vertical">
                        <Setter Property="LayoutTransform" TargetName="Background">
                            <Setter.Value>
                                <RotateTransform Angle="-90"/>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="LayoutTransform" TargetName="PART_Track">
                            <Setter.Value>
                                <RotateTransform Angle="90"/>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="LayoutTransform" TargetName="PART_Indicator">
                            <Setter.Value>
                                <RotateTransform Angle="90"/>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="LayoutTransform" TargetName="Foreground">
                            <Setter.Value>
                                <RotateTransform Angle="-90"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsIndeterminate" Value="true">
                        <Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/>
                    </Trigger>
                    <Trigger Property="IsIndeterminate" Value="false">
                        <Setter Property="Fill" TargetName="Animation" Value="#80B5FFA9"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

将此样式应用于您的 ProgressBar，您就可以开始了:

<ProgressBar Style="{StaticResource FlatProgressBar}" Value="50" />

这是最终结果: