進度主題與斜線裝飾

當前：

ProgressBar without decoration

裝飾：

ProgressBar with decoration

另外，那些空白的對角線應該從左到右移動選框動畫。目前我有這樣簡單的風格爲目前的外觀：

<Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ProgressBar}"> 
       <Border x:Name="BorderBackground" CornerRadius="3" BorderThickness="1" BorderBrush="{StaticResource ProgressBarBorderBrush}" Background="{StaticResource ProgressBarBackgroundBrush}"> 
        <Grid> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Determinate" /> 
           <VisualState x:Name="Indeterminate" /> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Border x:Name="PART_Track" Margin="2" BorderThickness="1" CornerRadius="2" /> 
         <Border x:Name="PART_Indicator" Margin="2" BorderThickness="1" CornerRadius="2" HorizontalAlignment="Left" Background="{StaticResource ProgressBarTrackBackgroundBrush}"/> 
        </Grid> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

任何人都可以幫助我得到它嗎？我搜索了它，但也許我錯過了正確的關鍵字找到這樣的東西，至少我通常看到（如在OS X progressbar），這種「裝飾」通常使用。

在此先感謝;）。

的答案代碼位修改解決方案模板：

<Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ProgressBar}"> 
       <Border x:Name="BorderBackground" CornerRadius="3" BorderThickness="1" BorderBrush="{StaticResource ProgressBarBorderBrush}" Background="{StaticResource ProgressBarBackgroundBrush}" Effect="{StaticResource LightStrongDownLinearShadowEffect}"> 
        <Grid> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Determinate" /> 
           <VisualState x:Name="Indeterminate" /> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Border x:Name="PART_Track" Margin="2" BorderThickness="1" CornerRadius="2" /> 
         <Border x:Name="PART_Indicator" Margin="2" BorderThickness="1" CornerRadius="2" HorizontalAlignment="Left" Background="{StaticResource ProgressBarTrackBackgroundBrush}" ClipToBounds="True"> 
          <Border x:Name="DiagonalDecorator" Width="5000"> 
           <Border.Background> 
            <DrawingBrush TileMode="Tile" Stretch="None" Viewbox="0,0,1,1" Viewport="0,0,25,25" ViewportUnits="Absolute"> 
             <DrawingBrush.RelativeTransform> 
              <TranslateTransform X="0" Y="0" /> 
             </DrawingBrush.RelativeTransform> 
             <DrawingBrush.Drawing> 
              <GeometryDrawing Brush="#20FFFFFF" Geometry="M10,0 22,0 12,25 0,22 Z" /> 
             </DrawingBrush.Drawing> 
            </DrawingBrush> 
           </Border.Background> 
           <Border.Triggers> 
            <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
             <BeginStoryboard> 
              <Storyboard> 
               <DoubleAnimation Storyboard.TargetProperty="(Border.Background).(DrawingBrush.RelativeTransform).(TranslateTransform.X)" From="0" To=".25" RepeatBehavior="Forever" Duration="0:0:15" /> 
              </Storyboard> 
             </BeginStoryboard> 
            </EventTrigger> 
           </Border.Triggers> 
          </Border> 
         </Border> 
        </Grid> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

來源

2011-12-22 dbalboa

請小心一個進度條與動畫和漸變可能會適得其反生產;它會花費CPU時間，當你已經在等待什麼... – 2011-12-22 15:36:03

嗯，我沒有看到任何性能問題測試。如果我看到什麼，生病發布。謝謝你的建議;） – dbalboa 2011-12-22 16:31:58

而Windows Phone進度條是著名的消耗太多功率：http://www.jeff.wilcox.name/2010/08/performanceprogressbar/ – 2011-12-22 17:42:43

編輯：從codeproject.com

This文章有「理髮極」進度條的工作版本。搜索文章「CandyCaneProgressPainter」。

以前的答案：

This做幾乎正是你想要的。您需要做的只是將矩形的可見性限制爲您想要的百分比並更改高度/寬度比率。

你想要的關鍵詞是「故事板」，「動畫」和「觸發」

這裏是從鏈接與一些評論的鏈接XAML上製作動畫流暢：

<Rectangle x:Name="pole" Width="100" Height="20" Stroke="Black" StrokeThickness="1"> 
    <Rectangle.Fill> 
    <DrawingBrush TileMode="Tile" Stretch="None" Viewbox="0,0,1,1" Viewport="0,0,25,25" ViewportUnits="Absolute"> 
    <DrawingBrush.RelativeTransform> 
    <TranslateTransform X="0" Y="0" /> 
    </DrawingBrush.RelativeTransform> 
    <DrawingBrush.Drawing> 
    <GeometryDrawing Brush="Red" Geometry="M10,0 25,0 15,25 0,25 Z" /> </DrawingBrush.Drawing> 
    </DrawingBrush> 
    </Rectangle.Fill> 
    <Rectangle.Triggers> 
    <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
    <BeginStoryboard> 
    <Storyboard> 
     <DoubleAnimation Storyboard.TargetProperty="(Rectangle.Fill).(DrawingBrush.RelativeTransform).(TranslateTransform.X)" From="0" To=".25" RepeatBehavior="Forever" Duration="0:0:1" /> 
    </Storyboard> 
    </BeginStoryboard> 
    </EventTrigger> 
    </Rectangle.Triggers> 
</Rectangle>

我想如果你刪除「寬度」值痙攣發生，但如果該值被放回到它運行平穩。奇怪的。

是啊，確實是它基本上需要用數字的倍數一些調整規則在這種情況下，寬度動畫可以.1或0.05舉例來說如果你有5000的寬度....現在工作很棒！

來源

2011-12-22 15:33:15 mydogisbox

codeproject文章是偉大的，但它的WinForms。沒關係，它是一個很好的;）。我用了你的第一個答案做什麼我想要的，它工作得很好，有一些調整。正如他們所說的那樣使用5.000寬度，並調整持續時間以使其平滑。同時標記父元素的屬性ClipToBounds = True。謝謝！ PD：寫得不好用的問題後解決方案的模板。 – dbalboa 2011-12-22 16:21:49

嗯，原以爲是。噢，那麼我猜我會刪除它。對於它的價值，winforms控件可以用wpf來託管。 – mydogisbox 2011-12-22 16:38:34

在你PART_Indicator邊框嵌入形狀的複合路徑，使對角線。除非你想使用jquery插件或其他替代方法，否則你必須假裝Marquee效果來獲得滾動對角線。

然而，你可以在純xaml中做的是創建對角線路徑，使很多很多的診斷線條非常長。由於它們嵌入指標邊框，因此只能在其中顯示。

現在創建一個新的故事板動畫並使用ControlStoryboardAction行爲來觸發其onload並將其設置爲重複。抓住對角線複合路徑an在時間軸上選擇一個關鍵幀，從開始幀開始，然後將對角線的複合路徑拖到一側，或者將一個大的邊距設置到左側，這樣在動畫序列中向右移動。這個想法是一個視覺騙局。您的對角線只會作爲動畫故事板，僅模仿選取框動畫。所以這些線條仍然會穿過酒吧，並希望在內容加載之前，足夠多的動畫不會重複。希望這是有道理的哈哈。它需要一些調整，但你可以導致一個體面的解決方案。祝你好運！

來源

2011-12-22 15:27:20

謝謝！最後做出來的與Mydogisbox答案，但你的想法是正確的，只要你有你的答案） – dbalboa 2011-12-22 16:27:44

不用擔心，當我貼我沒有注意到其他的。聖誕節快樂！ :) – 2011-12-22 16:33:01

這個職位是很老，但我只是遇到了同樣的問題，得到了一個很好的解決方案，我想與大家分享：

<SolidColorBrush x:Key="ProgressBarBackgroundBrush" Color="Gray" /> 
    <SolidColorBrush x:Key="ProgressBarTrackBackgroundBrush" Color="#105295" /> 
    <Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type ProgressBar}"> 
         <controls:RoundBorder x:Name="BorderBackground" CornerRadius="3" BorderThickness="0" 
         BorderBrush="{StaticResource ProgressBarBorderBrush}" 
         Background="{StaticResource ProgressBarBackgroundBrush}"> 
          <Grid> 
           <VisualStateManager.VisualStateGroups> 
            <VisualStateGroup x:Name="CommonStates"> 
             <VisualState x:Name="Determinate" /> 
             <VisualState x:Name="Indeterminate" /> 
            </VisualStateGroup> 
           </VisualStateManager.VisualStateGroups> 
           <Border x:Name="PART_Track" Margin="0" BorderThickness="0" CornerRadius="3" /> 
           <Border x:Name="PART_Indicator" Margin="0" BorderThickness="0" CornerRadius="3" HorizontalAlignment="Left" 
           Background="{StaticResource ProgressBarTrackBackgroundBrush}" ClipToBounds="True"> 
            <Border x:Name="DiagonalDecorator" Width="5000"> 
             <Border.Background> 
              <DrawingBrush TileMode="Tile" Stretch="None" Viewbox="0,0,1,1" Viewport="0,0,36,34" ViewportUnits="Absolute"> 
               <DrawingBrush.RelativeTransform> 
                <TranslateTransform X="0" Y="0" /> 
               </DrawingBrush.RelativeTransform> 
               <DrawingBrush.Drawing> 
                <GeometryDrawing Brush="#156dc7" Geometry="M0,0 18,0 36,34 18,34 Z" /> 
               </DrawingBrush.Drawing> 
              </DrawingBrush> 
             </Border.Background> 
             <Border.Triggers> 
              <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
               <BeginStoryboard> 
                <Storyboard> 
                 <DoubleAnimation Storyboard.TargetProperty="(Border.Background).(DrawingBrush.RelativeTransform).(TranslateTransform.X)" 
                From="0" To=".36" RepeatBehavior="Forever" Duration="0:0:18" /> 
                </Storyboard> 
               </BeginStoryboard> 
              </EventTrigger> 
             </Border.Triggers> 
            </Border> 
           </Border> 
          </Grid> 
         </controls:RoundBorder > 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style>

來源

2016-01-06 10:30:32 thardes2

進度主題與斜線裝飾

回答

相關問題