menu dynamique avec reflet

Version imprimable

Bonjour à tous!
je suis designer et je me mets à blend...
j'ai trouvé un menu (fisheyemenu) et j'aimerai le modifier à ma sauce,
les boutons sont dynamique, un seul templates de bouton et appelé plusieurs foi dans le XAML avec l'attribution d'une image différente pour chacun..
Code:

1 2 3 4 5 6 7 8 <StackPanel x:Name="toolBar" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Bottom" Height="55" > <local:ToolbarItem x:Name="ti1" Title="Home" ImageSource="images/home.png" Info="Go to the homepage for nokola.com" IsVisible="False" ImageWidth="40" MouseMove="toolBar_MouseMove" NavigateUri="http://www.nokola.com" /> <local:ToolbarItem x:Name="ti2" Title="Games" ImageSource="images/games.png" Info="Play fast paced and interesting Silverlight games
Can you be the world champion?" IsVisible="False" ImageWidth="40" MouseMove="toolBar_MouseMove" NavigateUri="http://www.nokola.com/games"/> <local:ToolbarItem x:Name="ti3" Title="Samples" ImageSource="images/samples.png" Info="Experience Silverlight technology samples and demos" IsVisible="False" ImageWidth="40" MouseMove="toolBar_MouseMove" NavigateUri="http://www.nokola.com/samples"/>
je voudrait attribuer un reflet à chaque bouton...
Le problème est que quand j'essaie de faire un reflet du bouton dans le templates bouton par une brush que je crée à partir de la première image il me mets forcement la source de l'image

Code:

<ImageBrush x:Key="reflet" Stretch="Uniform" ImageSource="images/home.png"/>

j'ai essayer de changer l'adresse de la source par le nom du bouton ou du conteneur de l'image mais rien à faire je dois mal m'y prendre :lol:
que ça soit XAML ou C# c'est la première foi que j'en vois :?
Merci de votre aide
Jé

Heu avec cette ligne tu ne dois pas réussir à faire un reflet :
Code:

1 2 <ImageBrush x:Key="reflet" Stretch="Uniform" ImageSource="images/home.png"/>
Enfin, pour la théorie tu dois modifier le template de ton button en ajoutant le reflet souhaité et pour définir l'image dynamiquement tu dois faire :
Code:

1 2 <ImageBrush x:Key="reflet" Stretch="Uniform" ImageSource="{TemplateBinding ImageSource}"/>
Ce bout de code te permet de récupérer la valeur que tu passes dans ton controle lorsque tu le définit :
Code:

1 2 3 <local:ToolbarItem x:Name="ti1" Title="Home" ImageSource="images/home.png" Info="Go to the homepage for nokola.com" IsVisible="False" ImageWidth="40" MouseMove="toolBar_MouseMove" NavigateUri="http://www.nokola.com" />

Bien j'ai pas tout compris et je suppose que TemplateBlinding doit correspondre à quelque chose mais je ne sais pas quoi...
Je me demande si c'est un template en fait ...
en gros le code de ce que j'apelle template c'est ça :

Code:

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
  <ImageBrush x:Key="reflet" Stretch="Uniform" ImageSource="{TemplateBinding ImageSource}"/>
    </UserControl.Resources>
    <Canvas>
        <Grid x:Name="LayoutRoot" >
            <Grid.RenderTransform>
                <ScaleTransform x:Name="scaleItem" ScaleX="1" ScaleY="1" />
            </Grid.RenderTransform>
 
            <StackPanel x:Name="panelItem" Opacity="1">
                <Grid>
                    <Rectangle Fill="{StaticResource reflet}" Margin="-0.333,0,0.333,-26.674" VerticalAlignment="Bottom" Height="35" RenderTransformOrigin="0.5,0.5" Opacity="0.5" x:Name="reflet">
                    	<Rectangle.Resources>
                    		<LinearGradientBrush x:Key="dagOpa_reflet" EndPoint="0.5,1" StartPoint="0.5,0">
                    			<GradientStop Color="#FF000000" Offset="1"/>
                    			<GradientStop Color="#00000000" Offset="0.192"/>
                    		</LinearGradientBrush>
                    	</Rectangle.Resources>
                    	<Rectangle.OpacityMask>
                    		<StaticResource ResourceKey="dagOpa_reflet"/>
                    	</Rectangle.OpacityMask>
                    	<Rectangle.RenderTransform>
                    		<TransformGroup>
                    			<ScaleTransform ScaleY="-0.8"/>
                    			<SkewTransform/>
                    			<RotateTransform/>
                    			<TranslateTransform/>
                    		</TransformGroup>
                    	</Rectangle.RenderTransform>
                    </Rectangle>
                    <Image x:Name="imgItem" Width="40" Source="images/home.png" />
                </Grid>
                <TextBlock x:Name="textTitle" FontSize="12" Margin="0,0,0,0" HorizontalAlignment="Center" Foreground="White">Title</TextBlock>
            </StackPanel>
        </Grid>
    </Canvas>
</UserControl>

et rien à faire si j'atribue pas l'adresse en dur de la source de l'image de la brush (image/img.png) bin ça tourne pas j'ai éssayer comme tu pe voir de placer le {TemplateBinding ImageSource}
mais il aime pas du tout ça =>
the member "imageSource" is not recognized or si not accessible.
Merci encore!

23/10/2008, 13h47
DroP

Le templateBinding sert lorsque tu définis un template de controle. Or là j'ai l'impression que ton ToolbarItem est un UserControl.

De plus, j'avais lu un peu trop vite et mon exemple n'était pas correcte car le TemplateBinding ne se définit pas sur une ressources. Milles excuses :oops:

Est ce que ton Controle dispose d'un fichier "cs", où il y a le code d'implémenter. Si oui pourrais-tu nous en faire part pour voir comment il gère le controle

Merci

Pas de problème drop!
c'est super sympa de m'aider:king:
voila le c#

Code:

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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
namespace Navigation
{
    public partial class ToolbarItem : UserControl
    {
        public const double SCALE_DEFAULT = 1;
        public const double SCALE_SELECTED = 1.2;
        public const double SIDE_MARGIN = 28;
        public const double BASELINE_MARGIN = -6;
 
        public static readonly DependencyProperty ImageWidthProperty = DependencyProperty.Register(
            "ImageWidth", typeof(double), typeof(ToolbarItem), new PropertyMetadata(new PropertyChangedCallback(ImageWidth_Changed)));
 
        public double ImageWidth
        {
            get { return (double)GetValue(ImageWidthProperty); }
            set { SetValue(ImageWidthProperty, value); }
        }
 
        private bool _isSelected;
 
 
        /// <summary>
        /// Uri to navigate to when clicked
        /// </summary>
        public string NavigateUri { get; set; }
 
        /// <summary>
        /// true to open link in new window, false to open link in current window
        /// default is false
        /// </summary>
        public bool OpenInNewWindow { get; set; }
 
        /// <summary>
        /// Description of the current toolbar item
        /// </summary>
        public string Info { get; set; }
 
        /// <summary>
        /// true if the current item is selected, false otherwise
        /// </summary>
        public bool IsSelected
        {
            get { return _isSelected; }
            set
            {
                _isSelected = value;
                if (_isSelected)
                {
                    animSelect.Begin();
                    textTitle.FontSize = 12;
                }
                else
                {
                    animDeselect.Begin();
                    textTitle.FontSize = 11;
                }
 
                ResetScale();
            }
 
        }
 
 
        /// <summary>
        /// Title of the toolbar item
        /// </summary>
        public string Title
        {
            get { return textTitle.Text; }
            set { textTitle.Text = value; }
        }
 
        /// <summary>
        /// The source of the image to display for the toolbar item
        /// </summary>
        public ImageSource ImageSource
        {
            get { return imgItem.Source; }
            set { imgItem.Source = value; }
        }
 
        /// <summary>
        /// The source of the image to display for a selected toolbar item
        /// </summary>
 
 
        /// <summary>
        /// true if the item will be visible initially, false otherwise
        /// </summary>
        public bool IsVisible
        {
            get { return panelItem.Opacity > 0; }
            set
            {
                if (value) panelItem.Opacity = 1;
                else
                {
                    if (System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
                    {
                        panelItem.Opacity = 0.2;
                    }
                    else
                    {
                        panelItem.Opacity = 0;
                    }
                }
            }
        }
 
        // Summary:
        //     Represents the callback that is invoked when the effective property value
        //     of a dependency property changes.
        //
        // Parameters:
        //   d:
        //     The System.Windows.DependencyObject on which the property has changed value.
        //
        //   e:
        //     Event data that is issued by any event that tracks changes to the effective
        //     value of this property.
        public static void ImageWidth_Changed(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            (d as ToolbarItem).imgItem.Width = (double)e.NewValue;
        }
 
        public ToolbarItem()
        {
            InitializeComponent();
        }
 
        /// <summary>
        /// Pops up the item on screen
        /// </summary>
        /// <param name="startTime"></param>
        public void Popup(TimeSpan? startTime)
        {
            double xoffset = 80;
            xoffset = LayoutRoot.ActualWidth * 2;
            double yoffset = LayoutRoot.ActualHeight + BASELINE_MARGIN;
 
            if (IsSelected)
            {
                popupScaleX.Value = SCALE_SELECTED;
                popupScaleY.Value = SCALE_SELECTED;
 
                popupCanvasLeft.Value = -(xoffset * SCALE_SELECTED - xoffset) / 4;
                popupCanvasTop.Value = -(yoffset * SCALE_SELECTED - yoffset);
            }
 
            animPopup.BeginTime = startTime;
            animPopup.Begin();
        }
 
        /// <summary>
        /// Scales the control to a given scale and centers it accordingly
        /// </summary>
        /// <param name="scale"></param>
        public void ScaleTo(double scale)
        {
            ScaleTo(scale, false);
        }
 
        /// <summary>
        /// Scales the control to a given scale and centers it accordingly
        /// </summary>
        /// <param name="scale"></param>
        public void ScaleTo(double scale, bool alwaysAnimate)
        {
            //if (_isScaling) return;
            double xoffset = 80;
            xoffset = LayoutRoot.ActualWidth * 2;
            double yoffset = LayoutRoot.ActualHeight + BASELINE_MARGIN;
 
            if ((Math.Abs(scaleItem.ScaleX - scale) > 0.3) && (!alwaysAnimate))
            {
                scaleX1.Value = scaleItem.ScaleX;
                scaleX2.Value = scale;
 
                scaleY1.Value = scaleItem.ScaleY;
                scaleY2.Value = scale;
 
                canvasLeft1.Value = Canvas.GetLeft(LayoutRoot);
                canvasTop1.Value = Canvas.GetTop(LayoutRoot);
                canvasLeft2.Value = -(xoffset * scale - xoffset) / 4;
                canvasTop2.Value = -(yoffset * scale - yoffset);
 
                _isScaling = true;
                animScaleTo.Begin();
            }
            else
            {
                scaleItem.ScaleX = scale;
                scaleItem.ScaleY = scale;
                Canvas.SetLeft(LayoutRoot, -(xoffset * scale - xoffset) / 4);
                Canvas.SetTop(LayoutRoot, -(yoffset * scale - yoffset));
            }
 
        }
 
        bool _isScaling = false;
 
        private void animScaleTo_Completed(object sender, EventArgs e)
        {
            _isScaling = false;
        }
 
        public void ResetScale()
        {
            if (IsSelected)
            {
                ScaleTo(SCALE_SELECTED);
            }
            else
            {
                ScaleTo(SCALE_DEFAULT);
            }
        }
 
        private void animPopup_Completed(object sender, EventArgs e)
        {
            //imgItem.Opacity = 0.4;
            //if (IsSelected)
            //{
            //    ScaleTo(SCALE_SELECTED, true);
            //}
        }
 
        private void UserControl_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (NavigateUri != null)
            {
                if (OpenInNewWindow)
                {
                    System.Windows.Browser.HtmlPage.Window.Navigate(new Uri(NavigateUri, UriKind.Absolute), "_new");
                }
                else
                {
                    System.Windows.Browser.HtmlPage.Window.Navigate(new Uri(NavigateUri, UriKind.Absolute));
                }
            }
        }
 
        bool _isInitialized = false;
        private void UserControl_LayoutUpdated(object sender, EventArgs e)
        {
            if (_isInitialized) return;
            _isInitialized = true;
 
            double w = LayoutRoot.ActualWidth;
            this.Width = w * SCALE_SELECTED + SIDE_MARGIN; // default max width + some margin (note: the actual max width on mouse over may be larger)
        }
 
    }
}

désolé j'ai tout mis car j'ai aucune idée de ce dont on parle ^^
merci encore!:mrgreen:

Voici le bout de code qui permet de charger l'image dynamiquement.

Il récupère la valeur définit dans ImageSource lors de :
Code:

1 2 3 <local:ToolbarItem x:Name="ti1" Title="Home" ImageSource="images/home.png" Info="Go to the homepage for nokola.com" IsVisible="False" ImageWidth="40" MouseMove="toolBar_MouseMove" NavigateUri="http://www.nokola.com" />
et l'applique à l'image qui est contenue dans le UserControl.
Code:

1 2 3 4 5 6 7 8 9 /// <summary> /// The source of the image to display for the toolbar item /// </summary> public ImageSource ImageSource { get { return imgItem.Source; } set { imgItem.Source = value; } }
Pour résoudre ton problème il faudrait que tu me montre entière le XAML de ton UserControl avec la partie reflet que tu as ajouté

Merci :lol:

Code:

<ImageBrush x:Key="reflet" Stretch="Uniform" ImageSource="image/monImage.png"/>

ça c'est la brush avec la quelle je contient l'image 1 pour en faire un reflet...
et ça c'est le reflet et l'image une (en dernière lligne)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<Rectangle Fill="{StaticResource reflet}" Margin="-0.333,0,0.333,-26.674" VerticalAlignment="Bottom" Height="35" RenderTransformOrigin="0.5,0.5" Opacity="0.5" x:Name="reflet">
                    	<Rectangle.Resources>
                    		<LinearGradientBrush x:Key="dagOpa_reflet" EndPoint="0.5,1" StartPoint="0.5,0">
                    			<GradientStop Color="#FF000000" Offset="1"/>
                    			<GradientStop Color="#00000000" Offset="0.192"/>
                    		</LinearGradientBrush>
                    	</Rectangle.Resources>
                    	<Rectangle.OpacityMask>
                    		<StaticResource ResourceKey="dagOpa_reflet"/>
                    	</Rectangle.OpacityMask>
                    	<Rectangle.RenderTransform>
                    		<TransformGroup>
                    			<ScaleTransform ScaleY="-0.8"/>
                    			<SkewTransform/>
                    			<RotateTransform/>
                    			<TranslateTransform/>
                    		</TransformGroup>
                    	</Rectangle.RenderTransform>
                    </Rectangle>
                    <Image x:Name="imgItem" Width="40" Source="images/home.png" />

23/10/2008, 14h50
DroP

bein en faite je recherche l'endroit où Toi tu définis le reflet, et je ne le trouve pas, pourrais-tu colorer cette partie dans le code-ci dessus (avec la fonction Editer du Forum :p)

Merci
23/10/2008, 15h29
jedizign

j'ai fait nimporte quoi mais bon je t'ai mis le code que tu demande dans le message au dessus ^^
Merci encore!