Affichage de l'image dans le contenu de l'animateur dans le bouton

J'ai un bouton avec un style qui affiche une image à l'intérieur. Je voudrais être en mesure de préciser l'image qu'il utilise à l'aide de la Content de propriété sur le bouton (ou autre).

Comment pouvez accomplir cela sans réellement l'imbrication d'une image directement dans le bouton.

<BitmapImage x:Key="closeImage" UriSource="close.png" />

Je pensais que je pouvais peut-être spécifier le nom de fichier d'image comme ceci:

<Button Content="{{StaticResource closeImage}" x:Name="closeButton" Click="closeButton_Click" Style="{DynamicResource WindowToolboxButton}"/>

Style:

    <Style x:Key="WindowToolboxButton" TargetType="{x:Type Button}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
        <Setter Property="Background" Value="{StaticResource ButtonNormalBackgroundFill}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ButtonBorder}"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid x:Name="grid" Height="15" Width="15">
                        <Border x:Name="border" CornerRadius="2,2,2,2" BorderBrush="#FFBBCDD2" BorderThickness="1" Opacity="0" Margin="0">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FF82A3AC" Offset="1"/>
                                    <GradientStop Color="#7FCDD9DC"/>
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>
                        <Image x:Name="image" Source="close.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center" >

                        </Image>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

InformationsquelleAutor Chris | 2010-08-17

Je suis assez sûr que je suis absent le problème de votre question, mais le code suivant fonctionne pour moi:

<Window.Resources>
 <Image x:Key="test" Source="/Images/ChangeCase.png"/>
</Window.Resources>

<!-- Using a Resource for the Content -->
<Button Width="100" Height="20" Content="{StaticResource test}"/>

<!-- Specifying the Content directly -->
<Button Width="100" Height="20">
 <Image Source="/Images/ChangeCase.png"/>
</Button>

Plus, j'ai repéré une erreur dans votre code:

<Button Content="{{StaticResource closeImage}" [...]

devrait être:

<Button Content="{StaticResource closeImage}" [...]

Je n'arrive pas à comprendre ce que votre style est en train de faire. Pourquoi avez-vous le Contenu de la Propriété définie sur un StaticResource si vous voulez spécifier l'image en passant par le style?

Edit:

Bon, j'ai essayé votre style et ça marche aussi pour moi.

   <Style x:Key="WindowToolboxButton" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid x:Name="grid" Height="15" Width="15">
                        <Border x:Name="border" CornerRadius="2,2,2,2" BorderBrush="#FFBBCDD2" BorderThickness="1" Opacity="0" Margin="0">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FF82A3AC" Offset="1"/>
                                    <GradientStop Color="#7FCDD9DC"/>
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>
                        <Image x:Name="image" Source="/Images/ChangeCase.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

  <Button Width="100" Height="20" Content="Test" Style="{DynamicResource WindowToolboxButton}"/>

L'image est affichée. Cependant, je ne peux pas voir votre frontière en raison de l'opacité-prop être mis à 0.

Le contenu qui est donné directement sur le bouton est remplacé par le style.

Peut-être qu'il y a qqch de mal avec votre image? Avez-vous jeu de construction-propriété à Ressources?

Je suppose que ma question ne devrait vraiment avoir été: Comment puis-je définir un style de bouton où vous pouvez facilement spécifier la source de l'image utilisée?

InformationsquelleAutor Torsten

0

Je pense que la bonne façon de le faire est
1. Créer une nouvelle custom de contrôle ImageButton qui dérive de Bouton
2. Créer un DP 'ImageSource' de type 'ImageSource" dans ImageButton et dans son style de lier la Source de l'Image de cette DP.
Alors vous pouvez l'utiliser comme <ImageButton ImageSource={StaticResource ...}/>

Si vous essayez d'ajouter une image définie dans une ressource à un contrôle de contenu, il ne fonctionnera que la première fois. La deuxième fois que vous essayez d'ajouter la même image dans un autre contrôle de contenu, elle échouera avec "visuel Spécifié est déjà un enfant d'un autre visuel..."
- Vous pouvez ignorer cette erreur en supprimant le contrôle du contenu et de l'ajout de la nouvelle télécommande pour le contrôle parent. Votre idée, ça sonne mieux et cleanlier, bien évidemment.
- Je ne pense pas qu'il y est de toute façon de contourner l'erreur (en fait, je n'ai pas bien comprendre ce que vous vouliez dire, si). Aucun visuel ne peut être qu'un enfant sur un visuel. Vous ne pouvez pas ajouter le même visuel(Image) comme enfant de deux des visuels différents. Ce que je comprends de Chris veut peut-être resue les images définies dans la ressource pour les différents boutons. L'ajout de cette image directement en tant qu'enfant d'un bouton ne fonctionnera qu'une fois. Si la même image est ajoutée en tant qu'enfant d'un autre bouton qui est très possible, il va générer des erreurs. La seule façon est d'utiliser des ImageSource et pas l'image.
- Je crois plutôt qu'il veut pour permuter les images des boutons. Il a un bouton spécial style (avec un gradient linéaire de fond et ainsi de suite), et la seule chose qui change sur les boutons de l'image, qu'ils affichent. Néanmoins je suis d'accord avec vous. Un enfant ne peut pas avoir plus d'un parent. Je suis tombé sur un problème similaire, tout en ajoutant une bordure autour d'un élément enfant de la programmation, ce qui m'a obligé à retirer l'enfant de l'élément, avant que je puisse l'ajouter à la frontière. Cependant, j'ai eu mixte, puisqu'il ne s'applique pas à ce problème.
InformationsquelleAutor NVM
0

En fait, c'est vraiment facile. Utiliser le Style que vous avez déjà et ajoutez ce qui suit à l '"image"
```
Source="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"
```
Alors (tant que vous avez l'image en tant que Contenu/Copier si plus récent) vous pouvez définir le Contenu avec l'image souhaitée de l'Uri.
```
<Button Content="/[projectname];component/.../close.png" Style="{StaticResource WindowToolboxButton}" ... />
```
remarque: remplacer "[projectname] " avec le nom de votre projet et les '...' avec chemin d'accès à l'image
- Je viens de réaliser que cette question a été posée comme un bajillion ans, donc je ne sais pas si cela s'applique .NET 3.5.
- devrait fonctionner, juste testé sur mon Win7/VS2010 pc.
InformationsquelleAutor Murkaeus

Remplacer

<Image x:Name="image" Source="close.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center" >

Avec

<Image x:Name="image" Source="{Binding Content, RelativeSource={RelativeSource AncestorType=Button}" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center" >

Où votre ancêtre type de bouton qui est appelée dans le code xaml, et là, vous pouvez Définir le Contenu de ce bouton pour point de l'image.

Exemple:

<cc:customButton  Content={StaticResource someImage}.../>

InformationsquelleAutor ivica.moke

Vous devez vous connecter pour publier un commentaire.