Création d'un custom button

**NejNej** · 16/11/2010, 11h41

Bonjour à tous.

J'essaye de créer un bouton qui possèderait un champs texte supplémentaire.

Je me suis dis que j'allais créer un button et créer un style afin d'avoir ce que je veux.

J'ai donc créé ce style :

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
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
 
<Style x:Key="BtnCount" TargetType="{x:Type Button}">
		<Setter Property="Foreground" Value="{StaticResource ButtonTextColor}"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type Button}">
					<ControlTemplate.Resources>
                        <Storyboard x:Key="OnMouseOver">
                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="{StaticResource ClrNoSelectBtnMouseOverUp}"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="{StaticResource ClrNoSelectBtnMouseOverMiddle}"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="{StaticResource ClrNoSelectBtnMouseOverDown}"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="OnPresse">
                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="{StaticResource ClrBlackUp}"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="{StaticResource ClrBlackDown}"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="IsTagged">
                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="#FFFEFEFE"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="{StaticResource ClrSelectBtnUp}"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="{StaticResource ClrSelectBtnDown}"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="IsNoEnabled">
							<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path1" Storyboard.TargetProperty="(UIElement.Visibility)">
								<DiscreteObjectKeyFrame KeyTime="00:00:00.1000000" Value="{x:Static Visibility.Hidden}"/>
							</ObjectAnimationUsingKeyFrames>
							<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
								<SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="{StaticResource ClrBtnNoEnabled}"/>
							</ColorAnimationUsingKeyFrames>
							<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(Brush.Opacity)">
								<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.6"/>
							</DoubleAnimationUsingKeyFrames>
							<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
								<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.5"/>
							</DoubleAnimationUsingKeyFrames>
						</Storyboard>
					</ControlTemplate.Resources>
					<Grid x:Name="grid">
						<Viewbox x:Name="BtnPrincipal">
							<Canvas Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
								<Grid x:Name="Grid1" HorizontalAlignment="Stretch" Margin="0" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
									<Grid.ColumnDefinitions>
										<ColumnDefinition Width="5"/>
										<ColumnDefinition Width="*"/>
										<ColumnDefinition Width="20"/>
									</Grid.ColumnDefinitions>
 
									<Path x:Name="path" Height="{TemplateBinding Height}" Stretch="Fill" StrokeLineJoin="Round" Data="F1 M 5.5,0.5L 115.296,0.5C 118.057,0.5 120.296,2.73858 120.296,5.5L 120.296,20.8333C 120.296,23.5948 118.057,25.8333 115.296,25.8333L 5.5,25.8333C 2.73859,25.8333 0.500031,23.5948 0.500031,20.8333L 0.500031,5.5C 0.500031,2.73858 2.73859,0.5 5.5,0.5 Z " Stroke="#80010101" StrokeDashArray="1 0" RenderTransformOrigin="0.5,0.5" Width="{TemplateBinding Width}" Grid.ColumnSpan="3">
										<Path.Fill>
											<LinearGradientBrush StartPoint="0.502793,0.0192309" EndPoint="1.50281,0.0192309">
												<LinearGradientBrush.RelativeTransform>
													<TransformGroup>
														<SkewTransform CenterX="0.502793" CenterY="0.0192309" AngleX="-3.4673" AngleY="0"/>
														<RotateTransform CenterX="0.502793" CenterY="0.0192309" Angle="90.3196"/>
													</TransformGroup>
												</LinearGradientBrush.RelativeTransform>
												<GradientStop Color="{DynamicResource ClrNoSelectBtnUp}" Offset="0"/>
                                                <GradientStop Color="{DynamicResource ClrNoSelectBtnDown}" Offset="1"/>
											</LinearGradientBrush>
										</Path.Fill>
									</Path>
									<Rectangle Margin="0,0.5" Stroke="{x:Null}" RadiusX="5" RadiusY="5" Grid.Column="2" HorizontalAlignment="Left" Width="19.5">
										<Rectangle.Fill>
											<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
												<GradientStop Color="{DynamicResource ClrBlackUp}" Offset="0"/>
												<GradientStop Color="#D8FDFBFB" Offset="1"/>
											</LinearGradientBrush>
										</Rectangle.Fill>
									</Rectangle>
									<Path x:Name="path1" Width="{TemplateBinding Width}" Stretch="Fill" Fill="#66F9FBFC" Data="F1 M 5.18475,0.500008L 114.942,0.500008C 117.714,0.500008 119.961,2.13589 119.961,4.15385L 119.961,12.9231C 119.961,14.941 121.729,13.1667 118.957,13.1667L 119.626,12.6795C 114.942,4.88462 8.53101,1.96155 1.16925,14.141L 0.165405,4.15385C 0.165405,2.13589 2.41263,0.500008 5.18475,0.500008 Z " Grid.ColumnSpan="3" Margin="0.165,0.5,-0.166,12.026" d:LayoutOverrides="Height"/>
									<TextBlock x:Name="TxtCount" Text="0" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{DynamicResource TxtBlockCountDesign}" Background="{x:Null}" Margin="0" FontSize="{TemplateBinding TextBlock.LineHeight}" Grid.Column="2"/>
									<ContentPresenter x:Name="contentPresenter" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True" HorizontalAlignment="Stretch" Margin="0" d:LayoutOverrides="Width" Content="BtnCount" Grid.Column="1"/>
								</Grid>
							</Canvas>
						</Viewbox>
					</Grid>
					<ControlTemplate.Triggers>
                        <Trigger Property="Tag" Value="{x:Null}">
                            <Trigger.ExitActions>
                                <RemoveStoryboard BeginStoryboardName="IsTagged_BeginStoryboard"/>
                            </Trigger.ExitActions>
                        </Trigger>
                        <Trigger Property="IsFocused" Value="True"/>
						<Trigger Property="IsDefaulted" Value="True"/>
						<Trigger Property="IsMouseOver" Value="True">
							<Trigger.ExitActions>
								<RemoveStoryboard BeginStoryboardName="onMouseOver_BeginStoryboard"/>
							</Trigger.ExitActions>
							<Trigger.EnterActions>
								<BeginStoryboard x:Name="onMouseOver_BeginStoryboard" Storyboard="{StaticResource onMouseOver}"/>
							</Trigger.EnterActions>
							<Setter Property="Cursor" TargetName="grid" Value="Hand"/>
						</Trigger>
						<Trigger Property="IsPressed" Value="True">
							<Trigger.ExitActions>
								<RemoveStoryboard BeginStoryboardName="onPress_BeginStoryboard"/>
							</Trigger.ExitActions>
							<Trigger.EnterActions>
								<BeginStoryboard x:Name="onPress_BeginStoryboard" Storyboard="{StaticResource onPress}"/>
							</Trigger.EnterActions>
						</Trigger>
						<Trigger Property="IsEnabled" Value="False">
							<Trigger.ExitActions>
								<RemoveStoryboard BeginStoryboardName="IsNoEnabled_BeginStoryboard"/>
							</Trigger.ExitActions>
							<Trigger.EnterActions>
								<BeginStoryboard x:Name="IsNoEnabled_BeginStoryboard" Storyboard="{StaticResource IsNoEnabled}"/>
							</Trigger.EnterActions>
						</Trigger>
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>

Mais comment via code atteindre un champs contenu dans un style???
Plus particulièrement ici le champs TxtCount.

Mais je ne voyais pas comment faire via le style.
J'ai donc créé un CustomControl :

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
 
public class ButtonCount : Button, INotifyPropertyChanged
    {
        int _Count;
 
        static ButtonCount()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(ButtonCount), new FrameworkPropertyMetadata(typeof(ButtonCount)));
        }
 
        public int Count
        {
            get
            { return _Count; }
            set
            { if(value!=_Count)_Count = value; OnPropertyChanged("Count"); CountString = _Count.ToString(); }
        }
        public String CountString
        {
            get
            { return _Count.ToString(); }
            set
            { OnPropertyChanged("CountString"); }
        }
 
        #region INotifyPropertyChanged Members
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion
    }

Puis dans mon style j'ai fais une tentative de binding sur la propriété text:

Code :

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

1
2
 
<TextBlock x:Name="TxtCount" TextWrapping="Wrap" Text="{Binding CountString}" etc.../>

Dans ma fenêtre j'ai déclaré mon button comme cela:

Code :

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

1
2
 
<MyCustomControls:ButtonCount Style="{DynamicResource BtnCount}" Click="ButtonCount_Click" Width="100" Height="40" Content="Name"/>

Le style est bon.
Mais aucune réaction pour mon TxtCount qui reste vide.
Pas à pas j'ai vu que ça passait bien dans le set de mon CountString.

C'est surement ce binding dans le style qui n'est pas bon:

Code :

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

1
2
 
<TextBlock x:Name="TxtCount" TextWrapping="Wrap" Text="{Binding CountString}" etc.../>

J'ai beau regarder des tutos sur les customcontrols, je ne vois pas trop de cas similaire au mien.

Si quelqu'un a une piste merci.

**NejNej** · 16/11/2010, 11h52

Bon bah comme souvent on cherche des heures on décide à poster et ... hop on trouve :

Code :

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

1
2
 
<TextBlock x:Name="TxtCount" TextWrapping="Wrap" Text="{Binding CountString, RelativeSource={RelativeSource TemplatedParent}}" etc../>

Création d'un custom button

Windows Presentation Foundation

Vue hybride

Discussions similaires

Partager

Partager