Win8 / RT用ProgressRingを使用したImageControl

なんで？

Windows 8 / RTアプリケーションでは、一定量のグラフィックを表示する必要があります。 リソースはどこからでもスクープできます。Webから直接ダウンロードし、常にファイルをダウンロードします。 IsolatedStorage



などを介してファイルを処理するためにファイルを受け取った。 すべては、このグラフィックのロードに時間がかかるようになるまで（1秒でもたくさんあります）うまくいきます。 この時点で、ユーザーを視覚的に「再確認」し、画像が瞬時に表示される空きスペースを確保する必要があります。 ここでProgressRing



は私たちの助けになります。当然、一度コントロールを書いて、長い間それを忘れることが最も便利です。

アイデア

アイデアは本当に一般的です： Border



、 Image



、 ProgressRing



他に何も必要ありません。

• Border
  
  
  
  ：画像を丸で囲む必要がある場合。 最も義務的な要素とはほど遠いですが、時には非常に必要です。
• ProgressRing
  
  
  
  ： ImageSource
  
  
  
  既に割り当てられているが、 Image
  
  
  
  がまだ開いていないときに表示されImageSource
  
  
  
  。
• Image
  
  
  
  ：当然、私たち全員が始めた最も重要な要素。

動作原理

ProgressRing



透明度で遊ぶだけです。 2つのエントリポイントがあります： 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



Border
  
  
  
  関連するImage



Margin
  
  
  
  割り当て
• ControlBackground
  
  
  
  コントロール全体の背景色を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"/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

何が得られますか？

このようなコントロールが手元にあることで、特定のニーズに合わせていつでも微調整できます。 基本設定はすでに含まれており、新しい設定の追加は2分間の作業です。 誰かが時間を節約してくれることを心から願っています。 そして、これがどのように見えるかです。





客観的/偏った批判、およびブーツを改善するための提案は非常に好評です。