Plantilla Encuadernación en plantilla de control

Question

Tengo la siguiente plantilla de control.

Deseo establecer la fuente de propiedad para el control de imagen en la plantilla de control utilizando Enlace de plantilla.

Pero como esta es una plantilla de control para el control de botones y el botón de control no tiene propiedad de la fuente, no puedo usar TemplateBinding en este caso.

<ControlTemplate x:Key="BtnTemplate" TargetType="Button"> 
     <Border CornerRadius="5" Margin="15" Cursor="Hand"> 
      <StackPanel> 
       <Image Name="Img" Style="{StaticResource ImageStyle}" Source="temp.jpg" Height="100" Width="100" Margin="5"></Image> 
       <Label Content="{TemplateBinding Content}" Background="Transparent" Margin="2"></Label> 
      </StackPanel> 
     </Border> 
    </ControlTemplate> 

Como tengo que configurar diferentes imágenes para diferentes instancias de botón, no puedo codificar también la ruta.

Háganme saber cómo abordar esta situación.

Answer 1

me gustaría sugerir el uso de recursos dinámicos, por ejemplo, definir la plantilla de la siguiente manera:

<ControlTemplate x:Key="buttonTemplate" TargetType="Button"> 
    <Border CornerRadius="5" Margin="15" Cursor="Hand"> 
     <StackPanel Orientation="Horizontal" Background="Yellow"> 
      <Image Source="{DynamicResource ResourceKey=Img}" Height="100" Width="100" Margin="5"></Image> 
      <Label Content="{TemplateBinding Content}" Background="Transparent" Margin="2"></Label> 
     </StackPanel> 
    </Border> 
</ControlTemplate> 

Y utilizar de esta manera:

<Button Content="Button" Template="{StaticResource ResourceKey=buttonTemplate}"> 
    <Button.Resources> 
     <ImageSource x:Key="Img">SomeUri.png/</ImageSource> 
    </Button.Resources> 
</Button> 

Answer 2

No ha dicho realmente cómo espera que los consumidores de su botón configuren la fuente. Podría usar la propiedad Button.Tag, por ejemplo, y luego vincularla a esa en su plantilla. O se podría definir su propio control:

public class ImageButton : Button 
{ 
    // add Source dependency property a la Image 
} 

Y a continuación, la plantilla:

<ControlTemplate TargetType="ImageButton"> 
    <Border CornerRadius="5" Margin="15" Cursor="Hand"> 
     <StackPanel> 
      <Image Name="Img" Style="{StaticResource ImageStyle}" Source="{TempateBinding Source}" Height="100" Width="100" Margin="5"></Image> 
      <Label Content="{TemplateBinding Content}" Background="Transparent" Margin="2"></Label> 
     </StackPanel> 
    </Border> 
</ControlTemplate> 

Answer 3

TemplateBinding es un peso ligero "unión", que no es compatible con algunas de las características de la unión tradicionales, como el tipo de forma automática conversión utilizando los convertidores de tipo conocidos asociados con la propiedad de destino (como convertir el URI de cadena en una instancia de BitmapSource).

El siguiente código puede funcionar correctamente:

<Window x:Class="GridScroll.Window2" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="Window2"> 
<Window.Resources> 
    <Style TargetType="{x:Type Button}" x:Key="ButtonStyle"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Border CornerRadius="5" Margin="15" Cursor="Hand" Background="Red"> 
         <StackPanel Orientation="Horizontal" Background="White"> 
          <Image Name="Img" Source="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}" Margin="5"></Image> 
          <Label Content="{TemplateBinding Content}" Margin="2"></Label> 
         </StackPanel> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 


</Window.Resources> 
<StackPanel Orientation="Horizontal"> 
    <Button Style="{StaticResource ButtonStyle}" Tag="a.jpeg" Content="a"/> 
    <Button Style="{StaticResource ButtonStyle}" Tag="b.png" Content="b"/> 
</StackPanel> 

Answer 4

No estoy seguro de que entendía el problema muy bien, pero ¿por qué no utilizar ContentPresenter? Permite mover el código de tu Imagen en el nivel superior.

<ControlTemplate x:Key="BtnTemplate" TargetType="Button"> 
    ... 
    <ContentPresenter/> 
</ControlTemplate> 
... 
<Button Template="{StaticResource BtnTemplate}"> 
    <Image .../> 
</Button>