Plantilla de unión en plantilla de control

Question

I tiene la siguiente plantilla de control.

deseo para establecer la propiedad de origen para el control de la imagen en el control plantilla con la plantilla de unión.

Pero como esto es una plantilla de control para el control de botón y el botón de control no lo hace tener propiedad de origen, 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>

Desde que tengo que establecer diferentes imágenes por diferentes instancias de botón, i no puede codificar el camino también.

Por favor, hágamelo saber cómo hacer frente a esta situación.

Answer 1

Me gustaría sugerir el uso de recursos dinámicos, por ejemplo definir la plantilla como sigue:

<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

TemplateBinding es un peso ligero "unión", que no soporta algunas características de tradicional unión, tales como automáticamente el tipo de conversión mediante los convertidores de tipos conocidos asociados con la propiedad de destino (tal como la conversión de la cadena de URI 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 3

Usted ha dicho no es realmente cómo espera que los consumidores de su botón para ajustar la fuente. Se podría utilizar la propiedad Button.Tag, por ejemplo, y luego unirse a la de 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 4

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

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