CODEWITHSUNDEEP
c#wpfbuttononclick
Milkncookiez
Milkncookiez

Reputation: 7397

Dynamic visual effect onclick of a button

I want to make some very simple visual effect when the button is clicked. I have an image as a background of the button, and, i.e., the image to spin when the button is clicked, or to glow or smth else...

When I was searching for some code examples or some help at all, I would find only stuff about enhancing the visual look of the button in a static way, but not when it is being clicked or smth.

I guess I have to use Triggers together with something else, but I am new in WPF and since I could not really find information, I can't head in some direction of tryouts.

Some simple code example of a dynamic visual effect on a button, when it's clicked, would be greatly appreciated.

That's how one of the buttons looks like:

<Button Name="B_play" Click="B_play_OnClick" Margin="30,10,0,5" Width="63.54" Height="63.782">
                <Button.Content>
                    <Image Source=".../source/to/image.png"/>
                </Button.Content>
            </Button>

Upvotes: 0

Views: 923

Answers (1)

ZSH
ZSH

Reputation: 913

you can use animation and triggers , see: example

or search google for wpf button animations 

 <Style TargetType="{x:Type Button}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation From="1" To="0.8" RepeatBehavior="Forever" AutoReverse="True" Duration="00:00:00.3" Storyboard.TargetProperty="RenderTransform.ScaleX" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation To="1" Duration="00:00:00.4" Storyboard.TargetProperty="RenderTransform.ScaleX" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
        </Style.Triggers>
        <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform CenterX="120" CenterY="30" ScaleX="1" />
            </Setter.Value>
        </Setter>
    </Style>

Upvotes: 1

Related Questions