Modèle de liaison dans le modèle de contrôle

Question

J'ai le modèle de contrôle suivant.

Je souhaite définir la propriété source pour le contrôle de l'image dans le contrôle  modèle à l'aide de liaison modèle.

Mais puisque c'est un modèle de contrôle pour le contrôle du bouton et le bouton de commande ne fonctionne pas ont la propriété source, je ne peux pas utiliser TemplateBinding dans ce cas.

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

Depuis que je dois mettre des images différentes pour différentes instances de bouton, je ne peux pas coder en dur le chemin aussi bien.

S'il vous plaît laissez-moi savoir comment aborder cette situation.

Answer 1

Je suggère d'utiliser des ressources dynamiques, par exemple définir le modèle comme suit:

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

Et l'utiliser comme ceci:

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

Answer 2

TemplateBinding est un poids léger « contraignant », il ne supporte pas certaines fonctionnalités de traditionnels de liaison, telles que le type automatiquement la conversion en utilisant les convertisseurs de type connus associés à la propriété cible (comme la conversion de l'URI de chaîne en une instance de BitmapSource).

Le code suivant peut fonctionner correctement:

<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

Vous ne l'avez pas vraiment dit comment vous vous attendez des consommateurs de votre bouton pour régler la source. Vous pouvez utiliser la propriété Button.Tag, par exemple, puis se lier à celui de votre modèle. Ou vous pouvez définir votre propre contrôle:

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

Et puis le modèle:

<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

Je ne suis pas sûr que je compris votre problème très bien, mais pourquoi utilisez-vous pas ContentPresenter? Il permet de déplacer le code de votre image au niveau supérieur.

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