Question

I don’t know why I’m having so much trouble doing this, it shouldn’t be hard, but I must be Blend-incompetent. Can someone give me the xaml for an image style where the image is at 60% opacity, on mouseover fades in to 100, mouseout back to 60% and onclick glows for a 0,2 sec.

Or just tell me how to do in blend?

thank you

Solution turned out to be simple enough:

<Style x:Key="FadeImageButton" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="grid" Width="16" Height="16">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.2"/>
                                <VisualTransition GeneratedDuration="0:0:0.2" To="Normal"/>
                                <VisualTransition GeneratedDuration="0:0:0.2" To="MouseOver"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed"/>
                            <VisualState x:Name="Disabled"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused"/>
                            <VisualState x:Name="Unfocused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

You are certainly not incompetent. Images do not have states, so a style is not the answer.

The only styles you can create for images are for one fixed state, so you could add the 60% opacity, but not much else.

Your options are:

• Create EnterImage and LeaveImage
  storyboards that are played with ControlStoryboardAction behaviours (on MouseEnter and MouseLeave events).
• Create a custom behaviour and attach that to the images.
• Place the image in another control that has states (maybe a button)
• Place the image in a user control with an image property
• Create a custom control

The simplest is option 1, but it requires attaching several properties to each image so more drags and clicks to author them.

If you let us know which option you prefer I may be able to post an example.