Using Raster Images in Silverlight for buttons - silverlight

Question

I have buttons supplied to me from photoshop for different button states.
It looks like this
<Button x:Name="ResultsBtn" Click="ResultsBtn_Click" FontSize="27" BorderThickness="0" Padding="-10" Margin="-10">
<Grid>
<Image Source="..But_01_Idle.png" Width="496"/>
<TextBlock Text="Results" Margin="174,21,172,23" Width="90" Height="40" Foreground="White" />
</Grid>
</Button>
The button looks right for just one state.
I want to use expression blend to record a state and change the background behind an image (in this instance an outer glow) or change the source on a state change.
I've noticed that blend only seems to record position and transforms and not changes in attributes.
Should I be doing this in code or rather have the photoshop file sent in a particular format so that it can be automatically converted by blend

Answer 1

Okay, I'm actually quite surprised at Blend: it does not seem to allow you to animate the source property. However, Silverlight allows it so I assume WP7 will also allow it; this looks like a bug in Blend 4. However, I still would not recommend it using an image based approach because the images will deform and look bad/pixelated when significantly scaled up or down. A better approach is to edit your button's control template and modify it to match your reference artwork. You can even using File -> Import Adobe Photoshop File ... to pull the basic artwork into Blend. Then it's just a matter of shuffling it into the control template.
If you're dead set on using images (which will increase the size of your XAP and actually cause slower load UserControl load times), you can go about it as follows in Blend:
Create a new project and add a Button to your root visual element.
Create a new project folder called Images and add two images to it. (I used Koala.jpg and Penguins.jpg from the Sample Pictures folder.)
Right click the button and select Edit Template -> Edit a Copy...
The default template will contain a Grid that contains a Border named Background. Inside the Background border is a Grid that contains a Rectangle and another Border. Delete both of those innermost elements.
Now add an Image as a child of the Background border's Grid.
Now switch to the XAML editor and modify your control template's visual state groups to match the following code. (Look for the two "Added" comment blocks.)
Run the project. On mouse over you'll see penguins. Click and hold the left mouse and you'll see a koala.
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<!-- Added -->
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TheImage" Storyboard.TargetProperty="Source">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="/Images/Penguins.jpg"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<!-- End of Added -->
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0" To="#FF6DBDD1" Storyboard.TargetProperty="(Border.Background).**(SolidColorBrush.Color)" Storyboard.TargetName="Background"/>
<!-- Added -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TheImage" Storyboard.TargetProperty="Source">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="/Images/Koala.jpg"/>
</ObjectAnimationUsingKeyFrames>**
<!-- End of Added -->
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="3">
<Grid Background="{TemplateBinding Background}" Margin="1">
<Image x:Name="TheImage" Source=""/>
</Grid>
</Border>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="3" RadiusX="3"/>
<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF6DBDD1" StrokeThickness="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>

Answer 2

Visual States are built with animations, so you can only change things that can be animated (and expect typical results). I've never tried it, but my instinct tells me an Image source cannot be animated so the VSM is probably not a viable way to manage that.
Opacity, however, can be animated, so you could have both Image's in ytour button and control their Opacity with States. Just a thought.

Answer 3

You have to create a ControlTemplate:
Code for Button:
<Button Template={DynamicResource ButtonTemplate}/>
In your Resource Dictionary:
<ControlTemplate x:Key="ButtonTemplate" {x:Type Button}>
<Grid Padding="-10" Margin="-10">
<Image x:Name="IdleState" Source="..But_01_Idle.png" Width="496"/>
<Image x:Name="MouseOverState" Source="..But_01_MouseOver.png" Width="496"/>
<Image x:Name="PressedState..." etc/>
<TextBlock Text="Results" Margin="174,21,172,23" Width="90" Height="40" Foreground="White" FontSize="27"/>
</Grid>
</ControlTemplate>
Then, in Blend, Edit the Template and you'll find the States as Mike said. Use the Properties panel to hide / show your images for each state you want to style and you should be done.