ImageControl с показом ProgressRing для Win 8/RT

Зачем?

В любой Windows 8/RT прилижении требуется отображать определенное количество графики. Ресурсы можно черпать повсеместно: напрямую из Web и постоянно выкачивать файлы; единажды получив файлы работать с ними через IsolatedStorage и так далее. Все хорошо до таго момента, пока загрузка этой графики не начинает занимать продолжнительное время (даже секунда это много). В этот момент требуется визуально «обнадежить» пользователя, и занять пустое место, на котором через мгновение появится изображение. Тут нам на помощь приходит ProgressRing и, естественно, удобнее всего написать один раз контрол и забыть об это надолго.

Идея

Идея действительнобанальна: Border, Image, ProgressRing — больше ничего нам не понадобится.

• Border : на тот случай, если требуется обвести картинку. Далеко не самый обязательный элемент, но, иногда, очень необходимый.
• ProgressRing : будет виден в тот момент, когда ImageSource уже назначено, но Image еще не открыт.
• Image: естественно, самый важный элемент ради которого мы все и затеяли.

Принцип работы

Просто играемся с прозрачностью ProgressRing . Имеем две точки входа: событие ImageOpened (скрываем ProgressRing) и место назначения нового ImageSource(показываемProgressRing).

Код

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

    }

Список насроек ключает в себя (имена говорящие, но все равно стоит пояснить):

• Source — назначение ImageSource
• ProgressRingSize — размеры ProgressRing
• ProgressRingColor — цветProgressRing
• BorderColor — цветBorder
• BorderSize — размер BorderThickness
• BorderCornerRadius — размер радиуса углов Border
• ImageStretch — говорит само за себя
• ImageMargin — назначение Margin для Image относительно Border
• ControlBackground — назначение цвета фона всего контрола

Использывать крайне просто:

Не забывае про:

xmlns:controls="using:test.Controls"

И легко используем:

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

Что мы получаем?

Наличие под рукой такого контрола — позволяет в любую минуту его подправить под свои конкретные нужны. Основные настройки уже включены, а добавить новые — двухминутное дело. Искренне надеюсь, что кому-нибудь сэкономил время. А вот как выглядет это.

Объективная/необъективная критика, а также предложения по улучшению бутут крайне хорошо восприняты.

Автор: jimpanzer

Источник