Using Raster Images in Silverlight for buttons

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

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.