1. 首頁
  2. 問答
  3. WPF progressbar style

WPF progressbar style

2011-01-27 67 views
13

我在我的應用程序中使用了一個不確定的進度條，我得到了一系列水平運行的塊的壞動畫。是不是有像Vista或Windows 7更好的風格？WPF progressbar style

來源

2011-01-27 Aks

回答

16

您的進度條具有與您當前的Windows主題相對應的樣式。如果您使用Aero主題在Windows 7上運行應用程序，則您的進度條會相應地顯示。

如果您希望它看起來總是相同的（不管選擇了哪個Windows主題），您將需要爲進度條定義自己的樣式。

下面是從航空正常的顏色主題風格：

<LinearGradientBrush x:Key="ProgressBarBorderBrush" 
        EndPoint="0,1" 
        StartPoint="0,0"> 
    <LinearGradientBrush.GradientStops> 
     <GradientStop Color="#B2B2B2" 
         Offset="0"/> 
     <GradientStop Color="#8C8C8C" 
         Offset="1"/> 
    </LinearGradientBrush.GradientStops> 
</LinearGradientBrush> 
<LinearGradientBrush x:Key="ProgressBarBackground" 
        EndPoint="1,0" 
        StartPoint="0,0"> 
    <LinearGradientBrush.GradientStops> 
     <GradientStop Color="#BABABA" 
         Offset="0"/> 
     <GradientStop Color="#C7C7C7" 
         Offset="0.5"/> 
     <GradientStop Color="#BABABA" 
         Offset="1"/> 
    </LinearGradientBrush.GradientStops> 
</LinearGradientBrush> 
<LinearGradientBrush x:Key="ProgressBarTopHighlight" 
        StartPoint="0,0" 
        EndPoint="0,1"> 
    <LinearGradientBrush.GradientStops> 
     <GradientStop Color="#80FFFFFF" 
         Offset="0.05"/> 
     <GradientStop Color="#00FFFFFF" 
         Offset="0.25"/> 
    </LinearGradientBrush.GradientStops> 
</LinearGradientBrush> 
<LinearGradientBrush x:Key="ProgressBarGlassyHighlight" 
        StartPoint="0,0" 
        EndPoint="0,1"> 
    <LinearGradientBrush.GradientStops> 
     <GradientStop Color="#50FFFFFF" 
         Offset="0.5385"/> 
     <GradientStop Color="#00FFFFFF" 
         Offset="0.5385"/> 
    </LinearGradientBrush.GradientStops> 
</LinearGradientBrush> 
<LinearGradientBrush x:Key="ProgressBarIndicatorGlassyHighlight" 
        StartPoint="0,0" 
        EndPoint="0,1"> 
    <LinearGradientBrush.GradientStops> 
     <GradientStop Color="#90FFFFFF" 
         Offset="0.5385"/> 
     <GradientStop Color="#00FFFFFF" 
         Offset="0.5385"/> 
    </LinearGradientBrush.GradientStops> 
</LinearGradientBrush> 
<RadialGradientBrush x:Key="ProgressBarIndicatorLightingEffectLeft" 
        RadiusX="1" 
        RadiusY="1" 
        RelativeTransform="1,0,0,1,0.5,0.5"> 
    <RadialGradientBrush.GradientStops> 
     <GradientStop Color="#60FFFFC4" 
         Offset="0"/> 
     <GradientStop Color="#00FFFFC4" 
         Offset="1"/> 
    </RadialGradientBrush.GradientStops> 
</RadialGradientBrush> 
<LinearGradientBrush x:Key="ProgressBarIndicatorLightingEffect" 
        StartPoint="0,1" 
        EndPoint="0,0"> 
    <LinearGradientBrush.GradientStops> 
     <GradientStop Color="#60FFFFC4" 
         Offset="0"/> 
     <GradientStop Color="#00FFFFC4" 
         Offset="1"/> 
    </LinearGradientBrush.GradientStops> 
</LinearGradientBrush> 
<RadialGradientBrush x:Key="ProgressBarIndicatorLightingEffectRight" 
        RadiusX="1" 
        RadiusY="1" 
        RelativeTransform="1,0,0,1,-0.5,0.5"> 
    <RadialGradientBrush.GradientStops> 
     <GradientStop Color="#60FFFFC4" 
         Offset="0"/> 
     <GradientStop Color="#00FFFFC4" 
         Offset="1"/> 
    </RadialGradientBrush.GradientStops> 
</RadialGradientBrush> 

<LinearGradientBrush x:Key="ProgressBarIndicatorDarkEdgeLeft" 
        StartPoint="0,0" 
        EndPoint="1,0"> 
    <LinearGradientBrush.GradientStops> 
     <GradientStop Color="#0C000000" 
         Offset="0"/> 
     <GradientStop Color="#20000000" 
         Offset="0.3"/> 
     <GradientStop Color="#00000000" 
         Offset="1"/> 
    </LinearGradientBrush.GradientStops> 
</LinearGradientBrush> 
<LinearGradientBrush x:Key="ProgressBarIndicatorDarkEdgeRight" 
        StartPoint="0,0" 
        EndPoint="1,0"> 
    <LinearGradientBrush.GradientStops> 
     <GradientStop Color="#00000000" 
         Offset="0"/> 
     <GradientStop Color="#20000000" 
         Offset="0.7"/> 
     <GradientStop Color="#0C000000" 
         Offset="1"/> 
    </LinearGradientBrush.GradientStops> 
</LinearGradientBrush> 

<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill" 
        StartPoint="0,0" 
        EndPoint="1,0"> 
    <LinearGradientBrush.GradientStops> 
     <GradientStop Color="#00FFFFFF" 
         Offset="0"/> 
     <GradientStop Color="#60FFFFFF" 
         Offset="0.4"/> 
     <GradientStop Color="#60FFFFFF" 
         Offset="0.6"/> 
     <GradientStop Color="#00FFFFFF" 
         Offset="1"/> 
    </LinearGradientBrush.GradientStops> 
</LinearGradientBrush> 

<Style x:Key="{x:Type ProgressBar}" 
     TargetType="{x:Type ProgressBar}"> 
    <Setter Property="Foreground" 
      Value="#01D328"/> 
    <Setter Property="Background" 
      Value="{StaticResource ProgressBarBackground}"/> 
    <Setter Property="BorderBrush" 
      Value="{StaticResource ProgressBarBorderBrush}"/> 
    <Setter Property="BorderThickness" 
      Value="1"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ProgressBar}"> 
       <Grid Name="TemplateRoot" 
         SnapsToDevicePixels="true"> 
        <Rectangle Fill="{TemplateBinding Background}" 
           RadiusX="2" 
           RadiusY="2"/> 
        <Border Background="{StaticResource ProgressBarGlassyHighlight}" 
          Margin="1" 
          CornerRadius="2"/> 
        <Border BorderBrush="#80FFFFFF" 
          Background="{StaticResource ProgressBarTopHighlight}" 
          BorderThickness="1,0,1,1" 
          Margin="1"/> 
        <Rectangle Name="PART_Track" 
           Margin="1"/> 

        <Decorator x:Name="PART_Indicator" 
           HorizontalAlignment="Left" 
           Margin="1"> 
         <Grid Name="Foreground"> 
          <Rectangle x:Name="Indicator" 
             Fill="{TemplateBinding Foreground}"/> 
          <Grid x:Name="Animation" ClipToBounds="true"> 
           <Rectangle x:Name="PART_GlowRect" Width="100" 
              Fill="{StaticResource ProgressBarIndicatorAnimatedFill}" 
              Margin="-100,0,0,0" 
              HorizontalAlignment="Left"> 
           </Rectangle> 
          </Grid> 
          <Grid x:Name="Overlay"> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition MaxWidth="15"/> 
            <ColumnDefinition Width="0.1*"/> 
            <ColumnDefinition MaxWidth="15"/> 
           </Grid.ColumnDefinitions> 
           <Grid.RowDefinitions> 
            <RowDefinition /> 
            <RowDefinition /> 
           </Grid.RowDefinitions> 
           <Rectangle x:Name="LeftDark" 
              Grid.RowSpan="2" 
              Fill="{StaticResource ProgressBarIndicatorDarkEdgeLeft}" 
              RadiusX="1" 
              RadiusY="1" 
              Margin="1,1,0,1"/> 
           <Rectangle x:Name="RightDark" 
              Grid.RowSpan="2" 
              Grid.Column="2" 
              RadiusX="1" 
              RadiusY="1" 
              Fill="{StaticResource ProgressBarIndicatorDarkEdgeRight}" 
              Margin="0,1,1,1"/> 
           <Rectangle x:Name="LeftLight" 
              Grid.Column="0" 
              Grid.Row="2" 
              Fill="{StaticResource ProgressBarIndicatorLightingEffectLeft}"/> 
           <Rectangle x:Name="CenterLight" 
              Grid.Column="1" 
              Grid.Row="2" 
              Fill="{StaticResource ProgressBarIndicatorLightingEffect}"/> 
           <Rectangle x:Name="RightLight" 
              Grid.Column="2" 
              Grid.Row="2" 
              Fill="{StaticResource ProgressBarIndicatorLightingEffectRight}"/> 
           <Border x:Name="Highlight1" 
             Grid.RowSpan="2" 
             Grid.ColumnSpan="3" 
             Background="{StaticResource ProgressBarIndicatorGlassyHighlight}"/> 
           <Border x:Name="Highlight2" 
             Grid.RowSpan="2" 
             Grid.ColumnSpan="3" 
             Background="{StaticResource ProgressBarTopHighlight}"/> 
          </Grid> 
         </Grid> 
        </Decorator> 

        <Border BorderThickness="{TemplateBinding BorderThickness}" 
          BorderBrush="{TemplateBinding BorderBrush}" 
          CornerRadius="2"/> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="Orientation" 
          Value="Vertical"> 
         <Setter TargetName="TemplateRoot" 
           Property="LayoutTransform"> 
          <Setter.Value> 
           <RotateTransform Angle="-90"/> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 

        <Trigger Property="IsIndeterminate" 
          Value="true"> 
         <Setter TargetName="LeftDark" 
           Property="Visibility" 
           Value="Collapsed"/> 
         <Setter TargetName="RightDark" 
           Property="Visibility" 
           Value="Collapsed"/> 
         <Setter TargetName="LeftLight" 
           Property="Visibility" 
           Value="Collapsed"/> 
         <Setter TargetName="CenterLight" 
           Property="Visibility" 
           Value="Collapsed"/> 
         <Setter TargetName="RightLight" 
           Property="Visibility" 
           Value="Collapsed"/> 
         <Setter TargetName="Indicator" 
           Property="Visibility" 
           Value="Collapsed"/> 
        </Trigger> 
        <Trigger Property="IsIndeterminate" 
          Value="false"> 
         <Setter TargetName="Animation" 
           Property="Background" 
           Value="#80B5FFA9"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

將這個代碼在Themes/Generic.xaml文件在你的應用程序和進度條會一直有這種風格。

來源

2011-01-27 10:39:17

+0

我有一個問題。當我應用主題並設置「IsIndeterminate = true」時，不確定動畫在xaml編輯器中工作，但動畫在主應用程序中不起作用。這可能是什麼原因造成的？ – Aks 2011-01-27 11:40:35

+0

很難說......如果你不適用這種風格，它在兩種情況下都能起作用嗎？ – 2011-01-27 12:53:58

11

這是又一個...非常簡單的平進度條IsInderminate模式 -

<ControlTemplate x:Key="CustomProgressBar" TargetType="ProgressBar" > 
     <Grid Name="TemplateRoot" SnapsToDevicePixels="True"> 
      <Rectangle RadiusX="2" RadiusY="2" Fill="Transparent" /> 
      <Border CornerRadius="0,0,0,0" Margin="1,1,1,1"> 
       <Border.Background> 
        <SolidColorBrush Color="Transparent"/>      
       </Border.Background> 
      </Border> 
      <Border BorderThickness="0,0,0,0" BorderBrush="Transparent" Margin="1,1,1,1"> 
       <Border.Background> 
        <SolidColorBrush Color="Transparent"/>       
       </Border.Background> 
      </Border> 
      <Rectangle Name="PART_Track" Margin="1,1,1,1" /> 
      <Decorator Name="PART_Indicator" Margin="1,1,1,1" HorizontalAlignment="Left"> 
       <Grid Name="Foreground"> 
        <Rectangle Fill="Transparent" Name="Indicator" /> 
        <Grid Name="Animation" ClipToBounds="True"> 
         <Border Name="PART_GlowRect" Width="100" Margin="0,0,0,0" HorizontalAlignment="Left" Background="LightBlue"/>                
        </Grid> 
        <Grid Name="Overlay">       
        </Grid> 
       </Grid> 
      </Decorator> 
      <Border BorderThickness="0" CornerRadius="0,0,0,0" BorderBrush="Transparent" /> 
     </Grid>   
    </ControlTemplate>

來源

2011-01-27 21:50:54

4

這是一個自定義的進度條我從Suneet的例子進行，但IsIndeterminate動畫工作在.NET 3.5：

<Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}"> 
    <Setter Property="Foreground" Value="#54bdcd"/> 
    <Setter Property="Background" Value="#000000"/> 
    <Setter Property="BorderThickness" Value="0"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ProgressBar}"> 
       <Grid Name="TemplateRoot" SnapsToDevicePixels="true"> 
        <Rectangle Fill="{TemplateBinding Background}"/> 
        <Rectangle Name="PART_Track" Margin="0"/> 
        <Decorator x:Name="PART_Indicator" HorizontalAlignment="Left" Margin="0"> 
         <Grid Name="Foreground"> 
          <Rectangle Fill="{TemplateBinding Foreground}" Name="Indicator" /> 
          <Grid Name="Animation" ClipToBounds="True"> 
           <Border Name="PART_GlowRect" Margin="0,0,0,0" HorizontalAlignment="Left" Background="{TemplateBinding Foreground}"/> 
          </Grid> 
          <Grid Name="Overlay"> 
          </Grid> 
         </Grid> 
        </Decorator> 

        <Border BorderThickness="{TemplateBinding BorderThickness}" 
         BorderBrush="{TemplateBinding BorderBrush}"/> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsIndeterminate" Value="true"> 
         <Setter TargetName="Indicator" Property="Fill" Value="Transparent" /> 
         <Setter TargetName="PART_GlowRect" Property="Width" Value="100" /> 
         <Trigger.EnterActions> 
          <BeginStoryboard> 
           <Storyboard> 
            <ThicknessAnimation 
             Storyboard.TargetName="PART_GlowRect" 
             Storyboard.TargetProperty="Margin" 
             From="-50,0,0,0" To="400,0,0,0" Duration="0:0:2" 
             AutoReverse="True" RepeatBehavior="Forever" /> 
           </Storyboard> 
          </BeginStoryboard> 
         </Trigger.EnterActions> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

這是有點一個黑客，因爲我動了不確定欄通過改變其marginleft值來回，但對我來說這是負擔得起的，因爲我的進度條是一個固定的寬度。

如果您有更好的主意，請隨時更改故事板部分。 This page幫了我很多。

來源

2014-10-13 09:37:00

2

這裏是另外一個支持正常和中間模式：

<Style TargetType="{x:Type ProgressBar}"> 
    <Setter Property="Foreground" Value="#1BA1E2"/> 
    <Setter Property="Background" Value="#EEEEEE"/> 
    <Setter Property="BorderThickness" Value="0"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ProgressBar}"> 
       <Grid Name="TemplateRoot" SnapsToDevicePixels="true"> 
        <Rectangle Fill="{TemplateBinding Background}"/> 
        <Rectangle Name="PART_Track" Margin="0"/> 
        <Decorator x:Name="PART_Indicator" HorizontalAlignment="Left" Margin="0"> 
         <Grid Name="Foreground"> 
          <Rectangle Fill="{TemplateBinding Foreground}" Name="Indicator" /> 
          <Grid x:Name="Animation" ClipToBounds="true" Visibility="Hidden"> 
           <Rectangle Fill="{TemplateBinding Background}" Name="HiderPre" Margin="0,0,50,0"> 
            <Rectangle.RenderTransform> 
             <ScaleTransform x:Name="HiderPreTransform" ScaleX="0"/> 
            </Rectangle.RenderTransform> 
           </Rectangle> 
           <Rectangle Fill="{TemplateBinding Background}" Name="HiderPost" RenderTransformOrigin="1, 0" Margin="50,0,0,0"> 
            <Rectangle.RenderTransform> 
             <ScaleTransform x:Name="HiderPostTransform" ScaleX="1" /> 
            </Rectangle.RenderTransform> 
           </Rectangle> 
          </Grid> 
          <Grid Name="Overlay"> 
          </Grid> 
         </Grid> 
        </Decorator> 

        <Border BorderThickness="{TemplateBinding BorderThickness}" 
          BorderBrush="{TemplateBinding BorderBrush}"/> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsIndeterminate" Value="true"> 
         <Setter TargetName="Animation" Property="Visibility" Value="Visible" /> 

         <Trigger.EnterActions> 
          <BeginStoryboard> 
           <Storyboard RepeatBehavior="Forever"> 
            <DoubleAnimation 
             Storyboard.TargetName="HiderPreTransform" 
             Storyboard.TargetProperty="(ScaleTransform.ScaleX)" 
             To="1" 
             Duration="0:00:4" AutoReverse="True"/> 
            <DoubleAnimation 
             Storyboard.TargetName="HiderPostTransform" 
             Storyboard.TargetProperty="(ScaleTransform.ScaleX)" 
             To="0" 
             Duration="0:00:4" AutoReverse="True"/> 
           </Storyboard> 
          </BeginStoryboard> 
         </Trigger.EnterActions> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
    <Style.Triggers> 
     <Trigger Property="IsEnabled" Value="False"> 
      <Setter Property="Foreground" Value="Gray" /> 
     </Trigger> 
    </Style.Triggers> 
</Style>

來源

2015-05-21 14:30:15 Eun

相關問題

 相關問題