Databases
StackOverflow2013
Postsdbo
POProgressBar Theme with diagonal lines decorator
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POProgressBar Theme with diagonal lines decorator
    primarykey
    data
    text
    <p>I want to decorate the WPF ProgressBar like the image below:</p> <p><strong>Current</strong>:</p> <p><img src="https://i.stack.imgur.com/0faNo.png" alt="ProgressBar without decoration"></p> <p><strong>Decorated</strong>:</p> <p><img src="https://i.stack.imgur.com/qcRFO.png" alt="ProgressBar with decoration"></p> <p>Also, those blank diagonal lines should move in marquee animation from left to right. At the moment i have this simple Style for the current appearance:</p> <pre><code>&lt;Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}"&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="{x:Type ProgressBar}"&gt; &lt;Border x:Name="BorderBackground" CornerRadius="3" BorderThickness="1" BorderBrush="{StaticResource ProgressBarBorderBrush}" Background="{StaticResource ProgressBarBackgroundBrush}"&gt; &lt;Grid&gt; &lt;VisualStateManager.VisualStateGroups&gt; &lt;VisualStateGroup x:Name="CommonStates"&gt; &lt;VisualState x:Name="Determinate" /&gt; &lt;VisualState x:Name="Indeterminate" /&gt; &lt;/VisualStateGroup&gt; &lt;/VisualStateManager.VisualStateGroups&gt; &lt;Border x:Name="PART_Track" Margin="2" BorderThickness="1" CornerRadius="2" /&gt; &lt;Border x:Name="PART_Indicator" Margin="2" BorderThickness="1" CornerRadius="2" HorizontalAlignment="Left" Background="{StaticResource ProgressBarTrackBackgroundBrush}"/&gt; &lt;/Grid&gt; &lt;/Border&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; </code></pre> <p>Anyone can help me to get it? I searched for it but maybe i missed the correct keywords to find something like this, at least i usually see (like at OS X progressbar) that this "decoration" is usually used.</p> <p>Thanks in advance ;).</p> <hr> <p><strong>Solution template with the answer code a bit modified:</strong></p> <pre><code>&lt;Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}"&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="{x:Type ProgressBar}"&gt; &lt;Border x:Name="BorderBackground" CornerRadius="3" BorderThickness="1" BorderBrush="{StaticResource ProgressBarBorderBrush}" Background="{StaticResource ProgressBarBackgroundBrush}" Effect="{StaticResource LightStrongDownLinearShadowEffect}"&gt; &lt;Grid&gt; &lt;VisualStateManager.VisualStateGroups&gt; &lt;VisualStateGroup x:Name="CommonStates"&gt; &lt;VisualState x:Name="Determinate" /&gt; &lt;VisualState x:Name="Indeterminate" /&gt; &lt;/VisualStateGroup&gt; &lt;/VisualStateManager.VisualStateGroups&gt; &lt;Border x:Name="PART_Track" Margin="2" BorderThickness="1" CornerRadius="2" /&gt; &lt;Border x:Name="PART_Indicator" Margin="2" BorderThickness="1" CornerRadius="2" HorizontalAlignment="Left" Background="{StaticResource ProgressBarTrackBackgroundBrush}" ClipToBounds="True"&gt; &lt;Border x:Name="DiagonalDecorator" Width="5000"&gt; &lt;Border.Background&gt; &lt;DrawingBrush TileMode="Tile" Stretch="None" Viewbox="0,0,1,1" Viewport="0,0,25,25" ViewportUnits="Absolute"&gt; &lt;DrawingBrush.RelativeTransform&gt; &lt;TranslateTransform X="0" Y="0" /&gt; &lt;/DrawingBrush.RelativeTransform&gt; &lt;DrawingBrush.Drawing&gt; &lt;GeometryDrawing Brush="#20FFFFFF" Geometry="M10,0 22,0 12,25 0,22 Z" /&gt; &lt;/DrawingBrush.Drawing&gt; &lt;/DrawingBrush&gt; &lt;/Border.Background&gt; &lt;Border.Triggers&gt; &lt;EventTrigger RoutedEvent="FrameworkElement.Loaded"&gt; &lt;BeginStoryboard&gt; &lt;Storyboard&gt; &lt;DoubleAnimation Storyboard.TargetProperty="(Border.Background).(DrawingBrush.RelativeTransform).(TranslateTransform.X)" From="0" To=".25" RepeatBehavior="Forever" Duration="0:0:15" /&gt; &lt;/Storyboard&gt; &lt;/BeginStoryboard&gt; &lt;/EventTrigger&gt; &lt;/Border.Triggers&gt; &lt;/Border&gt; &lt;/Border&gt; &lt;/Grid&gt; &lt;/Border&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USH.B.
    1. USdbalboa
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POProgressBar Theme with diagonal lines decorator
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POProgressBar Theme with diagonal lines decorator
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POProgressBar Theme with diagonal lines decorator
      1. This table or related slice is empty.
      1. VTUpMod
    1. COPlease, beware that a Progress Bar with animations and gradients might be counter productive; it will cost CPU time when you are already waiting for something...
      singulars
      1. POProgressBar Theme with diagonal lines decorator
      1. USErno de Weerd
    2. COHmmm, i didnt saw any performance issues testing it. If i see something, ill post it. Thanks for the advice ;)
      singulars
      1. POProgressBar Theme with diagonal lines decorator
      1. USdbalboa
    3. COThe Windows Phone progress bar is famous for consuming too much power: http://www.jeff.wilcox.name/2010/08/performanceprogressbar/
      singulars
      1. POProgressBar Theme with diagonal lines decorator
      1. USErno de Weerd
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload