ImageControl with ProgressRing display for Win 8 / RT

What for?

In any Windows 8 / RT application, you need to display a certain amount of graphics. Resources can be scooped everywhere: directly from the Web and constantly download files; once you get the files to work with them through IsolatedStorage and so on. Everything is fine until such time as the download of this graphic starts to take a long time (even a second is a lot). At this point, it is required to visually "reassure" the user, and take an empty space, in which an image will appear in a moment. Here, ProgressRing comes to our rescue and, of course, it is most convenient to write one control once and forget about it for a long time.

Idea

The idea is really trivial: Border , Image , ProgressRing - we will not need anything else.

• Border : in case you want to circle a picture. Far from the most essential element, but sometimes very necessary.
• ProgressRing : will be visible at the moment when the ImageSource already assigned, but the Image is not yet open.
• Image : Naturally, the most important element for which we all started.

Principle of operation

Just playing with Transparency ProgressRing . We have two entry points: the ImageOpened event (hiding the ProgressRing ) and the destination of the new ImageSource (showing the ProgressRing ).
')

Code

ProgressImage.xaml

 <UserControl x:Class="test.Controls.ProgressImage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:test.Controls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400"> <Border x:Name="Border" BorderThickness="1" > <Grid> <ProgressRing x:Name="Ring" Width="100" Height="100" IsActive="True" Foreground="#FF6D31F5" /> <Image x:Name="Image" Margin="0" ImageOpened="Image_OnImageOpened" /> </Grid> </Border> </UserControl> 

ProgressImage.cs

  public sealed partial class ProgressImage : UserControl { #region Common public ProgressImage() { InitializeComponent(); } private void Image_OnImageOpened(object sender, RoutedEventArgs e) { Ring.Opacity = 0; } #endregion #region Dependency private static readonly Color DefRingColor = Colors.BlueViolet; private static readonly Color DefBorderColor = Colors.White; private static readonly ImageSource DefSource = null; private const Stretch DefStretch = Stretch.None; /// <summary> /// Set Image Source /// </summary> public ImageSource Source { get { return (ImageSource)GetValue(SourceProperty); } set { SetValue(SourceProperty, value); } } public static readonly DependencyProperty SourceProperty = DependencyProperty.Register("Source", typeof(ImageSource), typeof(ProgressImage), new PropertyMetadata(DefSource,SourceChanged)); private static void SourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var controll = (ProgressImage)d; var val = (ImageSource)e.NewValue; controll.Image.Source = val; controll.Ring.Opacity = 100; } /// <summary> /// Set ProgressRing Size /// </summary> public int ProgressRingSize { get { return (int)GetValue(ProgressRingSizeProperty); } set { SetValue(ProgressRingSizeProperty, value); } } public static readonly DependencyProperty ProgressRingSizeProperty = DependencyProperty.Register("ProgressRingSize", typeof(int), typeof(ProgressImage), new PropertyMetadata(55, ProgressRingSizeChanged)); private static void ProgressRingSizeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var controll = (ProgressImage)d; var val = (int)e.NewValue; controll.Ring.Width = val; controll.Ring.Height = val; } /// <summary> /// Set ProgressRing Color /// </summary> public Color ProgressRingColor { get { return (Color)GetValue(ProgressRingcolorProperty); } set { SetValue(ProgressRingcolorProperty, value); } } public static readonly DependencyProperty ProgressRingcolorProperty = DependencyProperty.Register("ProgressRingColor", typeof(Color), typeof(ProgressImage), new PropertyMetadata(DefRingColor, ProgressRingColorChanged)); private static void ProgressRingColorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var controll = (ProgressImage)d; var val = (Color)e.NewValue; controll.Ring.Foreground = new SolidColorBrush(val); } /// <summary> /// Set Border Color /// </summary> public Color BorderColor { get { return (Color)GetValue(BorderColorProperty); } set { SetValue(BorderColorProperty, value); } } public static readonly DependencyProperty BorderColorProperty = DependencyProperty.Register("BorderColor", typeof(Color), typeof(ProgressImage), new PropertyMetadata(DefBorderColor, BorderColorChanged)); private static void BorderColorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var controll = (ProgressImage)d; var val = (Color)e.NewValue; controll.Border.BorderBrush = new SolidColorBrush(val); } /// <summary> /// Set BorderThickness /// </summary> public double BorderSize { get { return (double)GetValue(BorderSizeProperty); } set { SetValue(BorderSizeProperty, value); } } public static readonly DependencyProperty BorderSizeProperty = DependencyProperty.Register("BorderSize", typeof(double), typeof(ProgressImage), new PropertyMetadata(0.0, BorderSizeChanged)); private static void BorderSizeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var controll = (ProgressImage)d; var val = (double)e.NewValue; controll.Border.BorderThickness = new Thickness(val); } /// <summary> /// Set Border Corner Radius /// </summary> public int BorderCornerRadius { get { return (int)GetValue(BorderCornerRadiusProperty); } set { SetValue(BorderCornerRadiusProperty, value); } } public static readonly DependencyProperty BorderCornerRadiusProperty = DependencyProperty.Register("BorderCornerRadius", typeof(int), typeof(ProgressImage), new PropertyMetadata(0, BorderCornerRadiusChanged)); private static void BorderCornerRadiusChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var controll = (ProgressImage)d; var val = (int)e.NewValue; controll.Border.CornerRadius = new CornerRadius(val); } /// <summary> /// Set Image Stretch /// </summary> public Stretch ImageStretch { get { return (Stretch)GetValue(ImageStretchProperty); } set { SetValue(ImageStretchProperty, value); } } public static readonly DependencyProperty ImageStretchProperty = DependencyProperty.Register("ImageStretch", typeof(Stretch), typeof(ProgressImage), new PropertyMetadata(DefStretch, ImageStretchChanged)); private static void ImageStretchChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var controll = (ProgressImage)d; var val = (Stretch)e.NewValue; controll.Image.Stretch = val; } /// <summary> /// Set Image Stretch /// </summary> public double ImageMargin { get { return (double)GetValue(ImageMarginProperty); } set { SetValue(ImageMarginProperty, value); } } public static readonly DependencyProperty ImageMarginProperty = DependencyProperty.Register("ImageMargin", typeof(double), typeof(ProgressImage), new PropertyMetadata(0.0, ImageMarginChanged)); private static void ImageMarginChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var controll = (ProgressImage)d; var val = (double)e.NewValue; controll.Image.Margin = new Thickness(val); } #endregion } 

The list of settings includes (the names speak, but still worth explaining):

• Source - destination ImageSource
• ProgressRingSize - ProgressRing sizes
• ProgressRingColor - color ProgressRing
• BorderColor - Border Color
• BorderSize - BorderThickness
• BorderCornerRadius - Border Angles Size Border
• ImageStretch - speaks for itself
• ImageMargin - Margin assignment for Image relative to Border
• ControlBackground - assignment of the background color of the entire control

It is extremely easy to use.

Do not forget about:

 xmlns:controls="using:test.Controls" 

And easy to use:

 <controls:ProgressImage x:Name="ProgressImage" Grid.Column="1" Margin="0,0,20,0" Width="300" Height="300" BorderSize="3" BorderColor="White" ProgressRingColor="Red" ImageStretch="None" ProgressRingSize="60" HorizontalAlignment="Right" VerticalAlignment="Center"/> 

What do we get?

Having such a control at hand allows you to correct it at any moment to fit your specific needs. The basic settings are already included, and adding new ones is a two-minute deal. I sincerely hope that someone will save time. But what it looks like.


Objective / biased criticism, as well as suggestions for improving the boot, are extremely well received.