Silverlight Controls and Silverlight Toolkit

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

rpadma — Thu, 11 Sep 2008 12:55:54 GMT

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

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

RamsZone — Tue, 15 Jul 2008 10:01:11 GMT

Hi MattDrimo,

Thanks for the template. Thats working fine.

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

MattDrimo Xceed — Tue, 15 Jul 2008 00:00:32 GMT

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.

RamsZone — Mon, 14 Jul 2008 06:30:52 GMT

Thankyou.

Rams.

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

MattDrimo Xceed — Sat, 12 Jul 2008 17:38:29 GMT

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.

RamsZone — Fri, 11 Jul 2008 16:15:59 GMT

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.

boardz — Mon, 19 May 2008 11:19:56 GMT

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

thanks very much

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

Lyynx — Mon, 19 May 2008 06:24:49 GMT

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.

Lyynx — Mon, 19 May 2008 05:16:59 GMT

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: Re: Silverlight 2 - Here's a Button Template example.

Pablo Panedas — Wed, 07 May 2008 16:53:32 GMT

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: Re: Silverlight 2 - Here's a Button Template example.

LeChixfre — Thu, 27 Mar 2008 14:28:50 GMT

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: Re: Silverlight 2 - Here's a Button Template example.

geordiejenner — Thu, 27 Mar 2008 12:32:14 GMT

sorry, not seeing it. please show sample code

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

desopedr — Thu, 27 Mar 2008 02:26:05 GMT

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: Silverlight 2 - Here's a Button Template example.

LeChixfre — Wed, 26 Mar 2008 16:50:03 GMT

Hi,

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

<ResourceDictionary Source="StylesDictionary.xaml"/>

I have to check it out tomorrow.I remember I had the same problem when I started.

I don't know if it's precisely what you want to do, but when I began to search a way to apply a style for a control from the code-behind, I would be able to use different type of buttons in the same application, and be able to apply one or another directly from the C# code.

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

desopedr — Wed, 26 Mar 2008 16:18:57 GMT

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

<ResourceDictionary Source="StylesDictionary.xaml"/>

How can it works for you ?