web-dev-qa-db-fra.com

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

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

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

Mais comme ceci est un modèle de contrôle pour la commande de bouton et la commande de bouton ne dispose pas d'une propriété source, je ne peux pas utiliser de template 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>

Étant donné que je dois définir différentes images pour différentes instances de bouton, je ne peux pas aussi coder le chemin.

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

wpfxamldata-bindingcontroltemplatetemplatebinding
20
Sam

Je suggérerais d'utiliser des ressources dynamiques, par ex. 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 utilisez-le comme ceci:

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

Il s'agit d'une "reliure" légère, elle ne prend pas en charge certaines caractéristiques de la liaison traditionnelle, telles que la conversion de type automatiquement à l'aide des convertisseurs de type connus associés à la propriété cible (comme convertir l'URI de la chaîne en une instance 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>
5
biju

Vous n'avez pas vraiment dit comment vous vous attendez à ce que les consommateurs de votre bouton définissent la source. Vous pouvez utiliser le Button.Tag Propriété, par exemple, puis lier à cela dans 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>
2
Kent Boogaart

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

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