14

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

此处显示：

在此处输入图像描述

谢谢。

4

2 回答 2

20

您可以通过编辑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" />

这是最终结果：

在此处输入图像描述

于 2012-10-13T15:28:53.410 回答
20

Nasreddine 的答案非常好，但如果你想要更简单的东西，你可以使用以下

    <Style TargetType="{x:Type ProgressBar}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ProgressBar">
                    <Border BorderBrush="#D9DCE1" BorderThickness="1" Background="#E8E8E8" CornerRadius="0" Padding="0">
                        <Grid x:Name="PART_Track">
                            <Rectangle x:Name="PART_Indicator" HorizontalAlignment="Left" Fill="#FF49A3E1" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
于 2013-11-01T23:36:02.000 回答