CODEWITHSUNDEEP
windows-phone-8progress-bar
warrior3hsan
warrior3hsan

Reputation: 175

Windows Phone 8 Progressbar

I am making a quiz game and for this reason, whenever a question is asked i need a time based progress bar which will actually decrease. Time will be very short like 1-3 second. I need a solution, so that I can make a progressbar that will animate to zero based on time.

Thanks for your reply.

Upvotes: 3

Views: 1552

Answers (3)

Anderson Almeida
Anderson Almeida

Reputation: 1

these examples show other ways to customize the progress bar. with customized wait screen.

http://developer.nokia.com/community/wiki/How_to_create_a_modal_wait_screen_with_spinner_on_Windows_Phone

http://developer.nokia.com/community/wiki/Retemplate_Windows_Phone_progress_bar_with_spinning_image

Upvotes: 0

Abhishek
Abhishek

Reputation: 1379

You can create an animation targeting the Value property of your ProgressBar.
Let's say you have added the ProgressBar as: 

<ProgressBar x:Name="progress"/>

Then add the StoryBoard in page Resources as (set the Duration based on your requirement): 

<phone:PhoneApplicationPage.Resources>
    <Storyboard x:Name="sb">
        <DoubleAnimation Storyboard.TargetName="progress"
                                 Storyboard.TargetProperty="Value"
                                 From="100" To="0" Duration="0:0:3"/>
    </Storyboard>
</phone:PhoneApplicationPage.Resources>

Run the animation from code behind as: 

sb.Begin();

Upvotes: 4

Kasun Kodagoda
Kasun Kodagoda

Reputation: 4024

Create this test app and then use it as reference to create your own or customize this as you need. Add the following XAML as your pages ContentPanel.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <StackPanel>
        <ProgressBar Name="progBar" Margin="0,24,0,0" />
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="Time (s) : " Margin="12,24,0,0"/>
            <TextBox Name="txtTime" Width="100" InputScope="Number" />
        </StackPanel>
        <Button Content="Start" HorizontalAlignment="Stretch" VerticalAlignment="Top" Click="Button_Click" />
    </StackPanel>
</Grid>

Then add the following code to the C# code behind. First declare the DispatecherTimer 

DispatcherTimer timer;

Then add this code..

private void Button_Click(object sender, RoutedEventArgs e)
{
    StartCountDown(int.Parse(txtTime.Text));
}

private void StartCountDown(int secs)
{
    timer = new DispatcherTimer();
    timer.Interval = TimeSpan.FromSeconds(0.1);

    progBar.Maximum = secs;
    progBar.Value = secs;
    timer.Tick += timer_Tick;
    timer.Start();
}

void timer_Tick(object sender, EventArgs e)
{
    progBar.Value = progBar.Value - 0.1;
    if (progBar.Value == 0)
    {
        timer.Stop();
        timer.Tick -= timer_Tick;
        MessageBox.Show("Time Over");
    }
}

Run the app enter a value in seconds and see the ProgressBar count down. Hope this helps.

Upvotes: 2

Related Questions