Freigeben über

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

  • Artikel

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=”25” and 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

  • Anonymous
    March 23, 2010
    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

  • Anonymous
    April 20, 2010
    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.