Live Chat Icon For mobile
Live Chat Icon

WPF FAQ - ProgressBar

Find answers for the most frequently asked questions
Expand All Collapse All

This can be done using the code given below.

[XAML]

        <Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
    xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' >
            <!-- For demonstration purposes, animate ProgressBar.Value -->
            <Page.Triggers>
                <EventTrigger RoutedEvent=’Page.Loaded’>
                    <BeginStoryboard>
                        <Storyboard TargetName=’ProgressBar’ TargetProperty=’Value’>
                            <DoubleAnimation From=’0’ To=’100’ Duration=’0:0:1’ />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Page.Triggers>
            <Grid Height='30' >
                <ProgressBar Name=’ProgressBar’ />
                <Viewbox>
                    <TextBlock>
        <TextBlock.Style>
          <Style TargetType=’TextBlock’>
            <!-- Make the text 'Loading ...' by default-->
            <Setter Property=’Text’ Value=’Loading ...’ />          
            <!-- But when ProgressBar.Value is 100, change the text to 'Complete' -->
            <Style.Triggers>
              <DataTrigger Binding=’{Binding Value, ElementName=ProgressBar}’ Value=’100’>
                <Setter Property=’Text’ Value=’Complete’ />
              </DataTrigger>
            </Style.Triggers>
          </Style>
        </TextBlock.Style>
      </TextBlock>
                </Viewbox>
            </Grid>
        </Page>

Permalink

This example creates a ProgressBar and uses an ’animation’ to simulate the progress of an operation.

[XAML]

<StatusBar Name='sbar' 
           VerticalAlignment='Bottom' Background='Beige' >

  <StatusBarItem>
    <TextBlock>Downloading File</TextBlock>
  </StatusBarItem>
  <StatusBarItem>
    <ProgressBar Width='100' Height='20'
                 Name='progressBar1'>
      <ProgressBar.Triggers>
        <EventTrigger RoutedEvent='ProgressBar.Loaded'>
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.TargetName='progressBar1' 
                Storyboard.TargetProperty='Value'
                From='0' To='100' Duration='0:0:5'  />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </ProgressBar.Triggers>
    </ProgressBar>
  </StatusBarItem>
  <StatusBarItem>
    <Separator/>	
  </StatusBarItem>
  <StatusBarItem>
    <TextBlock>Online</TextBlock>
  </StatusBarItem>
  <StatusBarItem HorizontalAlignment='Right'>
    <Image Source='images\help.bmp' Width='16' Height='16'/>
  </StatusBarItem>
</StatusBar>

Permalink

Share with

Couldn't find the FAQs you're looking for?

Please submit your question and answer.