wpf - Encuadernación de plantillas en la plantilla de control

xaml data-binding

Question

Tengo la siguiente plantilla de control.

Deseo establecer la propiedad de origen para el control de imagen en la plantilla de control mediante el Enlace de plantilla.

Pero como esta es una plantilla de control para el control de botones y el control de botones no tiene propiedades 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>

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

Por favor, hágame saber cómo abordar esta situación.

Answer 1

No estoy seguro de haber entendido bien su problema, pero ¿por qué no usa ContentPresenter? Permite mover el código de tu imagen a un nivel superior.

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

Answer 2

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

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

Y luego 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 "enlace" ligero, no es compatible con algunas características del enlace tradicional, como la conversión automática de tipos utilizando los convertidores de tipo conocidos asociados con la propiedad de destino (como la conversión del 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

Yo sugeriría usar recursos dinámicos, por ejemplo, defina 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 úsalo así:

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