Discussion :

[telbas]

Bonjour à tous,

J'utilise Visual Studio C# où je développe une application WPF et depuis 3 jours je tourne en rond
sur un problème qui me parait simple sur le papier mais que je ne parviens pas à solutionner.

Dans le fichier XAML d'une fenêtre, je place un bouton dont je modifie l'apparence avec un ControlTemplate,
dans ce ControlTemplate un Rectangle qui définie la couleur du Background.

Fichier XAML :

Code xml :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<Window x:Class="ModifierCouleurBouton.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ModifierCouleurBouton"
        mc:Ignorable="d"
        Title="MainWindow" Height="150" Width="250">
 
    <Window.Resources>
        <!-- *************************************** -->
        <!--  Control Template des Boutons           -->
        <!-- *************************************** -->
        <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
            <Grid x:Name="mainGrid"  RenderTransformOrigin="0.5,0.5">
                <Grid.BitmapEffect>
                    <OuterGlowBitmapEffect GlowColor="DarkViolet" GlowSize="0" x:Name="glowEffect"/>
                </Grid.BitmapEffect>
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.4*"/>
                    <RowDefinition Height="0.6*"/>
                </Grid.RowDefinitions>
 
                <!-- Je veux modifier la couleur (Fill) dans le code-behind -->
                <Rectangle x:Name="rectangleBackGround" 
                               Grid.Row="0" 
                               Grid.RowSpan="2" 
                               RadiusX="9" 
                               RadiusY="9" 
                               Fill="DarkBlue">
                </Rectangle>
 
                <Rectangle Grid.Row="0" Margin="2,2,2,0" RadiusX="9" RadiusY="9">
                    <Rectangle.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <LinearGradientBrush.GradientStops>
                                <GradientStopCollection>
                                    <GradientStop Color="#ccffffff" Offset="0" />
                                    <GradientStop Color="#00ffffff" Offset="1" />
                                </GradientStopCollection>
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <ContentPresenter Grid.Row="0" Grid.RowSpan="2" VerticalAlignment="center" HorizontalAlignment="center" TextElement.Foreground="White"/>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="RenderTransform" TargetName="mainGrid">
                        <Setter.Value>
                            <ScaleTransform ScaleX="0.9" ScaleY="0.9" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Fill" TargetName="rectangleBackGround">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0.979,1.069" StartPoint="0.742,-0.931">
                                <GradientStop Color="#FF4E2259" Offset="0.011"/>
                                <GradientStop Color="#FF000000" Offset="1"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation To="4" Duration="0:0:0.3"
                                        Storyboard.TargetName="glowEffect" 
                                        Storyboard.TargetProperty="GlowSize" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation To="0" Duration="0:0:0.1" 
                                        Storyboard.TargetName="glowEffect" 
                                        Storyboard.TargetProperty="GlowSize" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>
 
    <!-- ****************************************** -->
    <!--            Création du Bouton              -->  
    <!-- ****************************************** -->
    <Grid>
        <Button Name="btnOk" Width="80" Height="28"
               Template="{StaticResource ButtonTemplate}" >
            Ok
        </Button>
    </Grid>
</Window>

Je cherche à modifier la propriété Fill du Rectangle dans le code-behind mais impossible de l'atteindre, j'ai donné
à mon rectangle mais il reste invisible du fichier .cs.

Fichier .CS :

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
20
21
22
23
24
25
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
 
namespace ModifierCouleurBouton
{
    /// <summary>
    /// Logique d'interaction pour MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
 
            // je peux accéder au bouton sans problème
            btnOk.Opacity = 25;
 
 
            // comment atteindre ici le <Rectangle> du <ControlTemplate>
            // pour modifier la couleur ?
        }
    }
}

Un grand Merci d'avance à ceux qui pourraient me sortir de la galère.
Pipoul

[Kyroon]

Bonjour,

Pour pouvoir modifier facilement la couleur du rectangle, le mieux est de brancher la propriété Fill de celui-ci sur une propriété existante du bouton, et comme c'est ton Background, ça me parait tout désigné.
Pour ce faire dans ton ControlTemplate tu fais :

Code xml :

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

1
2
3
4
5
6
7
<Rectangle x:Name="rectangleBackGround" 
                Grid.Row="0" 
                Grid.RowSpan="2" 
                RadiusX="9" 
                RadiusY="9" 
                Fill="{TemplateBinding Background}">
</Rectangle>

Maintenant dans ton code, en modifiant btnOk.Background, tu modifie en réalité le Fill de ton rectangle.

Bonne continuation.

[telbas]

Bonjour,

Ça marche nickel-chrome, parfait !
Encore un grand MERCI pour l'idée à laquelle je n'ai pas pensé.

[Noxen]

Juste par curiosité pourquoi tu veux modifier le bouton dans le "code behind" ?

[champsy_dev]

J'utilise Visual Studio C# où je développe une application WPF et depuis 3 jours je tourne en rond

Juste par curiosité pourquoi tu veux modifier le bouton dans le "code behind" ?

A mon avis telbas commence le WPF et à longtemps fait du Winforms ... me trompe-je ?