Bonjour à tous,

j'ai voulais un (joli) bouton avec la gestion des 3 principaux états (normal, over et click).

J'ai donc créé un userControl sous Blend dans lequel j'ai créé un storyboad simulant les 3 états puis en code behind, je gère ces états.

Tout fonctionne bien. Le visuel du bouton change en fonction des différents états.
Je voudrais maintenant avoir un visuel particulier (grisé) lorsque le IsEnabled est à False.

Et là, je coince. Les états sont bien inactivés mais l'image que j'ai prévu pour l'état IsEnabledFalse n'est pas affiché (j'ai le visuel standard).

Quelqu'un pourrait m'éclairer ?

Le code ci-après ... Merci d'avance !

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
<UserControl x:Name="userControl" x:Class="OragNet.Assets.Buttons.EditButton"
    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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" Width="20" Height="20" Loaded="userControl_Loaded">
 
    <Grid x:Name="LayoutRoot" Background="Transparent">
    	<VisualStateManager.VisualStateGroups>
			 <VisualStateGroup x:Name="CommonStates">
			 	<VisualStateGroup.Transitions>
					 <VisualTransition GeneratedDuration="0:0:0.2" To="OnLeave">
					 	<Storyboard />
					 </VisualTransition>
				 </VisualStateGroup.Transitions>
				 <VisualState x:Name="OnOver" >
				 	<Storyboard x:Name="sb_OnOver">
 
				 		<DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image_over"/>
                        <DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse_over"/>
                    </Storyboard>
				 </VisualState>
				 <VisualState x:Name="OnClick" >
				 	<Storyboard x:Name="sb_OnClick">
				 		<DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image_click"/>
					</Storyboard>
				 </VisualState>
				 <VisualState x:Name="OnLeave" >
				 	<Storyboard x:Name="sb_OnLeave">
				 		<DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image_over"/>
				 		<DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image_click"/>
                        <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse_over"/>
                    </Storyboard>
				 </VisualState>
				 <VisualState x:Name="IsEnabledFalse" >
				 	<Storyboard x:Name="sb_IsEnabledFalse">
                        <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image"/>
                        <DoubleAnimation Duration="0:0:0.2" To="0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image_IsEnabledFalse"/>
                    </Storyboard>
				 </VisualState>
 
			 </VisualStateGroup>
		</VisualStateManager.VisualStateGroups> 
 
    	<Image x:Name="image" HorizontalAlignment="Center" Height="18" Source="/OragNet;component/Assets/Images/edit.png" Stretch="Fill" VerticalAlignment="Center" Width="18" RenderTransformOrigin="0.5,0.5">
    		<Image.RenderTransform>
    			<CompositeTransform/>
    		</Image.RenderTransform>
    	</Image>
        <Image x:Name="image_over" HorizontalAlignment="Center" Source="/OragNet;component/Assets/Images/edit.png" Stretch="Fill" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Opacity="0">
    		<Image.RenderTransform>
    			<CompositeTransform/>
    		</Image.RenderTransform>
    	</Image>
        <Image x:Name="image_click" HorizontalAlignment="Center" Height="16" Source="/OragNet;component/Assets/Images/edit.png" Stretch="Fill" VerticalAlignment="Center" Width="11.9" RenderTransformOrigin="0.5,0.5" Opacity="0">
    		<Image.RenderTransform>
    			<CompositeTransform/>
    		</Image.RenderTransform>
    	</Image>
        <Image x:Name="image_IsEnabledFalse" HorizontalAlignment="Center" Source="/OragNet;component/Assets/Images/editDisabled.png" Stretch="Fill" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Opacity="0" Height="14" Width="14">
    		<Image.RenderTransform>
    			<CompositeTransform/>
    		</Image.RenderTransform>
    	</Image>
    	<Ellipse x:Name="ellipse_over" Margin="0" StrokeThickness="2" Opacity="0"/>
 
    </Grid>
    <ToolTipService.ToolTip>
        <ToolTip Content="Editer"></ToolTip>
    </ToolTipService.ToolTip>
</UserControl>

et en code behind

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
42
43
44
45
46
47
48
49
 
namespace OragNet.Assets.Buttons
{
    public partial class EditButton : UserControl
    {
 
 
        public EditButton()
        {
            InitializeComponent();
 
            if (this.IsEnabled == false)
            {
                VisualStateManager.GoToState(this, "IsEnabledFalse", true);
            }
            else
            {
                //Lors du survol du composant par la souris
                this.MouseEnter += (o, e) =>
                {
                    VisualStateManager.GoToState(this, "OnOver", true);
                };
                //lors du click du composant avec la souris
                this.MouseLeftButtonDown += (o, e) =>
                {
                    VisualStateManager.GoToState(this, "OnClick", true);
                };
                //lorsque l'on relache le click
                this.MouseLeftButtonUp += (o, e) =>
                {
                    VisualStateManager.GoToState(this, "OnOver", true);
                };
                //lorsque l'on ne survole plus le composant
                this.MouseLeave += (o, e) =>
                {
                    VisualStateManager.GoToState(this, "OnLeave", true);
                };
 
 
            }
        }
 
        private void userControl_Loaded(object sender, RoutedEventArgs e)
        {
 
        }
 
 
    }