2012-09-18 14 views
18

में एक सर्कल बटन को कैसे कार्यान्वित करें XAML में नीचे दिए गए सर्कल बटन को कैसे कार्यान्वित करें, कोई बाहरी छवि आवश्यक नहीं है। बीच में काली रेखा की आवश्यकता नहीं है।एक्सएएमएल

enter image description here

उत्तर

41

यह एक बहुत ही त्वरित तरीका यह करने के लिए है। इसे एक शैली में बदला जा सकता है और इसे टेम्पलेटेड कंट्रोल बनाने से अधिक लचीला बनाया जा सकता है जिससे डिजाइनर रंगों और अन्य गुणों को आसानी से बदल सकता है।

<Button Width="100" 
     Height="100"> 
    <Button.Template> 
     <ControlTemplate TargetType="Button"> 
      <Grid> 
       <Ellipse Stroke="Black" 
         StrokeThickness="2"> 
        <Ellipse.Fill> 
         <RadialGradientBrush> 
          <GradientStop Offset="0" 
              Color="Lime" /> 
          <GradientStop Offset="1" 
              Color="Lime" /> 
          <GradientStop Offset="1" 
              Color="Gold" /> 
          <RadialGradientBrush.Transform> 
           <TransformGroup> 
            <ScaleTransform ScaleY="0.65" /> 
           </TransformGroup> 
          </RadialGradientBrush.Transform> 
         </RadialGradientBrush> 
        </Ellipse.Fill> 
       </Ellipse> 
       <ContentPresenter HorizontalAlignment="Center" 
            VerticalAlignment="Center"/> 
      </Grid> 
     </ControlTemplate> 
    </Button.Template> 
</Button> 
+1

अच्छा है, thx! हालांकि, पाठ (सामग्री) प्रदर्शित नहीं किया जा सकता है। – linquize

+3

इसके लिए मेरे उत्तर में नीचे सामग्री प्रदाता का उपयोग करें। – ethicallogics

+0

@ethicallogics thx! सही! – linquize

4

यहाँ मिश्रण में खरोंच से नियंत्रण पर अपने निर्माण के बारे में एक कड़ी है।

http://www.codeproject.com/Articles/32257/A-Style-for-Round-Glassy-WPF-Buttons

+1

कोडप्रोजेक्ट नमूना बहुत जटिल है। मुझे केवल 2 ठोस रंगों की आवश्यकता है। आप मान सकते हैं कि सर्कल का आकार 100 x 100 पीएक्स – linquize

17
<Button Width="100" Height="100" Content="Abcd"> 
     <Button.Template> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Grid> 
       <Ellipse Fill="Red"/> 
        <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
       </Grid> 
      </ControlTemplate> 
     </Button.Template> 
    </Button> 

आप ऊंचाई बटन ही की चौड़ाई सेट यह सर्किल होने के लिए आवश्यक है।

संबंधित मुद्दे