I’m in Las Vegas this week at the DevConnections conference (I know….rough…but someone had to do it). I just wrapped up the Silverlight 2 development workshop and promised that I’d post the code samples (see the link below). Thanks to everyone that attended….I had a lot of fun and met a lot of great people building (or starting to build) Silverlight 2 applications.
Silverlight 2 Code Samples
If you missed the workshop but are interested in Silverlight 2 development come visit me in Phoenix at Interface Technical Training. We just started offering Silverlight 2 programming classes with the first one running in December.
Posted by dwahlin | 
Tue, 11 Nov 2008 00:43:00 GMT | 
Comments (10)
Silverlight 2 allows styles to be defined to prevent duplication of attributes across controls in a XAML file. In a previous post I demonstrated how styles could be defined and used. As a review, here's an example of defining a style named ButtonStyle that targets a Button control:
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="FontFamily" Value="Arial" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="25" />
<Setter Property="Margin" Value="5,10,0,10" />
</Style>
The style can be applied to one or more buttons using the following StaticResource syntax:
<Button x:Name="btnSubmit" Style="{StaticResource ButtonStyle}" />
<Button x:Name="btnCancel" Style="{StaticResource ButtonStyle}" />
In addition to defining control property values, styles can also be used to define control templates. This is useful any time you'd like to customize a control and make it look and feel different than it looks out of the box. In this post you'll see how a standard rectangular Button control can be made into a rounded button. Here’s an example of what the standard Silverlight 2 Button control looks like:
By using control templates you can do virtually anything you'd like to a control. Here’s an example of a Button that has a custom style and control template defined to give it a flat look with rounded corners:
Control templates can be defined within a control's Resources section, within a UserControl's Resources section, or within the Application.Resources section of App.xaml. Defining a template in App.xaml is recommended anytime you'd like to re-use a template across multiple controls in an application. Here's an example of a style named ButtonFlatStyle that defines a custom control template for a Button:
<Style x:Key="ButtonFlatStyle" TargetType="Button">
<Setter Property="Width" Value="100" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
Background="{TemplateBinding Background}"
CornerRadius="8" BorderBrush="Black" BorderThickness="1">
<ContentPresenter Content="{TemplateBinding Content}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Looking through the ButtonFlatStyle style you'll see that it first defines a width of 100. It then defines a Template property with an associated value. Although this is a very simple example of a control template, you can see that a template is nothing more than a way to define custom control rendering. More complex templates may use many more controls, styles, bindings and even include animations using Silverlight's Visual State Manager (a topic that I'll save for a later article).
Control templates are defined using the ControlTemplate element which acts as a container for template controls and defines the target control type of the template by using the TargetType attribute. This example targets a Button control. The ControlTemplate element shown here includes a Border child element which is used to generate rounded corners using the CornerRadius property.
Notice that a special TemplateBinding syntax appears within several of the Border element's attribute values. What's a TemplateBinding and why would you use it? It's nothing more than a way to allow control properties defined by a developer to be used in the control template. In other words, if a developer defines a Button control that uses the ButtonFlatStyle style, any Width, Height or Background values that they set on the control will automatically be used within the template. This allows the control template to take developer customizations into account.
Within the Border control you'll see a ContentPresenter XAML element. This element marks where the control's content (such as a Button's Content attribute value) will be placed within the template. It literally handles "presenting" the content within the template. The Content="{TemplateBinding Content}" attribute binds the target control's Content property to the ContentPresenter's Content property. To clarify this more, consider the following XAML code:
<Button x:Name="btnClear" Content="Clear"
Background="LightGray" Style="{StaticResource ButtonFlatStyle}" />
The ContentPresenter element defined within the template will render the text "Clear" within the control template's Border element. If a control's Content property defines more complex content it would also be applied using the ContentPresenter. Here's an example of defining complex content within a Button control:
<Button x:Name="btnClear2" Click="btnSubmit_Click" Background="LightGray"
Style="{StaticResource ButtonFlatStyle}">
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="/red_x_mark.jpg" Width="20" Height="19"
VerticalAlignment="Center" />
<TextBlock Margin="5" Text="Clear" Foreground="Navy"
VerticalAlignment="Center" />
</StackPanel>
</Button.Content>
</Button>
In this example the content consists of additional controls rather than only basic text. Here’s an example of how the custom content would be rendered by the control template:
Control templates allow you to take over the look and feel of a control and customize how it's rendered in a Silverlight 2 application. By defining control templates within styles you can easily re-use a template across multiple controls.
Posted by dwahlin | Mon, 03 Nov 2008 03:08:00 GMT | Comments (6)
Back in the early days when Silverlight still had the WPF/e code name I put together a sample application that showed how to access album data from Amazon.com to display a 3D carousel. When Silverlight 1 was released I upgraded it which was straightforward since JavaScript was used for just about everything anyway. I’ve had a Silverlight 2 version available for a few months now but had to wait until the official release to make it available (and had some other priorities :-)). The upgrade was quite a bit more involved this time around since I had to convert all of the JavaScript to C#. It still went really smoothly although I’m certain that many improvements can be made.
In addition to updating all of the code I also had to deal with issues accessing the Amazon.com data. Silverlight 2 requires that remote sites have a cross-domain policy file at their root (a good thing that Flash applications have to deal with as well). Amazon.com’s server has a crossdomain.xml file that works fine for REST calls but doesn’t currently have a compatible file that works for SOAP calls (that may certainly change in the future). I ended up adding two data access classes into the Silverlight 2 project to deal with SOAP calls not working.
The first class accesses the data using a standard Web Service proxy object and SOAP. As mentioned, this class doesn’t currently work due to the cross-domain issues mentioned. The second class calls Amazon’s REST API and parses the XML data that’s returned using LINQ to XML. Both of the classes implement an interface named IAmazonSearcher so that either one can be injected into the application quickly and easily. If a SOAP-compatible cross-domain file is added to Amazon.com’s server in the future then the SOAP-capable class should work as well.
The application doesn’t look much different from the original version released a few years ago, but it does use all native Silverlight 2 controls as opposed to using HTML objects mixed with Silverlight objects. Here’s what the new version looks like:
Those interested in the code can download it here. I’m planning to put together some more detailed write-ups (or videos) about the application. If you have a preference on written versus video let me know.
Posted by dwahlin | Fri, 31 Oct 2008 05:52:43 GMT | Comments (5)