Tạo nút có đồ họa vector trong nội dung

Question

Tôi khá mới với thiết kế WPF (và thiết kế nói chung) và tôi cần trợ giúp với một tác vụ.

Tôi có một kiểu cho nút chứa một số dữ liệu trong Đường dẫn, biểu tượng này vẽ một biểu tượng trên đó (về cơ bản là thêm biểu tượng mới). Bây giờ tôi muốn tạo một biểu tượng sao chép ra khỏi nó.

tôi không thể tìm thấy một cách để thao tác với con đường tôi có trong Blend, vì vậy những gì tôi nghĩ trong đầu là:

1) Đường dẫn dữ liệu Sao chép vì vậy chúng tôi có thể rút ra hai biểu tượng (có hai con đường đối tượng trong nội dung) 2) phím Shift đầu tiên một chút sang bên trái và đỉnh 3) phím Shift thứ hai một chút về bên phải và phía dưới 4) Thực hiện một thứ hai chồng lên nhau đầu tiên một

Đây là những gì tôi đã làm: Vì chúng ta không thể có hai các phần tử được đặt cho Nội dung, tôi đã thêm một phần tử Lưới và bên trong tôi đã sao chép phần tử Đường dẫn hai lần. Sau đó, tôi định vị lại cả hai đường dẫn để mô phỏng dữ liệu trùng lặp.

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

Vấn đề:.? Tôi không nhận được trùng lặp với các biểu tượng thứ hai (về cơ bản mọi thứ đều minh bạch Điều đó có nghĩa rằng tôi probsably cần phải xoá bỏ một số điểm trên biểu tượng đầu tiên, nhưng tôi không thể đạt được điều đó trong Blend

bất cứ ai có thể chia sẻ một số ánh sáng như thế nào để đạt được những gì tôi cần?

Answer 1

Không chắc những gì biểu tượng của bạn sẽ giống như thế, nhưng XAML sau đây sẽ hiển thị hai chồng chéo dấu cộng sử dụng cùng một Path dữ liệu cho cả hai, nhưng với một đơn giản TranslateTransform để bù đắp cái thứ hai.

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

Tôi khuyên bạn không nên đặt lề hoặc thuộc tính 'Kéo dài' trong đối tượng đường dẫn thực tế của bạn. Hãy quan tâm đến điều đó trong vùng chứa Lưới mà họ đang ở hoặc một Hộp chứa có chứa nếu bạn cần mở rộng chúng lên hoặc xuống.

EDIT

Nếu bạn đang thực sự sử dụng Fill tài sản của đối tượng Path để vẽ hình học biểu tượng, như với một đối tượng VisualBrush, thay vì Path.Data, sau đó bạn không muốn sử dụng một Path ngay từ đầu. Chỉ cần sử dụng hai đối tượng Rectangle, với 'Biểu tượngBrush' của bạn Điền vào lưới và làm TranslateTransform trên một trong số chúng để chúng trùng với số tiền mong muốn. Hãy nhớ rằng với XAML, đối tượng xuất hiện cuối cùng trong danh sách được hiển thị ở trên cùng.

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

Các XAML trên có lẽ là cách quá lớn so với nhu cầu của bạn. Bạn chỉ có thể đặt toàn bộ lưới trong một số Viewbox và sau đó đặt các thuộc tính Height và Width của số Viewbox để đạt được kích thước bạn cần.

---

---

EDIT nút 3

Tuỳ chỉnh phong cách:

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

thực hiện Button:

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

gì nó trông giống như trong WPF Gió ow: