ExtendedImage Control for Universal Apps

This is another control I’ve created, which is very simple yet extremely useful. In this post I’ll walk you through the features and how to use them:

Progress bar

In case you’re showing the user a big image that’s being downlaoded from the internet, It’s very useful to show the progress of downlaoding the image. To do this you will need to enable it by setting the IsProgressBarShown to true.


<controls:ExtendedImage Source="http://gallery.photo.net/photo/7203377-lg.jpg"
IsProgressBarShown="True"/>

Styling the progress bar

Probably you would need to change the styling of the progress bar. That can be done by overwriting the ProgressBarStyle


<controls:ExtendedImage Source="http://gallery.photo.net/photo/7203377-lg.jpg"
IsProgressBarShown="True">
<controls:ExtendedImage.ProgressBarStyle>
<Style TargetType="ProgressBar">
<Setter Property="VerticalAlignment" Value="Bottom" />
<Setter Property="Foreground" Value="#FF016FC1" />
<Setter Property="Height" Value="25" />
</Style>
</controls:ExtendedImage.ProgressBarStyle>
</controls:ExtendedImage>

Image is loading template

You can also instead of having a black box until the image loads, put a placeholder for the image until it loads. You will need first to enable the feature by setting the IsLoadingImageEnabled to True, and add a template for the loading image:


<controls:ExtendedImage Source="http://gallery.photo.net/photo/7203377-lg.jpg"
IsLoadingImageEnabled="True"
IsProgressBarShown="True">
<controls:ExtendedImage.LoadingImageTemplate>
<DataTemplate>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<ProgressRing IsActive="True" Width="50" Height="50" />
<TextBlock Text="Image is loading" FontSize="18" />
</StackPanel>
</DataTemplate>
</controls:ExtendedImage.LoadingImageTemplate>
<controls:ExtendedImage.ProgressBarStyle>
<Style TargetType="ProgressBar">
<Setter Property="VerticalAlignment" Value="Bottom" />
<Setter Property="Foreground" Value="#FF016FC1" />
<Setter Property="Height" Value="25" />
</Style>
</controls:ExtendedImage.ProgressBarStyle>
</controls:ExtendedImage>

Image failed to load

Image failure template is also available and can be used by setting the IsFailedImageEnabled to true, and change the FailedImageTemplate


<controls:ExtendedImage x:Name="img" Source="http://noimage"
IsFailedImageEnabled="True">
<controls:ExtendedImage.FailedImageTemplate>
<DataTemplate>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Text="!" FontSize="100" TextAlignment="Center" />
<TextBlock Text="Image is loading" FontSize="18" />
</StackPanel>
</DataTemplate>
</controls:ExtendedImage.FailedImageTemplate>
<controls:ExtendedImage.ProgressBarStyle>
<Style TargetType="ProgressBar">
<Setter Property="VerticalAlignment" Value="Bottom" />
<Setter Property="Foreground" Value="#FF016FC1" />
<Setter Property="Height" Value="25" />
</Style>
</controls:ExtendedImage.ProgressBarStyle>
</controls:ExtendedImage>

You can find the control by searching for “ExtendedImage” on Nuget, or by typing the following command in the Nuget console:

You’re free to use this control for any free or commercial project

Please reach me for any feature request (or bugs report) on Twitter @TareqAteik

Leave a Reply

Your email address will not be published. Required fields are marked *