सामग्री

Question

में वेक्टर ग्राफिक्स के साथ एक बटन बनाना मैं WPF डिज़ाइन (और सामान्य रूप से डिज़ाइन) के साथ बहुत नया हूं, और मुझे एक कार्य में सहायता चाहिए।

मेरे पास एक बटन के लिए एक शैली है जिसमें पथ में कुछ डेटा शामिल है, जो उस पर एक आइकन खींचता है (मूल रूप से सरल नया आइकन जोड़ें)। अब मैं इसके बारे में एक कॉपी आइकन बनाना चाहता हूं।

मुझे लगता है मैं मिश्रण में है पथ के साथ हेरफेर करने के लिए एक तरह से नहीं मिल सका, तो क्या मैं के दिमाग में था:

1) कॉपी पथ डेटा तो हम दो पथ सामग्री में वस्तुओं के लिए दो चिह्न आकर्षित कर सकते हैं () 2) पहले बाईं ओर एक छोटे से शिफ्ट और शीर्ष 3) सही करने के लिए दूसरा शिफ्ट एक छोटे से और नीचे 4) दूसरे एक ओवरलैप बनाने पहले एक

यह मैं क्या किया है: जब से हम दो नहीं हो सकता सामग्री के लिए सेट तत्व, मैंने एक ग्रिड तत्व जोड़ा है, और अंदर मैंने पथ तत्व को दो बार कॉपी किया है। फिर मैंने डुप्लिकेट डेटा अनुकरण करने के लिए दोनों पथों को दोहराया।

<Setter Property="Content"> 
    <Setter.Value> 
    <Grid> 
      <Path Data="..." Margin="10" Stretch="Fill" Fill="{StaticResource IconBrush}" RenderTransformOrigin="0.5,0.4"> 
       <Path.RenderTransform> 
        <TransformGroup> 
       <ScaleTransform /> 
       <SkewTransform /> 
       <RotateTransform Angle="-90" /> 
       <TranslateTransform /> 
      </TransformGroup> 
     </Path.RenderTransform> 
    </Path> 
    <Path Data="..." Margin="10" Stretch="Fill" Fill="{StaticResource IconBrush}" RenderTransformOrigin="0.5,0.6"> 
       <Path.RenderTransform> 
      <TransformGroup> 
       <ScaleTransform /> 
       <SkewTransform /> 
       <RotateTransform Angle="-90" /> 
       <TranslateTransform /> 
      </TransformGroup> 
     </Path.RenderTransform> 
    </Path>         
    </Grid> 
    </Setter.Value> 
</Setter> 

समस्या:।? मैं दूसरे आइकन के साथ ओवरलैप (मूल रूप से सब कुछ पारदर्शी है इसका मतलब है कि मैं probsably पहले आइकन पर कुछ बिंदुओं को हटाने की जरूरत नहीं मिलता है, लेकिन मुझे लगता है कि लक्ष्य को हासिल नहीं कर सका मिश्रण में

किसी को भी कुछ प्रकाश साझा कर सकते हैं प्राप्त करने के लिए कैसे मैं क्या ज़रूरत है?

Answer 1

सुनिश्चित नहीं हैं कि अपने माउस की तरह दिखना चाहिए, लेकिन निम्नलिखित XAML दो दोनों के लिए एक ही Path डेटा का उपयोग कर धन चिह्नों ओवरलैपिंग प्रदर्शित करेगा, लेकिन एक साधारण TranslateTransform साथ ऑफसेट करने के लिए दूसरा वाला।

<Grid> 
     <Path Fill="#FF008000" > 
      <Path.Data> 
       <PathGeometry Figures="m 30 25.362188 0 30.000001 -30 0 0 20 30 0 0 29.999991 20 0 0 -29.999991 30 0 0 -20 -30 0 0 -30.000001 -20 0 z" FillRule="nonzero"/> 
      </Path.Data> 
     </Path> 
     <Path Fill="#FF92D050" > 
      <Path.Data> 
       <PathGeometry Figures="m 30 25.362188 0 30.000001 -30 0 0 20 30 0 0 29.999991 20 0 0 -29.999991 30 0 0 -20 -30 0 0 -30.000001 -20 0 z" FillRule="nonzero"/> 
      </Path.Data> 
      <Path.RenderTransform> 
       <TranslateTransform X="25" Y="-25"/> 
      </Path.RenderTransform> 
     </Path> 
    </Grid> 

मैं आपके वास्तविक पथ वस्तुओं में मार्जिन या 'स्ट्रेच' गुण डालने की अनुशंसा नहीं करता। उस ग्रिड कंटेनर में उस पर ध्यान रखें, या यदि आप उन्हें ऊपर या नीचे स्केल करने की आवश्यकता है तो एक व्यूबॉक्स में एक व्यूबॉक्स है।

संपादित

आप वास्तव में,, Path वस्तु की Fill संपत्ति का उपयोग कर रहे हैं, आइकन ज्यामिति आकर्षित करने के लिए एक VisualBrush वस्तु के साथ के रूप में Path.Data के बजाय तो आप एक Path उपयोग करने के लिए नहीं करना चाहते हैं पहली जगह में। अपने 'आइकन ब्रश' को ग्रिड में भरें और TranslateTransform उनमें से एक पर करें ताकि वे वांछित राशि पर ओवरलैप कर सकें, बस दो Rectangle ऑब्जेक्ट्स का उपयोग करें। याद रखें कि एक्सएएमएल के साथ, सूची में आखिरी दिखाई देने वाली वस्तु शीर्ष पर प्रस्तुत की जाती है।

संपादित 2

<Grid> 
     <Path Fill="#FFFFFFFF"> 
      <Path.Data> 
       <PathGeometry Figures="m 13.123027 65.796864 0 81.448876 133.750213 0 0 -133.778725 -67.192062 0 z" FillRule="NonZero"/> 
      </Path.Data> 
     </Path> 
     <Path Fill="#FFB3B3B3"> 
      <Path.Data> 
       <PathGeometry Figures="M 79.624708 0.36218262 0 62.950511 l 0 97.411669 160 0 0 -159.99999738 -80.375292 0 z m 2.28303 16.89635038 61.172792 0 0 126.207297 -126.161061 0 0 -76.829978 0.187646 -0.156158 64.800623 0 0 -49.221161 z" FillRule="NonZero"/> 
      </Path.Data> 
     </Path> 
     <Path Fill="#FFFFFFFF"> 
      <Path.Data> 
       <PathGeometry Figures="m 13.123027 65.796864 0 81.448876 133.750213 0 0 -133.778725 -67.192062 0 z" FillRule="NonZero"/> 
      </Path.Data> 
      <Path.RenderTransform> 
       <TranslateTransform X="30" Y="30"/> 
      </Path.RenderTransform> 
     </Path> 
     <Path Fill="#FFB3B3B3"> 
      <Path.Data> 
       <PathGeometry Figures="M 79.624708 0.36218262 0 62.950511 l 0 97.411669 160 0 0 -159.99999738 -80.375292 0 z m 2.28303 16.89635038 61.172792 0 0 126.207297 -126.161061 0 0 -76.829978 0.187646 -0.156158 64.800623 0 0 -49.221161 z" FillRule="NonZero"/> 
      </Path.Data> 
      <Path.RenderTransform> 
       <TranslateTransform X="30" Y="30"/> 
      </Path.RenderTransform> 
     </Path> 
    </Grid> 

ऊपर XAML शायद रास्ता भी अपनी आवश्यकताओं के लिए बड़ा है। आप पूरे ग्रिड को Viewbox में डाल सकते हैं और उसके बाद Height और WidthViewbox के गुणों को सेट करने के लिए सेट कर सकते हैं।

---

---

संपादित 3

कस्टम बटन शैली:

<Style x:Key="btnCustom" TargetType="{x:Type Button}"> 
    <Setter Property="Content"> 
     <Setter.Value> 
      <Viewbox> 
       <Grid Margin="0,0,30,30"> 
        <Path Fill="#FFFFFFFF"> 
         <Path.Data> 
          <PathGeometry Figures="m 13.123027 65.796864 0 81.448876 133.750213 0 0 -133.778725 -67.192062 0 z" FillRule="NonZero"/> 
         </Path.Data> 
        </Path> 
        <Path Fill="#FFB3B3B3"> 
         <Path.Data> 
          <PathGeometry Figures="M 79.624708 0.36218262 0 62.950511 l 0 97.411669 160 0 0 -159.99999738 -80.375292 0 z m 2.28303 16.89635038 61.172792 0 0 126.207297 -126.161061 0 0 -76.829978 0.187646 -0.156158 64.800623 0 0 -49.221161 z" FillRule="NonZero"/> 
         </Path.Data> 
        </Path> 
        <Path Fill="#FFFFFFFF"> 
         <Path.Data> 
          <PathGeometry Figures="m 13.123027 65.796864 0 81.448876 133.750213 0 0 -133.778725 -67.192062 0 z" FillRule="NonZero"/> 
         </Path.Data> 
         <Path.RenderTransform> 
          <TranslateTransform X="30" Y="30"/> 
         </Path.RenderTransform> 
        </Path> 
        <Path Fill="#FFB3B3B3"> 
         <Path.Data> 
          <PathGeometry Figures="M 79.624708 0.36218262 0 62.950511 l 0 97.411669 160 0 0 -159.99999738 -80.375292 0 z m 2.28303 16.89635038 61.172792 0 0 126.207297 -126.161061 0 0 -76.829978 0.187646 -0.156158 64.800623 0 0 -49.221161 z" FillRule="NonZero"/> 
         </Path.Data> 
         <Path.RenderTransform> 
          <TranslateTransform X="30" Y="30"/> 
         </Path.RenderTransform> 
        </Path> 
       </Grid> 
      </Viewbox> 
     </Setter.Value> 
    </Setter> 
</Style> 

बटन कार्यान्वयन:

<Button HorizontalAlignment="Right" Style="{StaticResource btnCustom}" 
      Height="30" Width="100"/> 

यह WPF हवा में की तरह दिखता है क्या ओउ: