ProgressBar Demo

image_pdfimage_print


   
    

<Window x:Class="SimpleStyles.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="SimpleStyles"
  Background="#F8F8F8">
  <ScrollViewer>
    <WrapPanel>
      <HeaderedItemsControl Header="ProgressBar">
        <StackPanel>
          <ProgressBar HorizontalAlignment="Center" Margin="8" Value="20" />
          <ProgressBar HorizontalAlignment="Center" Margin="8" Value="90" />
        </StackPanel>
      </HeaderedItemsControl>

   
    </WrapPanel>
  </ScrollViewer>
</Window>

   
    
    
    
     


ProgressBar and Animation

image_pdfimage_print


   
      


<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="UseProgressBar" Height="140" Width="300">
    <Grid>
        <ProgressBar Height="21" Name="prgTime" VerticalAlignment="Bottom" />
        <Button Height="23" Margin="100,16,100,0" Name="btnStart" VerticalAlignment="Top" Content="Start">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard Duration="5">
                                <DoubleAnimation Storyboard.TargetName="prgTime"
                                    Storyboard.TargetProperty="Value"
                                    Duration="0:0:5" 
                                    From="0"
To="100" />
                                <DoubleAnimation Storyboard.TargetName="prgTime"
                                    Storyboard.TargetProperty="Value"
                                    BeginTime="0:0:6"
                                    Duration="0:0:0" 
                                    From="100"
To="0" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>

   
    
    
    
    
    
     


Set grid rectangle template for ProgressBar

image_pdfimage_print


   
      
<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF" Height="120" Width="300">
    <Window.Resources>
        <Style
            TargetType="{x:Type ProgressBar}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate 
                        TargetType="{x:Type ProgressBar}">
                        <Grid MinHeight="20" MinWidth="240">
                            <Rectangle Name="PART_Track" Fill="Gainsboro" Stroke="Gray" StrokeThickness="1" />
                            <Rectangle Name="PART_Indicator" Fill="DarkGray" Stroke="Gray" StrokeThickness="1" HorizontalAlignment="Left" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <StackPanel>
        <ProgressBar x:Name="progress" Value="30" HorizontalAlignment="Center" Margin="10"/>
    </StackPanel>

</Window>

   
    
    
    
    
    
     


ProgressBar with five iterations

image_pdfimage_print


   
  


<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ProgBar.Window1"
    Title ="ProgressBar"
    Width="500">

  <StackPanel>
    <Button Content="One" Click="MakeOne"/>
    <StatusBar Name="sbar" Grid.Column="0" Grid.Row="5" VerticalAlignment="Bottom" Background="Beige" >
      <StatusBarItem>
        <TextBlock>StatusBar</TextBlock>
      </StatusBarItem>
    </StatusBar>
  </StackPanel>
</Window>
//File:Window.xaml.cs
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;



namespace ProgBar
{

    public partial class Window1 : Window
    {
        
        private void MakeOne(object sender, RoutedEventArgs e)
        {
            sbar.Items.Clear();
            TextBlock txtb = new TextBlock();
            txtb.Text = "ProgressBar with five iterations.";
            sbar.Items.Add(txtb);
            Image image = new Image();
            BitmapImage bi = new BitmapImage();
            bi.BeginInit();
            bi.UriSource = new Uri(@"pack://application:,,,/sunset.png");
            bi.EndInit();
            image.Source = bi;
            ImageBrush imagebrush = new ImageBrush(bi);

            ProgressBar progbar = new ProgressBar();
            progbar.Background = imagebrush;
            progbar.Width = 150;
            progbar.Height = 15;
            Duration duration = new Duration(TimeSpan.FromMilliseconds(2000));
            DoubleAnimation doubleanimation = new DoubleAnimation(100.0, duration);
            doubleanimation.RepeatBehavior = new RepeatBehavior(5);
            progbar.BeginAnimation(ProgressBar.ValueProperty, doubleanimation);
            sbar.Items.Add(progbar);
        } 
     }
}

   
    
     


ProgressBar with infinite iterations

image_pdfimage_print


   
  


<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ProgBar.Window1"
    Title ="ProgressBar"
    Width="500">

  <StackPanel>
    <Button Content="One" Click="MakeOne"/>
    <StatusBar Name="sbar" Grid.Column="0" Grid.Row="5" VerticalAlignment="Bottom" Background="Beige" >
      <StatusBarItem>
        <TextBlock>StatusBar</TextBlock>
      </StatusBarItem>
    </StatusBar>
  </StackPanel>
</Window>
//File:Window.xaml.cs
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;



namespace ProgBar
{

    public partial class Window1 : Window
    {
        
        private void MakeOne(object sender, RoutedEventArgs e)
        {
           sbar.Items.Clear();
           Label lbl = new Label();
           lbl.Background = new LinearGradientBrush(Colors.LightBlue,        
                                                    Colors.SlateBlue, 90);
           lbl.Content = "ProgressBar with infinite iterations.";
           sbar.Items.Add(lbl);
           ProgressBar progbar = new ProgressBar();
           progbar.Width = 150;
           progbar.Height = 15;
           Duration duration = new Duration(TimeSpan.FromSeconds(1));
           DoubleAnimation doubleanimation = new DoubleAnimation(100.0, duration);
           doubleanimation.RepeatBehavior = RepeatBehavior.Forever;
           progbar.BeginAnimation(ProgressBar.ValueProperty, doubleanimation);
           sbar.Items.Add(progbar);
        } 
     }
}

   
    
     


Indeterminate ProgressBar

image_pdfimage_print


   
  

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ProgBar.Window1"
    Title ="ProgressBar"
    Width="500">

  <StackPanel>
    <Button Content="One" Click="MakeOne"/>
    <StatusBar Name="sbar" Grid.Column="0" Grid.Row="5" VerticalAlignment="Bottom" Background="Beige" >
      <StatusBarItem>
        <TextBlock>StatusBar</TextBlock>
      </StatusBarItem>
    </StatusBar>
  </StackPanel>
</Window>
//File:Window.xaml.cs
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;



namespace ProgBar
{

    public partial class Window1 : Window
    {
        
        private void MakeOne(object sender, RoutedEventArgs e)
        {
            sbar.Items.Clear();
             Label lbl = new Label();
             lbl.Background = new LinearGradientBrush(Colors.Pink, Colors.Red, 90);
             lbl.Content = "Indeterminate ProgressBar.";
             sbar.Items.Add(lbl);
             //<Snippet3>
             ProgressBar progbar = new ProgressBar();
             progbar.Background = Brushes.Gray;
             progbar.Foreground = Brushes.Red;
             progbar.Width = 150;
             progbar.Height = 15;
             progbar.IsIndeterminate = true;
             //</Snippet3>
             sbar.Items.Add(progbar);
        } 
     }
}

   
    
     


RadialGradientBrush Opacity from 1 to 0

image_pdfimage_print


   
  

<Window x:Class="Workspace.DockExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Workspace" Width="640" Height="480">
    <Window.Resources>
        <GradientStopCollection x:Key="myGradientStops">
      <GradientStop Color="Blue" Offset="0.0" />
      <GradientStop Color="Black" Offset="0.5" />
      <GradientStop Color="Transparent" Offset="1.0" />
    </GradientStopCollection>
    </Window.Resources>
    <StackPanel>
    <Rectangle Width="100" Height="50" Stroke="Black" StrokeThickness="1">
      <Rectangle.Fill>
        <RadialGradientBrush GradientStops="{StaticResource myGradientStops}" Opacity="1.0" />
      </Rectangle.Fill>
    </Rectangle>
    <Rectangle Width="100" Height="50" Stroke="Black" StrokeThickness="1" >
      <Rectangle.Fill>
        <RadialGradientBrush GradientStops="{StaticResource myGradientStops}" Opacity="0.75" />
      </Rectangle.Fill>
    </Rectangle>
    <Rectangle Width="100" Height="50" Stroke="Black" StrokeThickness="1">
      <Rectangle.Fill>
        <RadialGradientBrush GradientStops="{StaticResource myGradientStops}" Opacity="0.5" />
      </Rectangle.Fill>
    </Rectangle>
    <Rectangle Width="100" Height="50" Stroke="Black" StrokeThickness="1">
      <Rectangle.Fill>
        <RadialGradientBrush GradientStops="{StaticResource myGradientStops}" Opacity="0.25" />
      </Rectangle.Fill>
    </Rectangle>
    <Rectangle Width="100" Height="50" Stroke="Black" StrokeThickness="1">
      <Rectangle.Fill>
        <RadialGradientBrush GradientStops="{StaticResource myGradientStops}" Opacity="0" />
      </Rectangle.Fill>
    </Rectangle>
    </StackPanel>
</Window>