CODEWITHSUNDEEP
windows-phoneprogress-bar
user3506135
user3506135

Reputation: 11

Displaying a Progress Bar

I have an image control in my main page and the code is as follows:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <StackPanel HorizontalAlignment="Left" Height="597" VerticalAlignment="Top" Width="440">
        <Image x:Name="hinh1" Height="488" Stretch="Fill"/>
        <ProgressBar Name="loading" Height="10" IsIndeterminate="True" Visibility="Collapsed"/>
    </StackPanel>
</Grid>

and in code behind i have this code :

   Uri hinh = new Uri
          ("http://taigamejar.net/wp-content/uploads/2014/01/Hinh-Anh-Dep-5.jpg", UriKind.Absolute);
        hinh1.Source = new BitmapImage(hinh);

While waiting for the image to load, I want to call progress bar run to inform the user that it is loading. Once the the image has loaded, the progress bar should disappear. How can I do this?

Upvotes: 1

Views: 1102

Answers (1)

Onur Tırpan
Onur Tırpan

Reputation: 537

If I were you, I would prefer to use , not ProgressBar.

So, I'll give 

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    loading.IsActive = true;
    Uri hinh = new Uri
    ("http://taigamejar.net/wp-content/uploads/2014/01/Hinh-Anh-Dep-5.jpg", UriKind.Absolute);
    hinh1.Source = new BitmapImage(hinh);

    hinh1.ImageOpened+=hinh1_ImageOpened; //loadingbar will be disappear when this triggered
}

private void hinh1_ImageOpened(object sender, RoutedEventArgs e)
{
    loading.IsActive = false; //this will disable the progressring.
}

And XAML:

    <StackPanel HorizontalAlignment="Left" Height="597" VerticalAlignment="Top" Width="400">
        <Image x:Name="hinh1" Height="488" Stretch="Fill" ImageOpened="hinh1_ImageOpened"/>
        <ProgressRing Name="loading" Height="109" IsActive="True"  />
    </StackPanel>

If you don't have WP8.1 SDK yet, you can get ProgressRing here: http://www.onurtirpan.com/onur-tirpan/english/windows-phone-english/using-progressring-in-windows-phone/

Upvotes: 3

Related Questions