İçinde vektör grafikleri olan bir düğme oluşturma

Question

WPF tasarımında (ve genel olarak tasarımda) oldukça yeniyim ve bir görevde yardıma ihtiyacım var.

Bir Yolda, üzerinde bir simge çizen (temel olarak basitçe yeni simge ekle) bazı verileri içeren bir düğme için bir stil var. Şimdi bunun dışında bir kopya simgesi yapmak istiyorum.

ben Aklımdaki ne yani, ben Blend var Yol ile işlemek için bir yol bulamadı oldu:

1) Kopyala Yol verileri yüzden iki Yol İçerik nesneleri olması (iki simge çizebilir) 2) sola Önce biraz Shift ve üst 3) sağa ikinci biraz Shift ve alt 4) ikinci bir örtüşme olun ilki

Bu benim yaptığım budur: biz iki tane olamaz yana İçerik için ayarlanmış öğeler, bir Grid öğesi ekledim ve İç kopyaladığım öğenin içinde iki kez. Sonra yinelenen verileri simüle etmek için her iki yolu da yeniden konumlandırdım.

<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> 

Sorun:.? Ben temelde her şey şeffaftır Ben probsably ilk ikonuna bazı noktalarını silmek gerektiği anlamına gelmektedir (ikinci simgesi ile üst üste alamadım ama Blend Bunu başarmak olamazdı

herkes ihtiyacım olanı elde etmek nasıl biraz ışık paylaşabilir miyim?

Answer 1

simgeleriniz gibi görünmelidir, ancak aşağıdaki XAML iki ikisi için de aynı Path verileri kullanarak artı işaretleri örtüşen görüntüler, ancak basit bir TranslateTransform ile dengelemek için emin ne ikincisi

<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> 

Gerçek yol nesnelerinize kenar boşlukları veya 'Stretch' özellikleri koymamanızı öneririz. Bunları dikkatlice yukarı veya aşağı ölçeklemeniz gerekiyorsa, Grid kabında yer alırlar veya içerdiği bir Viewbox'a dikkat edin.

DÜZENLEME

aslında yerine Path.Data ait bir VisualBrush nesne olduğu gibi, ikon geometriyi çizmek Path nesnenin Fill özelliğini kullanıyorsanız o zaman bir Path kullanmak istemiyorsanız ilk sırada. 'IconBrush' Doldurma ızgarası ile iki Rectangle nesnesini kullanın ve bunlardan birinin üzerine TranslateTransform yapın, böylece istenen miktarla üst üste gelsin. XAML ile, listedeki sonuncu nesnenin en üstte oluşturulduğunu unutmayın.

DÜZENLEME 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> 

yukarıdaki XAML muhtemelen ihtiyaçlarınız için çok büyüktü. Tüm ızgarayı Viewbox içine koyabilirsiniz ve daha sonra ihtiyacınız olan boyuta getirmek içinve Width özelliklerini Viewbox olarak ayarlayabilirsiniz.

---

---

DÜZENLEME 3

Özel düğme stili:

<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> 

Düğme uygulaması: o WPF in the Wind benziyor ne

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

ow: