Silverlight 2 - Here's a Button Template example.

03-10-2008 2:06 PM |

I've converted a button style that we use in our Xceed DataGrid for WPF Resource Center in Silverlight 2. Feel free to check it out ! It demonstrates how to work with State storyboards which I had a hard time finding information about, hope this can help some ! :)

 <Style TargetType="Button"
             x:Key="resourceCenterButton">
         <Setter Property="Template">
            <Setter.Value>
               <ControlTemplate TargetType="Button">
                  <Grid x:Name="RootElement">
                     <Grid.Resources>
                        <Storyboard x:Key="MouseOver State">
                           <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                                          Storyboard.TargetName="OverGlow"
                                                          Storyboard.TargetProperty="(UIElement.Opacity)">
                              <SplineDoubleKeyFrame KeySpline="0,0,0.5,1"
                                                    KeyTime="00:00:00.4000000"
                                                    Value="0.3" />
                           </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="Pressed State">                                   
                           <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                                          Storyboard.TargetName="OverGlow"
                                                          Storyboard.TargetProperty="(UIElement.Opacity)">
                              <SplineDoubleKeyFrame KeySpline="0,0,0.5,1"
                                                    KeyTime="00:00:00.4000000"
                                                    Value="1" />
                           </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="Normal State">
                           <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                                          Storyboard.TargetName="OverGlow"
                                                          Storyboard.TargetProperty="(UIElement.Opacity)">
                              <SplineDoubleKeyFrame KeySpline="0,0,0.5,1"
                                                    KeyTime="00:00:00.4000000"
                                                    Value="0" />
                           </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                     </Grid.Resources>

                     <Border Width="{TemplateBinding Width}"
                             HorizontalAlignment="{TemplateBinding HorizontalAlignment}">
                        <Grid>
                           <Grid.RowDefinitions>
                              <RowDefinition Height="0.5*" />
                              <RowDefinition Height="0.5*" />
                           </Grid.RowDefinitions>
                           <Grid.ColumnDefinitions>
                              <ColumnDefinition Width="Auto" />
                           </Grid.ColumnDefinitions>

                           <Border Width="Auto"
                                   Height="Auto"
                                   CornerRadius="2,2,2,2"
                                   HorizontalAlignment="Stretch"
                                   VerticalAlignment="Stretch"
                                   Background="#33262626"
                                   BorderBrush="{x:Null}"
                                   Grid.Column="0"
                                   Grid.ColumnSpan="2"
                                   Grid.RowSpan="2"
                                   BorderThickness="0,0,0,0" />

                           <Border CornerRadius="2,2,2,2"
                                   BorderThickness="1,1,1,1"
                                   HorizontalAlignment="Stretch"
                                   x:Name="OverGlow"
                                   Grid.ColumnSpan="1"
                                   Grid.RowSpan="2"
                                   Opacity="0">
                              <Border.BorderBrush>
                                 <LinearGradientBrush EndPoint="0.5,1"
                                                      StartPoint="0.5,0">
                                    <GradientStop Color="#FF880000"
                                                  Offset="0" />
                                    <GradientStop Color="#FFD64300"
                                                  Offset="1" />
                                 </LinearGradientBrush>
                              </Border.BorderBrush>
                              <Border.Background>
                                 <RadialGradientBrush GradientOrigin="0.497,0.154">
                                    <RadialGradientBrush.RelativeTransform>
                                       <TransformGroup>
                                          <ScaleTransform CenterX="0.5"
                                                          CenterY="0.5"
                                                          ScaleX="1.232"
                                                          ScaleY="1.232" />
                                          <SkewTransform AngleX="0"
                                                         AngleY="0"
                                                         CenterX="0.5"
                                                         CenterY="0.5" />
                                          <RotateTransform Angle="0"
                                                           CenterX="0.5"
                                                           CenterY="0.5" />
                                          <TranslateTransform X="0.022"
                                                              Y="0.106" />
                                       </TransformGroup>
                                    </RadialGradientBrush.RelativeTransform>
                                    <GradientStop Color="#FFff9900"
                                                  Offset="0" />
                                    <GradientStop Color="#FFdb5b03"
                                                  Offset="0.5722219944000244" />
                                    <GradientStop Color="#FF990100"
                                                  Offset="0.9833329916000366" />
                                    <GradientStop Color="#FF990000"
                                                  Offset="0.9888889789581299" />
                                 </RadialGradientBrush>
                              </Border.Background>
                           </Border>

                           <Border x:Name="backgroundBorder"
                                   BorderThickness="1,1,1,1"
                                   Width="Auto"
                                   Height="Auto"
                                   CornerRadius="2,2,2,2"
                                   HorizontalAlignment="Stretch"
                                   VerticalAlignment="Stretch"
                                   Grid.ColumnSpan="1"
                                   Grid.Row="0"
                                   Grid.RowSpan="2"
                                   Background="#7F262626">
                              <Border.BorderBrush>
                                 <LinearGradientBrush EndPoint="0,0"
                                                      StartPoint="0,1">
                                    <GradientStop Color="#CC000000"
                                                  Offset="0" />

                                    <GradientStop Color="#7F000000"
                                                  Offset="1" />
                                 </LinearGradientBrush>
                              </Border.BorderBrush>
                           </Border>
                           <Border x:Name="borderWhite"
                                   BorderThickness="1,1,1,1"
                                   Width="Auto"
                                   Height="Auto"
                                   CornerRadius="2,2,2,2"
                                   HorizontalAlignment="Stretch"
                                   VerticalAlignment="Stretch"
                                   Background="{x:Null}"
                                   Grid.RowSpan="2"
                                   Margin="1,1,1,1">
                              <Border.BorderBrush>
                                 <LinearGradientBrush EndPoint="0,0"
                                                      StartPoint="0,1">
                                    <GradientStop Color="#7FFFFFFF"
                                                  Offset="0" />

                                    <GradientStop Color="#4CFFFFFF"
                                                  Offset="1" />
                                 </LinearGradientBrush>
                              </Border.BorderBrush>
                           </Border>

                           <ContentPresenter HorizontalAlignment="Left"
                                             Margin="4,0,4,0"
                                             Foreground="{TemplateBinding Foreground}"
                                             Content="{TemplateBinding Content}"
                                             VerticalAlignment="Center"
                                             Grid.Column="0"
                                             Grid.RowSpan="2" />

                           <Border x:Name="glassBorder"
                                   Margin="1,1,1,0"
                                   VerticalAlignment="Stretch"
                                   Width="Auto"
                                   Height="Auto"
                                   CornerRadius="2,2,10,10"
                                   Grid.RowSpan="1"
                                   Grid.ColumnSpan="1"
                                   Opacity="1"
                                   Visibility="Visible">
                              <Border.Background>
                                 <LinearGradientBrush EndPoint="0.5,0"
                                                      StartPoint="0.5,1">
                                    <GradientStop Color="#00FFFFFF"
                                                  Offset="0" />

                                    <GradientStop Color="#A5FFFFFF"
                                                  Offset="1" />
                                 </LinearGradientBrush>
                              </Border.Background>
                           </Border>
                        </Grid>
                     </Border>
                  </Grid>
               </ControlTemplate>
            </Setter.Value>
         </Setter>
      </Style>

Re: Silverlight 2 - Here's a Button Template example.

03-12-2008 9:30 PM |

Looks cool Matt, but I have not done a lot with templates and styles. Could you post some sample xaml that demonstrates how to apply that style within a page to a button? I tried adding your xaml to one of my controls Resources section and then setting the style of a button to resourceCenterButton, but it didn't work. Didn't think it would work, but I gave it a shot.

Follow up:

Figured out the correct syntax:

Style="{StaticResource resourceCenterButton}"

Re: Silverlight 2 - Here's a Button Template example.

03-13-2008 9:08 AM |

Oh sorry Jack :) yes, that would be the correct syntax. Hope you like it!

Re: Silverlight 2 - Here's a Button Template example.

03-15-2008 5:46 AM |

nice

but what i would like to do, and can not see is how to assign styles and templates at runtime in C# and VB

thanks

Re: Silverlight 2 - Here's a Button Template example.

03-26-2008 5:14 AM |

Hello everybody,

I'm not an expert on silverlight even in programming but maybe I could help. I don't know if I've well understood your problem geordiejenner but I've found this on the web, in order to apply a style you've created in your app.xaml file at runtime in C#:

(if we assume that "b" is a button for example, and "ButtonStyle" a button style )

b.Style = (Style)(Application.Current.Resources["ButtonStyle"]);

Hope I will help.

Re: Re: Silverlight 2 - Here's a Button Template example.

03-26-2008 8:30 AM |

thanks, but does not appear to work

Microsoft tells me it can not be done at this time

did it work for you, or is this theory?

thank you

Re: Re: Silverlight 2 - Here's a Button Template example.

03-26-2008 8:46 AM |

yes, It works for me. I replied to this post cause I was searching a way to apply a style i've defined not in the xaml file; like explained in most web tutorials, but in the code behind.

 I am discovering Silverlight by myself, with very few notions of programming.

I found this information on the web page below:

http://romagny13.over-blog.com/article-11555652.html

(sorry it's in french )

Re: Re: Silverlight 2 - Here's a Button Template example.

03-26-2008 12:18 PM |

Hi,

I want to add themes to my application but I have read too that changing styles at run-time doesn't work in SL2.
 

Salut LeChixfre,

Doesn't work in Silverlight 2, the link explain how you can do on WPF, but Silverlight 2 can't. Humm ?

The word "Source" doesn't exist for ResourceDictionary in Silverlight 

How can it works for you ?

Re: Re: Silverlight 2 - Here's a Button Template example.

03-26-2008 12:50 PM |

Hi,

I'm not at work anymore, but I think I don't use the line you mentioned :

Re: Re: Silverlight 2 - Here's a Button Template example.

03-26-2008 10:26 PM |

yes, its true you can set the style in code, but if you change it when application is running it can works only if the target control doesn't have already another style defined (or you will get an error). One solution is to store de user preference (in a file, database, xml) and set the prefered style when initializing the application.

but I think the goal is to use styles with the same names (same x:Key but with different template or properties values) in different resource files, and apply the prefered resources (themes concept). How to do this in SL2beta1 ?
 

Re: Re: Re: Silverlight 2 - Here's a Button Template example.

03-27-2008 8:32 AM |

sorry, not seeing it.  please show sample code

Re: Re: Silverlight 2 - Here's a Button Template example.

03-27-2008 10:28 AM |

desopedr:

yes, its true you can set the style in code, but if you change it when application is running it can works only if the target control doesn't have already another style defined (or you will get an error). One solution is to store de user preference (in a file, database, xml) and set the prefered style when initializing the application.

but I think the goal is to use styles with the same names (same x:Key but with different template or properties values) in different resource files, and apply the prefered resources (themes concept). How to do this in SL2beta1 ?
 

You're right, I got the same problem at run-time!

Re: Re: Silverlight 2 - Here's a Button Template example.

05-07-2008 12:53 PM |

maybe too late, but here is a solution:

1 - Define you skinn like a control template (without the preceding tags for Style) in the App.xaml

2 - Use Template property of controls to change the skinn at runtime:

b.Template = (ControlTemplate)(Application.Current.Resources["yourSkinn"]);

I've posted a more detailed explanation here : http://innicia-silverlight.blogspot.com/

Hope it's help.

Re: Silverlight 2 - Here's a Button Template example.

05-19-2008 1:16 AM |

Thanks for that, it works nicely. Now I can use the same idea on my own button.

I just spent an hour trying to figure out how to do this stuff to a button using <ControlTemplate.Triggers> which I've discovered is not supported by Silverlight 2.0 Beta 1 and this stage. Guess you have to learn that coming from WPF to Silverlight. Lesson learned.

cheers,

Stephen

Re: Silverlight 2 - Here's a Button Template example.

05-19-2008 2:24 AM |

 Have run into an intersting problem.

I've wired up a togglebutton and used your example to hid/show a play/pause image on the button. It works nicely when you click on the button, but when you change the button state from the code behind it doesn't update the status of the button until you click it. Is there something to tell the UIElement that it has to check the state of the button again?

The way it behaves now if I change the button state from ischecked from true to false then it remains showing the path element. Click it and it changes to the other state then figures out it it's wrong and changes it back again. I'd like it to change if I change it in codebehind. Maybe I need a two way binding on the IsChecked property?

cheers,

Stephen

Re: Silverlight 2 - Here's a Button Template example.

05-19-2008 7:19 AM |

Excellent article. I was starting all my animation from behind code.

thanks very much

Re: Silverlight 2 - Here's a Button Template example.

07-11-2008 12:15 PM |

Hi Mathieu,

I am able to see the button with styles but not the animations.

Is there anything to do, to view effects???

Thanks,

Rams.

Re: Silverlight 2 - Here's a Button Template example.

07-12-2008 1:38 PM |

Hey Rams, the example was made for Beta 1 and the way storyboards and state works has changed in beta 2. I'll try to put an updated version as soon as I find the time !

Re: Silverlight 2 - Here's a Button Template example.

07-14-2008 2:30 AM |

Thankyou.

Rams.

Re: Silverlight 2 - Here's a Button Template example.

07-14-2008 8:00 PM |

It's not exactly the same but it should help you get started Rams : Make sure to add the following also : xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

 This is a button template that we use in our Xceed Uploader for .NET samples... you can check it out here: http://xceed.com/Upload_Silverlight_Intro.html

  <vsm:Style x:Key="buttonAddItems"
                   TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid x:Name="RootElement">
                                <vsm:VisualStateManager.VisualStateGroups>
                                    <vsm:VisualStateGroup x:Name="FocusStates">
                                        <vsm:VisualState x:Name="Unfocused" />
                                        <vsm:VisualState x:Name="Focused" />
                                    </vsm:VisualStateGroup>
                                    <vsm:VisualStateGroup x:Name="CommonStates">
                                        <vsm:VisualStateGroup.Transitions>
                                            <vsm:VisualTransition Duration="00:00:00.2000000" />
                                        </vsm:VisualStateGroup.Transitions>
                                        <vsm:VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                                                               Storyboard.TargetName="OverGlow"
                                                                               Storyboard.TargetProperty="(UIElement.Opacity)">
                                                    <SplineDoubleKeyFrame KeySpline="0,0,0.5,1"
                                                                          KeyTime="00:00:00.400"
                                                                          Value="1" />
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <DoubleAnimation Duration="00:00:00.2"
                                                                 Storyboard.TargetName="PressedGlow"
                                                                 Storyboard.TargetProperty="Opacity"
                                                                 To="1" />
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Disabled">
                                            <Storyboard />
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Normal">
                                            <Storyboard />
                                        </vsm:VisualState>
                                    </vsm:VisualStateGroup>
                                </vsm:VisualStateManager.VisualStateGroups>
                       
                                <Border Width="{TemplateBinding Width}"
                                        Height="{TemplateBinding Height}">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="0.5*" />
                                            <RowDefinition Height="0.5*" />
                                        </Grid.RowDefinitions>
                                        <Border Grid.RowSpan="2"
                                                Background="#7FFFFFFF"
                                                CornerRadius="2,2,2,2" />
                                        <Border x:Name="backgroundBorder"
                                                Grid.Row="0"
                                                Grid.RowSpan="2"
                                                BorderThickness="1,1,1,1"
                                                CornerRadius="2,2,2,2">
                                            <Border.BorderBrush>
                                                <LinearGradientBrush StartPoint="0,1"
                                                                     EndPoint="0,0">
                                                    <GradientStop Offset="0"
                                                                  Color="#FF003366" />
                                                    <GradientStop Offset="1"
                                                                  Color="#FF0099FF" />
                                                </LinearGradientBrush>
                                            </Border.BorderBrush>
                                            <Border.Background>
                                                <RadialGradientBrush>
                                                    <GradientStop Offset="0"
                                                                  Color="#FF0080FF" />
                                                    <GradientStop Offset="0.894"
                                                                  Color="#FF004991" />
                                                    <GradientStop Offset="1"
                                                                  Color="#FF004991" />
                                                </RadialGradientBrush>
                                            </Border.Background>
                                        </Border>
                                        <Border x:Name="OverGlow"
                                                Grid.RowSpan="2"
                                                BorderThickness="1,1,1,1"
                                                CornerRadius="2,2,2,2"
                                                Opacity="0">
                                            <Border.Background>
                                                <RadialGradientBrush>
                                                    <GradientStop Offset="0"
                                                                  Color="#FF00B1FF" />
                                                    <GradientStop Offset="1"
                                                                  Color="#FF0069D1" />
                                                </RadialGradientBrush>
                                            </Border.Background>
                                        </Border>
                                        <Border x:Name="PressedGlow"
                                                Grid.RowSpan="2"
                                                BorderThickness="1,1,1,1"
                                                CornerRadius="2,2,2,2"
                                                Opacity="0">
                                            <Border.Background>
                                                <RadialGradientBrush>
                                                    <RadialGradientBrush.RelativeTransform>
                                                        <TransformGroup>
                                                            <ScaleTransform CenterX="0.5"
                                                                            CenterY="0.5"
                                                                            ScaleX="1"
                                                                            ScaleY="1" />
                                                            <SkewTransform AngleX="0"
                                                                           AngleY="0"
                                                                           CenterX="0.5"
                                                                           CenterY="0.5" />
                                                            <RotateTransform Angle="0"
                                                                             CenterX="0.5"
                                                                             CenterY="0.5" />
                                                            <TranslateTransform X="0"
                                                                                Y="0" />
                                                        </TransformGroup>
                                                    </RadialGradientBrush.RelativeTransform>
                                                    <GradientStop Offset="0"
                                                                  Color="#00FFFFFF" />
                                                    <GradientStop Offset="1"
                                                                  Color="#4C002B5D" />
                                                </RadialGradientBrush>
                                            </Border.Background>
                                        </Border>
                                        <Border x:Name="borderblue"
                                                Grid.RowSpan="2"
                                                Margin="1,1,1,1"
                                                BorderThickness="1,1,1,1"
                                                CornerRadius="2,2,2,2">
                                            <Border.BorderBrush>
                                                <LinearGradientBrush StartPoint="0,1"
                                                                     EndPoint="0,0">
                                                    <GradientStop Offset="0"
                                                                  Color="#FF00B1FF" />
                                                    <GradientStop Offset="1"
                                                                  Color="#7F00B1FF" />
                                                </LinearGradientBrush>
                                            </Border.BorderBrush>
                                        </Border>
                                        <ContentPresenter Grid.RowSpan="2"
                                                          HorizontalAlignment="Center"
                                                          VerticalAlignment="Center"
                                                          Content="{TemplateBinding Content}"
                                                          Foreground="{TemplateBinding Foreground}" />
                                        <Border x:Name="glassBorder"
                                                Margin="1,1,1,0"
                                                CornerRadius="2,2,10,10">
                                            <Border.Background>
                                                <LinearGradientBrush StartPoint="0.5,1"
                                                                     EndPoint="0.5,0">
                                                    <GradientStop Offset="0"
                                                                  Color="#00FFFFFF" />
                                                    <GradientStop Offset="1"
                                                                  Color="#A5FFFFFF" />
                                                </LinearGradientBrush>
                                            </Border.Background>
                                        </Border>
                                    </Grid>
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </vsm:Style>

Re: Silverlight 2 - Here's a Button Template example.

07-15-2008 6:01 AM |

Hi MattDrimo,

Thanks for the template. Thats working fine.

Re: Silverlight 2 - Here's a Button Template example.

09-11-2008 8:55 AM |

For me it gives an error saying VisualStateManager.VisualStateGroups is not found.