विन 8 / आरटी के लिए प्रोग्रेसिंग के साथ इमेजकंट्रोल

क्यों?

किसी भी विंडोज 8 / आरटी एप्लिकेशन में, आपको ग्राफिक्स की एक निश्चित मात्रा प्रदर्शित करने की आवश्यकता है। संसाधनों को हर जगह स्कूप किया जा सकता है: सीधे वेब से और लगातार फाइलें डाउनलोड करें; एक बार IsolatedStorage और इतने पर के माध्यम से उनके साथ काम करने के लिए फ़ाइलें प्राप्त की। यह सब तब तक ठीक है जब तक कि इस ग्राफिक को लोड करने में लंबा समय लगने लगे (एक सेकंड भी बहुत)। इस समय, उपयोगकर्ता को "आश्वस्त" करने के लिए यह आवश्यक है, और एक खाली जगह लें, जिस पर एक छवि तुरंत दिखाई देगी। यहां ProgressRing हमारी सहायता के लिए आती है और, स्वाभाविक रूप से, एक बार नियंत्रण लिखना और लंबे समय तक इसके बारे में भूलना सबसे सुविधाजनक है।

विचार

यह विचार वास्तव में सामान्य है: Border , Image , ProgressRing - हमें किसी और चीज की आवश्यकता नहीं है।

• Border : यदि आपको चित्र को घेरना हो तो। सबसे अनिवार्य तत्व से दूर, लेकिन कभी-कभी बहुत आवश्यक है।
• ProgressRing : उस समय दिखाई देगा जब ImageSource पहले ImageSource ही असाइन किया गया है, लेकिन Image अभी तक खुली नहीं है।
• Image : स्वाभाविक रूप से, सबसे महत्वपूर्ण तत्व जिसके लिए हम सभी ने शुरुआत की थी।

कार्य सिद्धांत

सिर्फ ProgressRing पारदर्शिता के साथ खेलते हैं। हमारे पास दो प्रवेश बिंदु हैं: ImageOpened event ( 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 Source
• ProgressRingSize - ProgressRing आकार
• ProgressRingColor - ProgressRing रंग
• Border कलर - Border कलर
• BorderSize - BorderThickness size
• BorderCornerRadius - Border कॉर्नर त्रिज्या आकार
• ImageStretch - खुद के लिए बोलता है
• ImageMargin - Border सापेक्ष Image लिए Margin असाइनमेंट
• ControlBackground - संपूर्ण नियंत्रण 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"/> 

हमें क्या मिलता है?

हाथ पर इस तरह के नियंत्रण की उपस्थिति - आपको अपनी विशिष्ट आवश्यकताओं के लिए किसी भी क्षण इसे ट्विक करने की अनुमति देता है। बुनियादी सेटिंग्स पहले से ही शामिल हैं, और नए लोगों को जोड़ना दो मिनट का मामला है। मुझे पूरी उम्मीद है कि किसी ने समय बचाया। और यहाँ है कि यह कैसा दिखता है।


उद्देश्य / पक्षपाती आलोचना, साथ ही बूट में सुधार के लिए सुझाव, बहुत अच्छी तरह से प्राप्त होते हैं।