WPF: एक आइकन और पाठ के साथ एक बटन के लिए 4 विकल्प

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

ऐसा कैसे? खैर, क्या बटन में कोई छवि गुण नहीं है? आप मजाक कर रहे हैं, है ना?

बात यह है कि WPF (अधिक सटीक, XAML) में इंटरफ़ेस संगठन की एक पूरी तरह से अलग विचारधारा है। बेसिक नियंत्रण केवल मूल (टॉटोलॉजी के लिए खेद) कार्यक्षमता का प्रतिनिधित्व करते हैं। बुनियादी नियंत्रणों की सादगी टेम्पलेट्स और शैलियों के शक्तिशाली तंत्र द्वारा ऑफसेट की जाती है।
थर्ड-पार्टी कंपोनेंट लाइब्रेरी मौजूद हैं, लेकिन वे सबसे अधिक बेकार हैं, आशाहीन पुरानी हैं, या अत्यधिक भुगतान की जाती हैं।

इतना समय पहले नहीं, मुझे एक बार फिर इस बहुत ही सरल (यह प्रतीत होता है) समस्या को हल करने की आवश्यकता का सामना करना पड़ा। मैंने सभी Google को "XAML बटन विथ इमेज", "WPF बटन इमेज टेक्स्ट", इत्यादि प्रश्नों से सताया।

समीक्षा किए गए दर्जनों परिणामों के बीच, स्पष्ट (और एक ही समय में असुविधाजनक) समाधानों के साथ-साथ अधिक परिष्कृत वाले दोनों स्पष्ट थे।

छोटा विषयांतर संख्या 1
पहले प्रयोगों के बाद, यह स्पष्ट हो गया कि एक्सएएमएल और पीएनजी के रूप में प्रतीक असंगत चीजें हैं। मैंने इस पर बहुत लंबा समय नहीं बिताया - इस विषय पर पर्याप्त साहित्य है, मैं सिर्फ इतना कहूंगा कि अंत में यह बदसूरत, और असुविधाजनक और गैर-कार्यात्मक हो जाता है। चित्र धुंधले हैं, सुपरिम्पोज़्ड इफेक्ट्स और एनिमेशन निराशाजनक लगते हैं, आदि ...
लेकिन परेशान मत हो - नेटवर्क पर वेक्टर छवियों के साथ दसियों और सैकड़ों संसाधन हैं।
मुझे जो सबसे अच्छा मिला है वह है सिंकफ़्यूज़न मेट्रो स्टूडियो 2 (कोई विज्ञापन नहीं)। यह एक निशुल्क उत्पाद है जिसमें 1700 वेक्टर आइकन हैं और एक्सएएमएल में इन आइकन को प्रदर्शित करना है। परिणाम एक जटिल तत्व के रूप में प्राप्त किया जाता है, जिसमें से यह केवल पथ को कॉपी करने के लिए पर्याप्त है, जो कि आइकन की ज्यामिति का खुद ही वर्णन करता है।
इस तत्व के साथ, मैं ऐसा करता हूं - परियोजना के लिए Icons.xaml नाम के साथ संसाधन संसाधन जोड़ें और इसमें मेरे द्वारा आवश्यक सभी आइकन डालें:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <!-- Resource dictionary entries should be defined here. --> <Path x:Key="IconTriangle" x:Shared="False" Stretch="Uniform" Data="M50.25,133.5 L49.75,158.25 76,147.25 z" Fill="Black" Stroke="Black"/> </ResourceDictionary> 

लेकिन आइए आइकन के साथ बटन को लागू करने के तरीकों पर वापस जाएं।

पहला और सबसे स्पष्ट तरीका वांछित सामग्री बटन को सीधे फॉर्म कोड में वर्णित करना है

  <Button HorizontalAlignment="Center" VerticalAlignment="Center"> <StackPanel Orientation="Horizontal"> <ContentControl Width="16" Height="16" Margin="4" Content="{StaticResource IconTriangle}"/> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Button</TextBlock> </StackPanel> </Button> 

खैर, ऐसा लगता है कि सब कुछ जगह में है। एक बटन है, इसमें एक आइकन और टेक्स्ट है। जो लोग मानते हैं कि सब कुछ इतना सरल है और इस दृष्टिकोण के साथ एक सुंदर और स्टाइलिश इंटरफ़ेस को व्यवस्थित करने का प्रयास करते हैं, जल्द ही निराश होंगे। और यहाँ क्यों है: एक साधारण शैली सेटिंग सीधे कोड में तत्वों के मापदंडों के विवरण की नकल करके XAML सूजन की ओर जाता है। 10 बटन - 10 समान विवरण। "चलो हरे रंग में बटन पर पाठ को रंग दें" के प्रकार में एक साधारण बदलाव एक थकाऊ कॉपी-पेस्ट और यहां तक ​​कि फ़ॉर्म की अधिक सूजन में बदल जाता है।

दूसरा स्पष्ट तरीका बटन से विरासत में मिला है

और लिखते हैं "अपना बटन लाठी के साथ और आप खुद जानते हैं कि और क्या है"?
हम बटन से इनहेरिट करेंगे और ContentControl के लिए DependencyProperty जोड़ेंगे, जिसके माध्यम से आइकन के लिए सामग्री XAML फॉर्म से सेट की जा सकती है। मैं कार्यान्वयन विवरण पर ध्यान केंद्रित नहीं करूंगा (नीचे दिए गए स्रोतों का लिंक होगा, वहां पढ़ना संभव होगा), लेकिन मैं minuses का वर्णन करूंगा - बटन की सामग्री उत्तराधिकारी कंस्ट्रक्टर से सी # में सेट करनी होगी। यहां से हमें बहुत सी स्पष्ट और गैर-स्पष्ट समस्याएं मिलती हैं, इस तथ्य का उल्लेख नहीं करने के लिए कि यह बहुत अच्छी गंध नहीं करता है।

तीसरा स्पष्ट तरीका UserControl बनाना है।

एक UserControl बनाएं, जिस पर हम सिर्फ एक बटन लगाते हैं। UserControl में, एक DependencyProperty बनाएँ, जिसके द्वारा हम ContentControl के लिए आइकन सेट करेंगे, जो बटन में निहित है। यह विधि अधिकतम अनाड़ीपन के लिए पदक के योग्य है। वह पिछले तरीकों की लगभग सभी कमियों को विरासत में मिला है, और अपने खुद के कई जोड़ता है। फॉर्म कोड में, हम एक उपयोगकर्ता-नियंत्रण प्राप्त करते हैं, लेकिन बटन खो देते हैं। हम सभी गुणों और घटनाओं के साथ खो देते हैं। विचार के लेखक का सुझाव है कि सब कुछ बहुत डिपेंडेंसीप्रॉपर्टी के माध्यम से खो दिया गया था, सामान्य तौर पर, आप समझते हैं। यह अस्पष्ट हो जाता है कि हम किस चीज के लिए लड़ रहे थे।

चौथा तरीका - संलग्न

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

तो, सिद्धांत का एक सा। यह संलग्नक क्या है?

उदाहरण के लिए, प्रत्येक XAML डेवलपर को अटैच किए गए गुणों का सामना करना पड़ा, इसने नियंत्रण के लिए Grid.Column प्रॉपर्टी सेट की।
अगर संक्षेप में कहें - तो इसका विचार थोड़ा विस्तार है लिनक से। आप एक संपत्ति रजिस्टर कर सकते हैं जिसका मूल्य किसी भी डिपेंडेंसी ऑबजेक्ट में सेट किया जा सकता है। यह कुछ इस तरह दिखता है (उदाहरण MSDN से):

 public class AquariumObject { public static readonly DependencyProperty IsBubbleSourceProperty = DependencyProperty.RegisterAttached( "IsBubbleSource", typeof(Boolean), typeof(AquariumObject), new FrameworkPropertyMetadata(false, FrameworkPropertyMetadataOptions.AffectsRender) ); public static void SetIsBubbleSource(UIElement element, Boolean value) { element.SetValue(IsBubbleSourceProperty, value); } public static Boolean GetIsBubbleSource(UIElement element) { return (Boolean)element.GetValue(IsBubbleSourceProperty); } } 

यह कोड IsBubleSource गुण पंजीकृत करता है। नतीजतन, किसी भी निर्भरता के आधार पर , उदाहरण के लिए, एक ही बटन , इसके मूल्य पर सेट किया जा सकता है:

 <Button AquariumObject.IsBubbleSource="True">Button</Button> 

इस कोड का सामान्य अर्थ यह है कि एक बटन के लिए IsBubbleSource संपत्ति सेट करते समय, हम स्वचालित रूप से SetIsBubbleSource विधि पर पहुंचते हैं , जो मान सेट करता है। क्रमशः मूल्य प्राप्त होने पर, हम GetIsBubbleSource विधि में शामिल हो जाते हैं। यह सब स्वचालित रूप से होता है, बस सेट और गेट नाम के तरीकों को लिखें, बाकी प्लेटफ़ॉर्म पर है।

इस तथ्य के बावजूद कि इतना कम कोड नहीं लिखा गया है, बटन ही इस तरह के ऑपरेशन से न तो गर्म है और न ही ठंडा है - यह सिर्फ एक अलग मूल्य का भंडार बन जाता है जिसे सेट और पूछा जा सकता है। बेशक, आप SetIsBubbleSource और GetIsBubbleSource विधियों में ट्रिकी लॉजिक को लागू कर सकते हैं, जो एक बटन पर एक तत्व डालेंगे , इससे सामग्री निकालेंगे और सामग्री पर विभिन्न ऑपरेशन कर सकते हैं, लेकिन यह फिर से खराब हो जाती है, आपको ऐसा करने की आवश्यकता नहीं है।

व्यावहारिक भाग के लिए हो रही है

छोटा विषयांतर २
मूल में, लेखक EyeCandy वर्ग नाम और प्रोजेक्ट नामस्थान का उपयोग करता है, लेकिन यह बहुत लंबा है और मुझे उम्मीद है कि संक्षिप्त नाम - नामस्थान Ext और वर्ग नाम E को माफ कर दिया जाएगा।

हम WPF प्रोजेक्ट में निम्न वर्ग जोड़ते हैं:

 using System.Windows; using System.Windows.Controls; using System.Windows.Media; namespace Ext { public class E { public static readonly DependencyProperty IconProperty; static E() { var metadata = new FrameworkPropertyMetadata(null); IconProperty = DependencyProperty.RegisterAttached("Icon", typeof(FrameworkElement), typeof(E), metadata); } public static FrameworkElement GetIcon(DependencyObject obj) { return (FrameworkElement)obj.GetValue(IconProperty); } public static void SetIcon(DependencyObject obj, FrameworkElement value) { obj.SetValue(IconProperty, value); } } } 

यहां क्या हो रहा है? हमने नल के डिफ़ॉल्ट मान के साथ टाइप फ्रेमवर्क के संलग्न आइकन संपत्ति को पंजीकृत किया।

अब हमारे बटन के लिए एक टेम्पलेट बनाएँ। मैं "क्या पैटर्न हैं और वे कैसे काम करते हैं" के स्पष्टीकरण पर ध्यान नहीं देंगे - अगर अचानक यह किसी के लिए अज्ञात है - नेटवर्क पर बहुत सारी जानकारी है।
इसलिए, हम अपने प्रोजेक्ट में Styles.xaml नाम के साथ रिसोर्सबॉडी जोड़ते हैं (यदि प्रोजेक्ट में अभी तक कोई स्टाइल संसाधन नहीं है)। इस संसाधन में, निम्नलिखित कोड जोड़ें:

 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"> <Style x:Key="ButtonFocusVisual"> <Setter Property="Control.Template"> <Setter.Value> <ControlTemplate> <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/> </ControlTemplate> </Setter.Value> </Setter> </Style> <!-- Resource dictionary entries should be defined here. --> <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0"> <GradientStop Color="#F3F3F3" Offset="0"/> <GradientStop Color="#EBEBEB" Offset="0.5"/> <GradientStop Color="#DDDDDD" Offset="0.5"/> <GradientStop Color="#CDCDCD" Offset="1"/> </LinearGradientBrush> <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/> <Style TargetType="{x:Type Button}"> <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/> <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/> <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="Padding" Value="1"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"/> <VisualState x:Name="Pressed"/> <VisualState x:Name="Disabled"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="IconContent"> <EasingDoubleKeyFrame KeyTime="0" Value="0.5"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <StackPanel> <ContentControl Content="{StaticResource IconTriangle}" Width="16" Height="16" x:Name="IconContent" Margin="4" RenderTransformOrigin="0.5,0.5" IsEnabled="{Binding IsEnabled, ElementName=Chrome}"> <ContentControl.Effect> <DropShadowEffect Opacity="0" BlurRadius="2"/> </ContentControl.Effect> <ContentControl.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </ContentControl.RenderTransform> </ContentControl> <TextBlock x:Name="textBlock" Margin="4" TextWrapping="Wrap" Text="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center"/> </StackPanel> </Microsoft_Windows_Themes:ButtonChrome> <ControlTemplate.Triggers> <Trigger Property="IsKeyboardFocused" Value="true"> <Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/> </Trigger> <Trigger Property="ToggleButton.IsChecked" Value="true"> <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Foreground" Value="#ADADAD"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary> 

यह संसाधनप्राप्ति प्रविष्टि हमारी परियोजना के किसी भी बटन के टेम्पलेट का वर्णन करती है। यह टेम्पलेट WPF बटन के लिए डिफ़ॉल्ट रूप सेट करता है, लेकिन इसकी सामग्री को फिर से परिभाषित किया गया है। सामग्री StackPanel है , जिसमें ContentControl और TextBlock शामिल हैं , अर्थात्। पहले उदाहरण में बिल्कुल वैसा ही। इसके अलावा, टेम्पलेट में, मैंने आइकन के लिए निम्न व्यवहार सेट किया है - यदि बटन को IsEnabled == गलत पर सेट किया गया है, तो आइकन 50% पारदर्शिता प्राप्त करता है, और निष्क्रिय के समान हो जाता है।

हमारे फॉर्म में 4 सरल बटन जोड़ें। प्रत्येक बटन को अपने स्वयं के पाठ को असाइन करें, उदाहरण के लिए इस प्रकार: सामग्री = "बटन 1" ।
हमने एप्लिकेशन लॉन्च किया।


एप्लिकेशन के प्रत्येक बटन पर आइडेंटिकल आइकन्स वे नहीं हैं, जिनके लिए हम लक्ष्य बना रहे हैं, और यह यहां है कि हम अपने गुप्त हथियार - एक्सट क्लास और अटैच्डप्रॉपर्टी तंत्र को ऑपरेशन में लगाते हैं।

तो, हमारी Styles.xaml संसाधन फ़ाइल पर जाएँ और इसमें एक नया नामस्थान जोड़ें:

 xmlns:Ext="clr-namespace:Ext" 

उसके बाद, हम नीचे जाते हैं और बटन टेम्प्लेट में हम वह लाइन ढूंढते हैं जिसमें ContentControl बनाया गया है और इसकी सामग्री सेट की गई है:

 <ContentControl Content="{StaticResource IconTriangle}" .../> 

दूसरी पंक्ति बदलें:

 <ContentControl Content="{Binding (Ext:E.Icon), RelativeSource={RelativeSource TemplatedParent}}" .../> 

यह लाइन ContentControl बटन की Ext.E.Icon संपत्ति का उपयोग करती है और इससे इसकी सामग्री प्राप्त करती है। इसके बाद, यह कोड जोड़ने के लिए रहता है जो Ext.E.Icon संपत्ति के मूल्य को बटन पर ही सेट करता है। यह उस फॉर्म के कोड में किया जाता है जिस पर बटन बनाया गया है।

 <Button Ext:E.Icon="{StaticResource IconTriangle}" Content=" 1" /> 

आइकन के साथ बटन का आदिम संस्करण तैयार है। अन्य संसाधनों के नाम के लिए IconTriangle मान को बदलकर, आप बटनों पर विभिन्न आइकन सेट कर सकते हैं। उसी समय, पहले तीन तरीकों के विपरीत, हम स्टाइल के लिए अपनी सभी जन्मजात क्षमताओं को बटन पर बनाए रखते हैं ( सामग्री संरचना को बदलने की क्षमता के अपवाद के साथ, बिल्कुल)। बटन की सामग्री C # से सेट नहीं है, और घटनाओं के साथ सभी गुण अपने स्थान पर बने हुए हैं।

थोड़ा और आगे चलते हैं

यदि हम इस बटन को वास्तविक परियोजना में उपयोग करने का प्रयास करते हैं, तो हम इसका सामना करेंगे:

• आइकन का आकार समायोज्य नहीं है।
• बटन (ऊर्ध्वाधर या क्षैतिज) का उन्मुखीकरण समायोज्य नहीं है।

अधिक सटीक रूप से, सब कुछ अनुकूलन योग्य है, लेकिन केवल टेम्पलेट में, अर्थात्। एक बार में सभी बटन के लिए, लेकिन क्लोनिंग टेम्पलेट एक रेक और एक पूर्ण असुविधा है। यह वह नहीं है जिसके लिए हमने संघर्ष किया।
वर्ग का विस्तार करें। वहां दो और अटैच्डप्रोटी जोड़ें

• टाइप डबल का IconSize
• ओरिएंटेशन प्रकार ओरिएंटेशन

स्रोत कोड लेख के अंत में एक संग्रह में होगा, इसलिए मैं लेख में Ext.E वर्ग के समान तरीकों की नकल नहीं करूंगा।

मैं केवल उन परिवर्तनों का वर्णन करूँगा जो बटन टेम्पलेट में किए जाने की आवश्यकता है।
ContentControl के आकार IconSize मान से संबद्ध हैं :

 <ContentControl Content="{Binding (Ext:E.Icon), RelativeSource={RelativeSource TemplatedParent}}" Width="{Binding (Ext:E.IconSize), RelativeSource={RelativeSource TemplatedParent}}" Height="{Binding (Ext:E.IconSize), RelativeSource={RelativeSource TemplatedParent}}" .../> 

स्टैकपैनल का अभिविन्यास ओरिएंटेशन के मूल्य के साथ जुड़ा हुआ है ।

 <StackPanel Orientation="{Binding (Ext:E.Orientation), RelativeSource={RelativeSource TemplatedParent}}"> 

परिणामस्वरूप, बटन को अतिरिक्त पैरामीटर मिले, और हम इस तरह लिख सकते हैं:

 <Button Ext:E.Icon="{StaticResource IconTriangle}" Ext:E.IconSize="32" Ext:E.Orientation="Horizontal" Content=" 1"/> 

सरल जोड़तोड़ के परिणामस्वरूप, आप इस तरह के चिड़ियाघर (पहला बटन IsEnabled = "False" ) प्राप्त कर सकते हैं:
"

और अंत में, मैं सीमाओं का उल्लेख करूँगा

वे सभी प्रक्रिया और विकास उपकरण से संबंधित हैं:
- XAML डिज़ाइनर VisualStudio 2010 इस तरह के एक बटन के समान विवरण पर प्रतिक्रिया करता है:

- ब्लेंड 4 और विजुअलस्टडियो 2012 बेहतर व्यवहार करते हैं, लेकिन सुविधाओं के साथ भी:

• एक्सट्रीम क्लास बदलने के बाद, विकास के माहौल को फिर से लोड करना बेहतर है। इसके बिना, परिवर्तन अक्सर परिभाषित नहीं होते हैं और डिज़ाइनर कसम खाते हैं कि जोड़ा या परिवर्तित गुण मौजूद नहीं हैं।
• मेरे द्वारा इंस्टॉल किए गए एल्गोरिथम के अनुसार, अटैच्डप्रॉपर्टी का उपयोग करके बटन को दिए गए मान डिजाइनर को दिखाई देते हैं या नहीं। अधिक बार दिखाई नहीं देता है, और फ़ॉर्म कुछ इस तरह दिखता है:
  
  
  

लेकिन यह केवल डिजाइनर की चिंता करता है, एप्लिकेशन रनटाइम में सब कुछ उसी तरह काम करता है जैसे इसे करना चाहिए।

शायद (और यहां तक ​​कि सबसे अधिक संभावना है) मैंने बाइक का वर्णन किया, लेकिन यह तथ्य कि खोज के दो दिनों में मुझे अधिक स्वीकार्य मुफ्त कार्यान्वयन नहीं मिला, यह बताता है कि इस मोर्चे पर सब कुछ ठीक नहीं है।
इसके अलावा, मुझे मानक नियंत्रण को गैर-मानक तरीके से विस्तारित करने के तंत्र के बारे में थोड़ा समझने का अवसर मिला और इस तंत्र के लिए बहुत सारे अनुप्रयोग हैं।

आपका ध्यान देने के लिए धन्यवाद।

UPD: लेख को इस तथ्य के कारण अपडेट किया गया था कि विभिन्न बटन पर एक ही आइकन का उपयोग करके समस्या का समाधान पाया गया था।
UPD2: समझदार सुझाव के लिए धन्यवाद onikiychuka

स्रोत कोड

उपयोगी लिंक:

WPF कंट्रोल डेवलपमेंट - एक इमेजबटन बनाने के 3 तरीके
blogs.msdn.com/b/knom/archive/2007/10/31/wpf-control-development-3-ways-to-build-an-imagebutton.aspx
WPF छवि बटन बनाने के लिए संलग्न गुणों का उपयोग करना
www.hardcodet.net/2009/01/create-wpf-image-button-through-attached-properties
कस्टम निर्भरता गुण
msdn.microsoft.com/ru-ru/library/ms753358.aspx
सिंकफ्यूजन मेट्रो स्टूडियो 2
www.syncfusion.com/downloads/metrostudio