Haciendo un botón con gráficos vectoriales en el contenido

Question

Soy bastante nuevo con el diseño de WPF (y el diseño en general), y necesito ayuda con una tarea.

Tengo un estilo para un botón que contiene algunos datos en una ruta de acceso, que dibuja un ícono (básicamente, simplemente agrega un ícono nuevo). Ahora me gustaría hacer un ícono de copia de él.

no pude encontrar una manera de manipular con la trayectoria que tengo en la mezcla, por lo que lo que tenía en mente era:

1) Datos de ruta de una copia para que podamos sacar dos iconos (para tener dos objetos Camino en contenido) 2) Shift primero un poco a la izquierda y arriba 3) Shift segundo un poco a la derecha y abajo 4) Hacer una segunda solapa primero

Esto es lo que hice: Puesto que no podemos tener dos elementos establecidos para el contenido, he agregado un elemento de cuadrícula, y en el interior he copiado el elemento de ruta dos veces. Luego reposicione ambas rutas para simular datos duplicados.

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

Problema:.? No entiendo solapa con el segundo icono (básicamente todo es transparente Eso significa que probsably que borrar algunos puntos en el primer icono, pero no pude conseguir que en Blend

¿Alguien puede compartir algo de luz sobre cómo lograr lo que necesito?

Answer 1

No estoy seguro de cómo deberían verse sus iconos, pero el siguiente XAML mostrará dos signos más superpuestos utilizando los mismos datos Path para ambos, pero con un simple TranslateTransform para compensar el segundo.

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

Recomendaría no poner márgenes o propiedades 'Stretch' en los objetos de ruta reales. Ocúpese de eso en el contenedor de Grid en el que se encuentran, o en un Viewbox si necesita escalarlos hacia arriba o hacia abajo.

EDITAR

Si está utilizando realmente la propiedad del objeto FillPath para dibujar la geometría icono, como con un objeto VisualBrush, en lugar de la Path.Data, entonces usted no desea utilizar un Path en primer lugar. Simplemente use dos objetos Rectangle, con su 'IconBrush' Complete la cuadrícula y haga el TranslateTransform en uno de ellos para que se superpongan a la cantidad deseada. Recuerde que con XAML, el objeto que aparece último en la lista se representa en la parte superior.

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

El XAML anterior es probablemente demasiado grande para sus necesidades. Puede poner toda la cuadrícula en un Viewbox y luego establecer las propiedades Height y Width del Viewbox para obtener el tamaño que necesita.

---

---

EDITAR 3

personalizado estilo de botón:

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

aplicación Button:

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

Lo que se ve como en el WPF viento ow: