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

最終結果は次のとおりです。

Answer 2

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>