Discussion :

[alexxxx69]

Bonjour à tous,

Je suis en train de faire un style perso pour des boutons (style Metro Windows 8) et j'ai un petit souci. Voilà mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<Style x:Key="AccueilButtonStyle1" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Rectangle Fill="#D7212121" />
                        <TextBlock Foreground="White" FontWeight="Bold" FontSize="16" TextWrapping="Wrap" Text="{TemplateBinding Content}" Margin="5,5,5,5"/>
                        <Image Source="Images/engrenage64.png" Height="64" Width="64" Margin="0,30,0,0" />
                     </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Le bouton est un rectangle simple avec une image et du texte. J'aimerais savoir comment binder la source de l'image à un attribut du bouton comme j'ai fait pour le texte du du TextBlock bindé avec la propriété Content du bouton. J'aimerais juste pouvoir indiquer la source de l'image dans le xaml de la page et pas dans le dictionnaire.

Merci à tous

[tomlev]

J'aimerais savoir comment binder la source de l'image à un attribut du bouton

Ca c'est pas difficile, la question est plutôt : à quel attribut du bouton tu veux le binder...

Vu qu'un bouton n'a pas de propriété de type Image, tu as 2 options :
- Créer une classe qui hérite de Button et qui a une propriété ImageSource (de type ImageSource). Dans le template, tu bindes sur cette propriété
- Autre approche, un peu inhabituelle mais que j'aime bien : créer dans une classe à part, sans lien avec Button, une propriété attachée de type ImageSource, et binder sur cette propriété.

Par exemple tu peux faire quelque chose comme ça :

Code C# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public static class ExtraProperties
{
    public static ImageSource GetImageSource(DependencyObject obj)
    {
        return (ImageSource)obj.GetValue(ImageSourceProperty);
    }
 
    public static void SetImageSource(DependencyObject obj, ImageSource value)
    {
        obj.SetValue(ImageSourceProperty, value);
    }
 
    public static readonly DependencyProperty ImageSourceProperty =
        DependencyProperty.RegisterAttached(
            "ImageSource",
            typeof(ImageSource),
            typeof(ExtraProperties),
            new UIPropertyMetadata(null));
}

Template :

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
<Style x:Key="AccueilButtonStyle1" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Rectangle Fill="#D7212121" />
                        <TextBlock Foreground="White" FontWeight="Bold" FontSize="16" TextWrapping="Wrap" Text="{TemplateBinding Content}" Margin="5,5,5,5"/>
                        <Image Source="{TemplateBinding my:ExtraProperties.ImageSource}" Height="64" Width="64" Margin="0,30,0,0" />
                     </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Utilisation :

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<Button Style="{StaticResource AccueilButtonStyle1}"
        Content="Hello world"
        my:ExtraProperties.ImageSource="/Images/helloworld.png" />

[alexxxx69]

sympa ta méthode, je vais l'utiliser

[alexxxx69]

Une dernière question si je peux abuser un peu ,

Comment changer au survol la couleur du rectangle qui compose mon bouton ? J'ai essayé dans le bloc Trigger mais je ne sais pas comment appeler le rectangle

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
    <Style x:Key="AccueilButtonStyle1" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Rectangle Fill="#D7212121" />
                        <TextBlock Foreground="White" FontFamily="Tahoma" FontWeight="Bold" FontSize="14" TextWrapping="Wrap" Text="{TemplateBinding Content}" Margin="5,5,5,5"/>
                        <Image Source="Images/engrenage64.png" Height="64" Width="64" Margin="0,30,0,0" />
                     </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Cursor" Value="Hand" />
            </Trigger>
        </Style.Triggers>
    </Style>

[tomlev]

Donne un nom à ton bouton, et utilise ce nom comme TargetName dans le setter dans un trigger du ControlTemplate (pas dans un trigger du Style)

Ou alors : définis un Background dans le style, bind le Fill du rectangle avec ce Background (avec TemplateBinding), et change le Background dans un trigger du style.

[alexxxx69]

merci