Discussion :

[LaurentC33]

Bonjour,

J'ai besoin d'avoir des boutons dont le fond est une image (blanche uniforme, au format png) à laquelle je souhaiterais appliquer une couleur différente sur chaque bouton (binding ?).
Le problème est que je surcharge le background avec une ImageBrush mais cette ImageBrush m'interdit d'y appliquer une couleur .... Comment faire ? Un converter ? Merci pour votre aide !

Le code XAML :

Code XAML :

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

1
2
3
4
5
6
7
        <Style TargetType="Button" x:Key="customButton">
            <Setter Property="Background">
                <Setter.Value>
                    <ImageBrush ImageSource="/Images/button_shape.png"  />
                </Setter.Value>
            </Setter>
        </Style>

Et le bouton :

Code XAML :

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

 <Button Content="8" Style="{StaticResource ResourceKey=customButton}" />

Ce qui serait parfait c'est d'utiliser la propriété background de chaque bouton afin de changer la couleur de l'image de fond...mais je tourne en rond

[MABROUKI]

bonjour

Ce qui serait parfait c'est d'utiliser la propriété background de chaque bouton afin de changer la couleur de l'image de fond...mais je tourne en rond

la pop Bacground accepte beaucoup de choses ..& VisualBrush est probablement ton am:

code xaml du form:

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<Window x:Class="WpfRectangleCouleut.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
    <Window.Resources>
 
        <Style TargetType="Button" x:Key="customButton">
            <Setter Property="Background">
                <Setter.Value>
                    <VisualBrush>
                        <VisualBrush.Visual>
                        <Grid Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Mode=OneWay}" 
	                      Height="{Binding Path=ActualHeight, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Mode=OneWay}">
 
                            <Image Source="/Images/button_shape.png"   
	                           VerticalAlignment="Bottom" 
	                           HorizontalAlignment="Center" 
	                           />
                                <Rectangle Fill="LightBlue" Opacity="0.8"/>
                            </Grid>
                        </VisualBrush.Visual>
                    </VisualBrush> 
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button 
            HorizontalAlignment="Center" VerticalAlignment="Center"
            FontSize="36"
            Content="8" 
                Style="{StaticResource ResourceKey=customButton}" />
    </StackPanel>
</Window>

bon code...

[LaurentC33]

Bonjour Mabrouki et merci beaucoup,

Ta solution fonctionne parfaitement. Par contre cela teinte en utilisant un rectangle, et ne teinte pas directement l'image.

Du coup je suis parti sur le fait d'utiliser du code vectoriel (exporté depuis inkskape) que je dessine avec une couleur paramétrable :

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
16
 
 <Style TargetType="ext:CustomButton">
            <Setter Property="Background">
                <Setter.Value>
                    <VisualBrush>
                        <VisualBrush.Visual>
                            <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BackgroundColor}" StrokeThickness="0.2" StrokeMiterLimit="4">
                                <Path.Data>
                                    <PathGeometry Figures="m 60.556041 148.93203 h 91.653949 c 6.29286 0 13.49936 5.44129 11.35895 11.35895 l -20.44611 56.52815 c -2.14041 5.91768 -5.06609 11.35896 -11.35895 11.35896 H 40.109924 c -6.292861 0 -13.499365 -5.44128 -11.358955 -11.35896 l 20.446122 -56.52815 c 2.1404 -5.91766 5.06609 -11.35895 11.35895 -11.35895 z" FillRule="NonZero"/>
                                </Path.Data>
                            </Path>
                        </VisualBrush.Visual>
                    </VisualBrush>
                </Setter.Value>
            </Setter>
        </Style>

Le type hérité :

Code C# :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
    public class CustomButton : Button
    {
 
        public static readonly DependencyProperty BackgroundColorProperty = DependencyProperty.Register("BackgroundColor", typeof(Color), typeof(CustomButton), new UIPropertyMetadata(Colors.White));
        public Color BackgroundColor
        {
            get { return (Color)GetValue(BackgroundColorProperty); }
            set { SetValue(BackgroundColorProperty, value); }
        }
 
    }

Et l'utilisation du bouton

Code XAML :

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

1
2
 
<ext:CustomButton BackgroundColor="Red" Content="V"/>

Le problème le binding de la couleur (Red dans l'exemple) n'est pas appliqué dans le style


PS: Merci au modérateur pour l'ajout de la balise XAML, je serais vigilent dorénavant

[MABROUKI]

rebonjour

Pour "melanger" ou combiner les pixels des 2 images il aller dans un scenario avancé en la DP Effect du bouton et un shader pixel(Pixel Shader ) qui merge les pixels des 2 images ...

Pour cela il faut se taper les étapes qui suivent :
1/ Créer un projet de librairie usercontrol WPF (denommé WpfShaderLib) :

supprimer le class UserControl
créer un dosiier MyEffects qui contiendra :
- un class Combination
- un fichier texte Combination.txt ANSI sous notepad pour le code du Shader
- un fichier CompileCombinationShader.bat avec notepad à lancer en mode ligne de commande

Le fichier batch sert à compiler le fichier combination.txt avec le compiler FXC.EXE de DirectX
Le résultat de cette compilation est un fichier dénommé Combination.ps qu'il faut ajouter au dossier MyEffects (voir code ci-après)...


Ou trouver le compilateur FXC ? il suffit de copier FXC .EXE situe sous Windows 10 situé à :
C:\Program Files\Windows Kits\10\bin\10.0.18362.0\x86
dans le dossier racine du projet.
2/ Générer le projet lib...
3/ référencer le projet dans un projet Test...

code exemple du projet lib:

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
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
namespace WpfShaderLib.MyEffects
{
    public class Combination : ShaderEffect
    {
        // Pixel shader that this effect is using
        private static PixelShader _shader =
            new PixelShader() { UriSource = Utilities.GetResourcePackUri("MyEffects/combination.ps") };
 
        public Combination()
        {
            PixelShader = _shader;
 
            // remember to call UpdateShaderValue() for all shader input arguments here
            UpdateShaderValue(BaseImageProperty);
            UpdateShaderValue(SecondImageProperty);
 
        }
        // The default shader input - the visual on which the shader operates
        // Note: you can add more texture inputs in a similar way as Input is added
        // image button
        public Brush BaseImage
        {
            get { return (Brush)GetValue(BaseImageProperty); }
            set { SetValue(BaseImageProperty, value); }
        }
 
        // The WPF dependency property that backs up the shader input, assigned to sampler register s0
        // </summary>
        public static readonly DependencyProperty BaseImageProperty =
            ShaderEffect.RegisterPixelShaderSamplerProperty("BaseImage",
            typeof(Combination), 0);
 
 
        // The default shader input - the visual on which the shader operates
        // Note: you can add more texture inputs in a similar way as Input is added
        // image button
        public Brush SecondImage
        {
            get { return (Brush)GetValue(SecondImageProperty); }
            set { SetValue(SecondImageProperty, value); }
        }
 
        // The WPF dependency property that backs up the shader input, assigned to sampler register s0
        // </summary>
        public static readonly DependencyProperty SecondImageProperty =
            ShaderEffect.RegisterPixelShaderSamplerProperty("SecondImage",
            typeof(Combination), 0);
 
 
        // Some other input property that our shader will use
        // autre valeur pour moduler la "combination" de type double
        public double SomeInput
        {
            get { return (float)GetValue(SomeInputProperty); }
            set { SetValue(SomeInputProperty, value); }
        }
 
        /// <summary>
        /// Using Dependency property to store SomeInput in order to enable binding, animation and other
        /// use PixelShaderConstantCallback() to assing to a shader register - in this case it's register c0
        /// </summary>
        public static readonly DependencyProperty SomeInputProperty =
            DependencyProperty.Register("SomeInput",
            typeof(double), typeof(Combination),
            new UIPropertyMetadata(0.0, PixelShaderConstantCallback(0)));
    }
}

fichier Combination.txt du code du shader:

Code hlsl :

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
sampler2D baseImage : register(s0);
sampler2D secondImage : register(s1);
 
float4 main(float2 uv : TEXCOORD) : COLOR 
{ 
 
	// sample a pixel from  textures
	float4 color1= tex2D( baseImage , uv.xy); 
	float4 color2= tex2D( secondImage , uv.xy);
 
	// combine  pixels from  textures
	float4 combinedColor;
	combinedColor.r = (color1.r + color2.r) /2;
	combinedColor.g = (color1.g + color2.g) /2;
	combinedColor.b = (color1.b + color2.b) /2;
	combinedColor.a = (color1.a + color2.a) /2;
	return combinedColor; 
}

fichier CompileEffects.bat ligne de commande:

Code :

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

1
2
fxc /T ps_2_0 /E main /Fo MyEffects\combination.ps MyEffects\Combination.txt
pause

code xaml du projet test :

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<Window x:Class="WpfTestShader.WinCombinationImage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:lib="clr-namespace:WpfShaderLib.MyEffects;assembly=WpfShaderLib"
        Title="WinCombinationImage" Height="300" Width="300">
    <Window.Resources>
        <Image x:Key="img1"
               Source="/Images/button_shape.png">
        </Image>
        <Image x:Key="img2"
               Source="/Images/zebra.jpg">
        </Image>
    </Window.Resources>
 
    <Grid>
        <Button 
             Content="button1">
            <Button.Effect>
                <lib:Combination>
                    <lib:Combination.BaseImage>
                        <ImageBrush ImageSource="{Binding Source={StaticResource img1},Path=Source}" />
                    </lib:Combination.BaseImage>
                    <lib:Combination.SecondImage>
                        <ImageBrush ImageSource="{Binding Source={StaticResource img2},Path=Source}" />
                    </lib:Combination.SecondImage>
                </lib:Combination>
            </Button.Effect>
        </Button>
    </Grid>
</Window>

On peut faire toute sorte d’opérations avec les pixels ..
Pour se familiariser avec le code shader il suffit de taper "PixelShader WPF sample" ou "Shazzam PixelQhader pdf" sur google ...
bon code...

[LaurentC33]

Bonjour Mabrouki,

Merci beaucoup
C'est une solution très impressionnante, mais je préfère le vectoriel qui me permet de ne pas gérer de fichiers dans les sources du projet et d'avoir un rendu parfait.

Ça fonctionne, mais je ne comprends pas comment me "binder" à ma propriété ...

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
16
17
18
19
20
21
22
23
24
25
26
27
28
 
   <Style TargetType="ext:CustomButton">
            <Setter Property="Width" Value="90" />
            <Setter Property="Height" Value="60" />
            <Setter Property="Margin" Value="0 6" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="FontFamily" Value="pack://application:,,,/Fonts/#Myriad Pro" />
            <Setter Property="FontSize" Value="30" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Background">
                <Setter.Value>
                    <VisualBrush>
                        <VisualBrush.Visual>
                            <Path StrokeThickness="0.2" StrokeMiterLimit="4">
                                <Path.Data>
                                    <PathGeometry Figures="m 60.556041 148.93203 h 91.653949 c 6.29286 0 13.49936 5.44129 11.35895 11.35895 l -20.44611 56.52815 c -2.14041 5.91768 -5.06609 11.35896 -11.35895 11.35896 H 40.109924 c -6.292861 0 -13.499365 -5.44128 -11.358955 -11.35896 l 20.446122 -56.52815 c 2.1404 -5.91766 5.06609 -11.35895 11.35895 -11.35895 z" FillRule="NonZero"/>
                                </Path.Data>
                                <Path.Style>
                                    <Style TargetType="Path">
                                        <Setter Property="Fill" Value="{Binding BackgroundColor}" />
                                    </Style>
                                </Path.Style>
                            </Path>
                        </VisualBrush.Visual>
                    </VisualBrush>
                </Setter.Value>
            </Setter>
</style>

[MABROUKI]

bonkour

Dans un style on ne peut se binder au props DP du parent c.à.d ton custom button...
Pour le faire il faut utiliser la DP ControlTemplate du bouton ...

code exemple :

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
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
<Style TargetType="local:MyButton">
            <Setter Property="ControlTemplate">
                <Setter.Value >
                        <ControlTemplate TargetType="{x:Type Button}">
                        <Grid 
                            Width="{TemplateBinding Width}"
                            Height="{TemplateBinding Height}"
                            ClipToBounds="True">
 
                            <!-- Outer Rectangle with rounded corners. -->
                            <Rectangle 
                                x:Name="outerRectangle" HorizontalAlignment="Stretch" 
                                VerticalAlignment="Stretch" Stroke="{TemplateBinding Background}" 
                                RadiusX="20" RadiusY="20" StrokeThickness="5" Fill="Transparent" />
 
                            <!-- Inner Rectangle with rounded corners. -->
                            <Rectangle 
                                x:Name="innerRectangle" HorizontalAlignment="Stretch" 
                                VerticalAlignment="Stretch" Stroke="Transparent" StrokeThickness="20" 
                                Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20" />
 
                                <!-- Glass Rectangle -->
                                <Rectangle x:Name="glassCube" HorizontalAlignment="Stretch"      VerticalAlignment="Stretch"      StrokeThickness="2" RadiusX="10" RadiusY="10" Opacity="0"      Fill="{StaticResource MyGlassBrushResource}"      RenderTransformOrigin="0.5,0.5">
                                <Rectangle.Stroke>
                                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop Offset="0.0" Color="LightBlue" />
                                            <GradientStop Offset="1.0" Color="Gray" />
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Rectangle.Stroke>
                                <!-- These transforms have no effect as they are declared here.            The reason the transforms are included is to be targets            for animation (see later). -->
                                <Rectangle.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform />
                                        <RotateTransform />
                                    </TransformGroup>
                                </Rectangle.RenderTransform>
                                <!-- A BevelBitmapEffect is applied to give the button a            "Beveled" look. -->
                                <Rectangle.BitmapEffect>
                                    <BevelBitmapEffect />
                                </Rectangle.BitmapEffect>
                            </Rectangle>
 
                            <!-- Present Text of the button. -->
                            <DockPanel 
                                Name="myContentPresenterDockPanel">
                                <ContentPresenter 
                                    x:Name="myContentPresenter" Margin="20" 
                                    Content="{TemplateBinding  Content}" TextBlock.Foreground="Black" />
                            </DockPanel>
                        </Grid>
                    </ControlTemplate>
                    <ControlTemplate.Triggers>
                        <!--omis mais à faire-->
                    </ControlTemplate.Triggers>
                </Setter.Value>
            </Setter>
        </Style>

Dans l'exemple donné tu pourrais remplacer l'un des rectangles par ton Path et binder sa DP Fill à ta prop BaclgroundColor par le mécanisme dit TemplateBinding ...

reference MSDN Lib fr intitulé "Procédure pas à pas : créer un bouton avec XAML "

lien:
https://docs.microsoft.com/fr-fr/dot...-by-using-xaml


bon code...

[LaurentC33]

Bonjour Mabrouki,

Vraiment merci beaucoup, non seulement je m'en suis sorti grâce à toi mais en plus j'ai bien saisi les ControlTemplate

Un de mes boutons :

Code xaml :

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

1
2
 
<ext:CustomButton Content="T" Background="#E38B02" HoverBackground="#E1AB58" PressBackground="#B0771D" Click="PadClick"/>

Le code du CustomButton en C#

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
 
namespace XXX.ToolsExtensions
{
    public class CustomButton : Button
    {
        private static readonly DependencyProperty HoverBackgroundProperty = DependencyProperty.Register(nameof(HoverBackground), typeof(Brush), typeof(CustomButton), new PropertyMetadata(new SolidColorBrush(Colors.Transparent)));
        public Brush HoverBackground
        {
            get { return (Brush)GetValue(HoverBackgroundProperty); }
            set { SetValue(HoverBackgroundProperty, value); }
        }
 
        private static readonly DependencyProperty PressBackgroundProperty = DependencyProperty.Register(nameof(PressBackground), typeof(Brush), typeof(CustomButton), new PropertyMetadata(new SolidColorBrush(Colors.Transparent)));
        public Brush PressBackground
        {
            get { return (Brush)GetValue(PressBackgroundProperty); }
            set { SetValue(PressBackgroundProperty, value); }
        }
 
        public static readonly DependencyProperty BorderColorProperty = DependencyProperty.Register("BorderColor", typeof(Brush), typeof(CustomButton), new PropertyMetadata(new SolidColorBrush(Colors.Transparent)));
 
        public Brush BorderColor
        {
            get { return (Brush)GetValue(BorderColorProperty); }
            set { SetValue(BorderColorProperty, value); }
        }
 
        public static readonly DependencyProperty StrokeThicknessProperty = DependencyProperty.Register("StrokeThickness", typeof(double), typeof(CustomButton), new UIPropertyMetadata(double.NaN));
        public double StrokeThickness
        {
            get { return (double)GetValue(StrokeThicknessProperty); }
            set { SetValue(StrokeThicknessProperty, value); }
        }
 
    }
}

Et le 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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
 <Style TargetType="ext:CustomButton">
            <Setter Property="Width" Value="90" />
            <Setter Property="Height" Value="60" />
            <Setter Property="Margin" Value="0 6" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="FontFamily" Value="pack://application:,,,/Fonts/#Myriad Pro" />
            <Setter Property="FontSize" Value="30" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ext:CustomButton}">
 
                        <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">
                            <Path Name="BackRect" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Fill="{TemplateBinding Background}" StrokeThickness="{TemplateBinding StrokeThickness}" Stroke="red" StrokeMiterLimit="4" Margin="0,0,0.8,0" Stretch="Fill">
                                <Path.Data>
                                    <PathGeometry Figures="m 60.556041 148.93203 h 91.653949 c 6.29286 0 13.49936 5.44129 11.35895 11.35895 l -20.44611 56.52815 c -2.14041 5.91768 -5.06609 11.35896 -11.35895 11.35896 H 40.109924 c -6.292861 0 -13.499365 -5.44128 -11.358955 -11.35896 l 20.446122 -56.52815 c 2.1404 -5.91766 5.06609 -11.35895 11.35895 -11.35895 z" FillRule="NonZero"/>
                                </Path.Data>
                            </Path>
                            <DockPanel>
                                <ContentPresenter Margin="20,0" VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}" TextBlock.Foreground="{TemplateBinding Foreground}" />
                            </DockPanel>
                        </Grid>
 
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Fill" TargetName="BackRect" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=HoverBackground}" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Fill" TargetName="BackRect" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PressBackground}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
 
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Aussi j'avais comme erreur (stupide!!) de renvoyer un objet "Color" au lieu d'un objet "Brush" dans mes DependencyProperty pour changer les couleurs des éléments (Path par exemple)

Merci encore Mabrouki d'avoir pris du temps pour moi ça a été très constructif !