Contenido del botón de reutilización en XAML

Question

Tengo botón Contenido que quiero usar en varios botones en un UserControl en mi aplicación Silverlight. Aquí está el código para un botón:

<Grid x:Name="LayoutRoot" Background="White"> 

    <Button Grid.Column="1" IsEnabled="{Binding PrivilegeChanged}" Height="24" Width="24"> 
     <Button.Content> 
      <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
       x:Name="UndoIcon" Width="16" Height="16" Clip="F1 M 0,0L 16,0L 16,16L 0,16L 0,0" UseLayoutRounding="False"> 
       <Canvas x:Name="Arrow_2" Width="16" Height="16" Canvas.Left="0" Canvas.Top="0"> 
        <Path Width="17.0154" Height="17" Canvas.Left="-0.5" Canvas.Top="-0.499999" Stretch="Fill" 
         StrokeLineJoin="Round" Stroke="#FF006432" Fill="#FF00C800" 
         Data="F1 M 12.5819,16C 14.1685,12.7951 14.1052,6.14911 11.0969,4.25C 9.23816,3.07665 6.71915,3.4789 5.40404,5.25L 8.12669,8.25L 0,8.91667L 0,9.53674e-007L 3.17642,3.25C 4.16648,1.91667 5.52584,0.61155 7.13664,0.25C 9.85332,-0.359774 13.4395,0.629333 15.0571,2.91667C 17.402,6.23256 15.0026,12.7401 12.5819,16"/> 
       </Canvas> 
      </Canvas> 
     </Button.Content> 
    </Button> 

</Grid> 

¿Cómo puedo hacer Button.Content reutilizable sin quitar el contorno del botón?

Answer 1

El método más sencillo sería pegarse el diseño de su contenido botón en su propio UserControl : -

<UserControl x:Class="SilverlightApplication1.MyButton" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > 
    <Canvas Width="16" Height="16" Clip="F1 M 0,0L 16,0L 16,16L 0,16L 0,0" UseLayoutRounding="False"> 
     <Canvas Width="16" Height="16" Canvas.Left="0" Canvas.Top="0"> 
      <Path Width="17.0154" Height="17" Canvas.Left="-0.5" Canvas.Top="-0.499999" Stretch="Fill" 
         StrokeLineJoin="Round" Stroke="#FF006432" Fill="#FF00C800" 
         Data="F1 M 12.5819,16C 14.1685,12.7951 14.1052,6.14911 11.0969,4.25C 9.23816,3.07665 6.71915,3.4789 5.40404,5.25L 8.12669,8.25L 0,8.91667L 0,9.53674e-007L 3.17642,3.25C 4.16648,1.91667 5.52584,0.61155 7.13664,0.25C 9.85332,-0.359774 13.4395,0.629333 15.0571,2.91667C 17.402,6.23256 15.0026,12.7401 12.5819,16"/> 
     </Canvas> 
    </Canvas> 
</UserControl> 

Ahora puede crear varias instancias de este usuario controle dónde necesite este contenido: -

<UserControl x:Class="SilverlightApplication1.Test" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:local="clr-namespace:SilverlightApplication1" 
    Width="400" Height="300"> 
    <Grid x:Name="LayoutRoot" Background="White"> 
     <StackPanel Orientation="Horizontal"> 
      <Button Grid.Column="1" IsEnabled="{Binding PrivilegeChanged}" Height="24" Width="24" Margin="2"> 
       <local:MyButton /> 
      </Button> 
      <Button Grid.Column="1" IsEnabled="{Binding SomethingElseChanged}" Height="24" Width="24" Margin="2"> 
       <local:MyButton /> 
      </Button> 
     </StackPanel> 

    </Grid> 
</UserControl> 

Answer 2

Normalmente crearía un Template que creara el diseño personalizado para su botón. Una solución más rápida e inmediata para usted sería establecer el contenido dentro de un Style, y aplicar el estilo a los botones que necesita.

Definir el estilo con su contenido:

<Window.Resources> 
    <Style x:Key="ButtonArrowStyle" TargetType="Button"> 
     <Setter Property="Content"> 
      <Setter.Value> 
       <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      x:Name="UndoIcon" Width="16" Height="16" Clip="F1 M 0,0L 16,0L 16,16L 0,16L 0,0" UseLayoutRounding="False"> 
        <Canvas x:Name="Arrow_2" Width="16" Height="16" Canvas.Left="0" Canvas.Top="0"> 
         <Path Width="17.0154" Height="17" Canvas.Left="-0.5" Canvas.Top="-0.499999" Stretch="Fill" 
        StrokeLineJoin="Round" Stroke="#FF006432" Fill="#FF00C800" 
        Data="F1 M 12.5819,16C 14.1685,12.7951 14.1052,6.14911 11.0969,4.25C 9.23816,3.07665 6.71915,3.4789 5.40404,5.25L 8.12669,8.25L 0,8.91667L 0,9.53674e-007L 3.17642,3.25C 4.16648,1.91667 5.52584,0.61155 7.13664,0.25C 9.85332,-0.359774 13.4395,0.629333 15.0571,2.91667C 17.402,6.23256 15.0026,12.7401 12.5819,16"/> 
        </Canvas> 
       </Canvas> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 

y luego definir un botón para utilizar el estilo:

<Button Style="{StaticResource ButtonArrowStyle}"/>