Windows Phone 8 Progressbar

I am doing a quiz and for this reason whenever a question is asked I need a time indicator that will actually decrease. The time will be very short, like 1-3 seconds. I need a solution so that I can make a progress bar that animates to zero over time.

Thanks for your reply.

+3


source to share


3 answers


You can create animation targeting the Value property of your ProgressBar.
Let's say you added a ProgressBar like:

<ProgressBar x:Name="progress"/>

      

Then add StoryBoard to the Resources page 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>

      

Start the animation from the code behind:

sb.Begin();

      

+4


source


Build this test app and then use it as a reference to create your own or customize it as needed. Add the following XAML to 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 your C # code. First declareDispatecherTimer

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 application, enter a value in seconds, and view the counter ProgressBar

. Hope this helps.

+2


source


0


source







All Articles