Changing Templates with the Silverlight Designer (and seeing the changes immediately)


Lately I’ve been writing some topics on using the Silverlight designer in Visual Studio 2010 RC to build SL4 apps. One of the features of the designer that I find super cool is the ability to make changes to a control template, and provided you are using that control in your application, see the changes in the template reflected on the design surface right away. For example, I have the following XAML, which contains a style and template for a button, and my page contains a button:


<Grid x:Name=”LayoutRoot” Background=”White”>
    <Grid.Resources>
        <!–Define a template that creates a gradient-colored button.–>
        <Style TargetType=”Button”>
            <Setter Property=”Template”>
                <Setter.Value>
                    <ControlTemplate TargetType=”Button”>
                        <Border  x:Name=”Border”
                            CornerRadius=”5″ BorderThickness=”1″  BorderBrush=”Black”>
                            <Border.Background>
                                <LinearGradientBrush StartPoint=”0,0.9″ EndPoint=”1,0.4″>
                                    <GradientStop
                                        Color=”{Binding Background.Color,
                                        RelativeSource={RelativeSource TemplatedParent}}” Offset=”0.0″ />
                                    <GradientStop Color=”Gold” Offset=”0.9″ />
                                </LinearGradientBrush>
                            </Border.Background>
                            <ContentPresenter Margin=”2″  HorizontalAlignment=”Center” VerticalAlignment=”Center” />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>
    <Button Name=”gradientButton” Background=”Green”>Click Me!</Button>
</Grid>


Here’s how my app looks like on the design surface:


(It’s one giant gradient button, which is not terribly realistic, but will help illustrate the feature.)



image


As I make changes in the template the design surface reflects these changes. In this example, I change the CornerRadius, BorderThickness, and BorderBrush of the button border, and the design surface updates as soon as I complete the changes. Let me illustrate…


I set: CornerRadius=”25and get:



image


then BorderThickness=”5 and get:


        image



and finally BorderBrush=”Green and get this result:


       image


I didn’t need to compile and run to see my changes. How awesome is that?


If you want to play with Silverlight 4 and Visual Studio 2010 yourself, go to Silverlight.net to get links to all the tools.


–Cheryl

Comments (2)

  1. Microsoft values your opinion about our products and documentation. In addition to your general feedback, it’s very helpful for us to understand:

    •  How the documentation helped you complete your work

    •  What is missing from the documentation that would be helpful to you

    Cheryl Simmons

    Silverlight Documentation Team

  2. Isaac.Eckert says:

    This is cool but why is designer support for control templates not available?  There are no color pickers, brush editors or anything.  At least bring in the default template or something.

    If you say I have to use Expression Blend 4 then tell me why I can’t purchase Blend without having to buying the most expensive Expression Studio along with it.  Why do I need to dish out more money for tools I don’t need.  I don’t see Expression Design or Expression Web on the list of required tools @ http://www.silverlight.net/getstarted/ but I have to buy them.