ExtendedImage Control for Universal Apps

image

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"/>

ezgif-1602574134

 

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>

ezgif-557298253

 

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>

 

ezgif-1957467604

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>

 

image

 

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

Install-Package ExtendedImage

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

Tareq Ateik

Read more posts by this author.