2012-10-13 45 views
13

所以我被建议使用WPF窗体为我的应用程序制作自定义用户界面。我想尝试的第一件事是改变进度条的外观。唯一让我回想起它的新面貌就是它顶部的光泽效果。我希望progrss酒吧大多是纯色。无论如何删除进度条的光面部分?从进度栏中删除光泽度?

如下所示:

enter image description here

感谢。

+0

您将需要更改['Template'](http://msdn.microsoft.com/en-us/library/system.windows.controls.control.template.aspx)。 –

回答

18

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

这里的最终结果是:

enter image description here

+8

+1为gif。视觉=信息。 – darin

+2

我在''部件中得到一个错误,因为它不能为空,并且在Themes:ProgressBarHighlightConverter中出现了另一个错误。 它要求“主题”命名空间。 ProgressBarHighlightConverter是一个类吗? – soulblazer

+0

@soulblazer添加名称空间'xmlns:Themes =“clr-namespace:Microsoft.Windows.Themes; assembly = PresentationFramework.Aero”'并引用'PresentationFramework.Aero'程序集 –

19

纳斯尔丁答案是非常好的,但如果你想要简单一些,你可以使用以下内容

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

这很好。只是说,这将是有用的使用定义的颜色背景=“{TemplateBinding背景}”等 – Fanda

+0

正如@Fanda建议在这里用适当的'TemplateBinding's:http://pastebin.com/eArqCXP8 – ChrFin

+0

好,但doesn与垂直进度条一起工作不错:( – Kamil