從進度欄中刪除光澤度？

Question

所以我被建議使用WPF窗體爲我的應用程序製作自定義用戶界面。我想嘗試的第一件事是改變進度條的外觀。唯一讓我回想起它的新面貌就是它頂部的光澤效果。我希望progrss酒吧大多是純色。無論如何刪除進度條的光面部分？

如下所示：

感謝。

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 Style="{StaticResource FlatProgressBar}" Value="50" /> 

這裏的最終結果是：

Answer 2

納斯爾丁答案是非常好的，但如果你想要簡單一些，你可以使用以下內容

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