Discussion :

[SIC83]

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)
        {
 
        }
 
 
    }

[micka132]

Et si tu spécifies une height/width ?

Sinon l'envie de refaire un bouton c'est du pédagogique ou un vrai besoin?
Parcequ'un template suffit non?

[SIC83]

Bonjour Mickael,,
Qu'entends-tu par heigh/width ?

Sinon c'est un vrai besoin ... mais j'en a profité pour apprendre au travers de ce besoin (c'est donc également à titre pédagogique que je suis passé par là).

Celà dit, je n'ai pas encore exploité les templates ... donc si tu as un lien, je suis également preneur.