Sergey Barskiy's Blog

During my Introduction to Silverlight presentation at the Atlanta .NET users group, someone suggested that I show how make a button with rounded corners in Silverlight.  I was a bit short on time, and it was getting late, so I decided to write a blog post on the subject matter instead.  So, here it goes.

Goal – make Silverlight button that has rounded corners using Blend

Step by step how to:

1. Create new Silverlight application
2. Save it
3. Now you should have Page.xaml open in Visual Studio
4. Open the same application in Blend
5. Open Page.xaml
6. Add a button to it.  If Button control is not visible, click on Assets(>>) button, select button
7. Now double-click on button in toolbar to add it to Page.xaml
8. Right-click on the button, select Edit Control Parts (Template), then Edit a Copy.  This way we will retain preloaded template, but will only change small parts of it
9. Type is key for newly create style, such as RoundedButtonStyle
10. Select application for Define In option.  This way you can use this style for any button in application
11. Now, you should have app.xaml open with button control visible
12. Expand everything in Template tree in Objects and Timeline window
13. Click on element called Background, set CornerRadius in Properties window to 10,10,10,10
14. Click on element called BackgroundAnimation, set CornerRadius in Properties window to 10,10,10,10
15. Click on element called BackgroundGradient , set RadiusX and RadiusY in Properties window to 10
16. Click on element called DisabledVisualElement, set RadiusX and RadiusY in Properties window to 10
17. Click on element called FocusVisualElement, set RadiusX and RadiusY in Properties window to 10
18. Save all
19. Flip back to Visual Studio and run the application
20. You can now see your rounded button in action

Your XAML for the button should look something like this:

<Button Content="Button" Margin="5,10,5,0" Style="{StaticResource RoundedButtonStyle}"/>

If you have template set instead, just change the XAML to use the style

All done and easy as pie!

In this little excersize we did not change the look drastically.  To do that instead of choosing edit a copy in step 8, choose Create Empty.  Now you will need to add visual elements yourself.  For a quick and dirty rounded button from scratch, add a rectangle and set Radius X and Y to the values of your liking.  This of course will not give you mouse over effects, disabled and focus effect etc…  You will still need to code those using visual states.  You can see those in Interaction window if you click on a button.  If you do not see the states, you may need to click on little drop down on top of the screen and choose Edit Control Parts –> Edit Template

Please feel free to ask questions if you cannot find a particular option.

I downloaded the CTP of RIA Services for Silverlight along with accompanying documentation this morning.  I have read the documentation and wanted to share a few thoughts on this product.

The product looks very promising to me.  Here is an overview of the key features.  You can configure RIA Services to use ether Linq to SQL or Entity framework as data access layer, which gives you flexibility along with possibility to use services over non-SQL Server databases.  You can quickly generate service class directly off your EF or LTS data model.  This means direct support for RAD application development.  There is no difference in accessing the service from Silverlight client in comparison to plain WCF service.  The RIA Services also support validation via custom attributes.  It has built-in attributes such as required field or minimum / maximum string length attribute.  These attributes are setup on  metadata class that corresponds to the entity class it is designed to validate and enhance.  In addition to pre-built attributes you can create custom validation via custom validation attribute.  You can also share classes between client and server side via shared class (decorated with Shared attribute).  You can also define custom queries on your data context.  You can use the following Linq clauses for querying: where, orderby and skip or take.  You also have support to delete, insert and update operations.  All CRUD operations are supported either via attributes or naming conventions for access methods.  There is also built-in change tracking and ability to revert changes via interfaces: IEditableObject, IChangeTracking, IRevertibleChangeTracking,  IEditableCollection.  There is also support for authorization via custom attributes as well.

One interesting thing to notice is that the code for client side is entirely generated by RIA Services framework.  So, on the client side you do not see any code – it is in hidden classes under the project.  Very nifty trick.

One last note – RIA Services framework seem to implement a lot of the features that CSLA for Silverlight has.  Almost feels like the authors of RIA Services were quite familiar with CSLA for Silverlight

I read a few notes from Mix 09 about Silverlight 3.0.  It has a lot of great new features.  Read for yourself if you would like.  Here is a link to a free short eBook that covers parts of new functionality.

http://download.microsoft.com/download/3/0/5/3055A230-B06F-4A58-AC93-B7CFD2184A70/FirstLookSL3Moroney.pdf

Localizing a Silverlight application is a pretty trivial task if you use resources.  Once you create a resource file you are working with, you can use the code-behind class in XAML and bind to properties from that class that contain localized strings.  First, import the namespace that is used for resx file, typically Application\Resources

xmlns:Localized="clr-namespace:MyApplication.Resources"

Then add an instance of a specific resx code-behind class to resources in your user control

<UserControl.Resources>
    <Localized:SpecificFile x:Name="LocalizedStrings"/>

In this case SpecificFile corresponds to SpecificFile.resx.  Now that this is done, you can bind labels to it

<TextBlock Text="{Binding Path=MyPropertyFromResourceFile}/>

There is one issue though, if you edit resource file again in resources editor, and save it, the constructor scope in code behind is set to internal.  This in turn will cause an exception (AG_E_PARSER_UNKNOWN_TYPE  ) when you try to load this user control.  All you have to do to fix it is edit code behind file for you resource file and change its constructor to public.  Unfortunately, you have to do it every time you edit the file in resources editor.

Blend has a small issue when it comes to editing of column templates for DataGrid.  If you define the template in-line as part of column definition, there is no way to edit that in Blend.  There is an easy workaround however.  You need to define DataTemplate as part of user control’s resources.  Once you open the user control in Blend, you can flip to resources tab and click on that template in order to edit it.