0

Hey folks

I've finally figured out how in WPF to template all my buttons so they all behave they way I want. Basically, I want all my buttons, when clicked, to drop down and to the right a few pixels then pop back up.

The problem is, I can't set the image on the buttons. I created this in Blend, but I can only seem to set the image inside Blend causing all the buttons to have the same image.

<Application x:Class="Application"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="Splash.xaml">
    <Application.Resources>
        <!-- Resources scoped at the Application level should be defined here. -->
        <Style TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="WhenClicked">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="2"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="rectangle">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="2"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <Grid>
                            <Rectangle x:Name="rectangle" RenderTransformOrigin="0.5,0.5">
                                <Rectangle.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform/>
                                        <TranslateTransform X="1" Y="1"/>
                                    </TransformGroup>
                                </Rectangle.RenderTransform>
                            </Rectangle>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <EventTrigger RoutedEvent="Mouse.MouseDown" SourceName="rectangle">
                                <BeginStoryboard Storyboard="{StaticResource WhenClicked}"/>
                            </EventTrigger>
                            <Trigger Property="IsFocused" Value="True"/>
                            <Trigger Property="IsDefaulted" Value="True"/>
                            <Trigger Property="IsMouseOver" Value="True"/>
                            <Trigger Property="IsEnabled" Value="False"/>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>

This is my Application.XML which changes all the buttons to a rectangle. The click events work great, but when I'm in the VS designer I cant set the image. Any hints?

1
Contributor
1
Reply
11
Views
4 Years
Discussion Span
Last Post by ZeroZen
0

The best part about finally giving up and asking after days of trying is you figure it out right away.

<Application x:Class="Application"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <!-- Resources scoped at the Application level should be defined here. -->
        <Style TargetType="{x:Type Button}">
            <Style.Resources>
                <Storyboard x:Key="OnClick1">
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="{x:Null}">
                        <EasingDoubleKeyFrame KeyTime="0" Value="2"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="{x:Null}">
                        <EasingDoubleKeyFrame KeyTime="0" Value="2"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </Style.Resources>
            <Style.Triggers>
                <EventTrigger RoutedEvent="ButtonBase.Click">
                    <BeginStoryboard Storyboard="{StaticResource OnClick1}"/>
                </EventTrigger>
            </Style.Triggers>
            <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.