By John at November 02, 2009 15:57
Filed Under: Techy
I would encourage everyone who works with Silverlight to take a good hard look at Behaviors. A Behavior is basically some code-behind logic that operates on Silverlight UI elements, bundled into a nice little package that can be in Xaml. Behaviors can support parameters as well, making them both flexible and extensible. In Expression Blend 3, several behaviors are provided out-of-the-box. There is a drag/drop behavior, and a behavior that allows you to control storyboard animations based on events, just to name a couple.
Below is a Silverlight example of a Rectangle that uses these two behaviors. When the mouse enters the rectangle, it will alternate colors between red and yellow. You can also drag the rectangle around. Check it out…
And here is the Xaml representation of the above Silverlight application:
- <UserControl
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
- xmlns:im="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions"
- xmlns:il="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions"
- x:Class="BehaviorsDemo.MainPage"
- Width="640" Height="480">
- <UserControl.Resources>
- <Storyboard x:Name="BlueToYellow" AutoReverse="True" RepeatBehavior="Forever">
- <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectDemo" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
- <EasingColorKeyFrame KeyTime="00:00:01" Value="#FFFEFF00"/>
- </ColorAnimationUsingKeyFrames>
- </Storyboard>
- </UserControl.Resources>
- <Canvas x:Name="LayoutRoot" Background="White">
- <Rectangle x:Name="rectDemo" Fill="#FF000BFF" Height="51" Width="58" Canvas.Left="202" Canvas.Top="116">
- <i:Interaction.Triggers>
- <i:EventTrigger EventName="MouseEnter">
- <im:ControlStoryboardAction Storyboard="{StaticResource BlueToYellow}"/>
- </i:EventTrigger>
- <i:EventTrigger EventName="MouseLeave">
- <im:ControlStoryboardAction Storyboard="{StaticResource BlueToYellow}" ControlStoryboardOption="Stop"/>
- </i:EventTrigger>
- </i:Interaction.Triggers>
- <i:Interaction.Behaviors>
- <il:MouseDragElementBehavior />
- </i:Interaction.Behaviors>
- </Rectangle>
- </Canvas>
- </UserControl>
As you can see this is about 30 lines of Xaml that I was able to produce with simple point and click in Expression Blend. Notice the elements that start with <i:…/> These are the behaviors that control the storyboard and mouse drag.
The beauty of Behaviors is that they are so easy to use and are highly reusable. They can also be quite powerful when combined together to create complex user interactions.
By John at October 03, 2009 23:33
Filed Under: Techy
I question came up over at silverlight.net that I wrote an example for. The scenario is that we want to bind our RIA Service data context to a DataGrid control via a DomainDataSource. We also want to have an extra column which computes a value based on other data that exists in each row.
My approach to this scenario is to utilize the code sharing feature of RIA Services to pass across a property which computes the value on client-side. As you will see, the DataGrid and DomainDataSource accommodate this approach rather nicely.
We’re going to keep things simple on the server-side for this example and not associate our Domain Service to any entities in a database. So add a new DomainService called “DemoService” but don’t associate it with any data.
Ok now that we have a Domain Service, lets create an entity object to work with in a class file called “Person.cs”:
- using System.ComponentModel.DataAnnotations;
- namespace RIAServicesSharedCodeExample.Web
- {
- public partial class Person
- {
- [Key]
- public string Name { get; set; }
- [Required]
- public int Age { get; set; }
- }
- }
More...
By John at September 12, 2009 15:14
Filed Under: Techy
A common situation I run into is the need to access some element within a DataTemplate. Silverlight isn't able to auto-generate strongly typed references to these elements in code behind. In other words, adding the "x:Name=myElementName" property to the element doesn't matter from a code-behind standpoint. However, we can use the x:Name in a different way to access our element at the right moment. Enter: Element-To-Element databinding. I think many of us know how to bind to property of another element, but it is also possible to bind to the element itself.
The scenario:
More...
By John at September 12, 2009 15:03
Filed Under: Techy
Someone on Silverlight.net was having trouble with this one so I worked up an example. Here’s the Xaml:
- <UserControl xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" x:Class="GridsplitterInTabItem.MainPage"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
- mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
- <Grid x:Name="LayoutRoot">
- <controls:TabControl>
- <controls:TabItem Header="Tab 1">
- <Grid>
- <Grid.ColumnDefinitions>
- <ColumnDefinition Width="*"></ColumnDefinition>
- <ColumnDefinition Width="*"></ColumnDefinition>
- </Grid.ColumnDefinitions>
- <Grid Background="Red"></Grid>
- <Grid Background="Blue" Grid.Column="1"></Grid>
- <controls:GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Left"></controls:GridSplitter>
- </Grid>
- </controls:TabItem>
- <controls:TabItem Header="Tab 2"></controls:TabItem>
- </controls:TabControl>
- </Grid>
- </UserControl>
Here’s the working version of it: