Wpf - button template

Question

0.00/5 (No votes)

See more:

hi,

I have a lot of button defined like this. The goal is to define a small zoom animation when clicking on the button. I'd like to define a template to reuse the same code one, and just define as parameter . I tried the solution below but I don't know how to manage the image to reuse the code. Can you help please ? I'm beginning in WPF

<Button Name="BTN_L" Margin="475,215,387,0" Padding="5" Background="Transparent" VerticalAlignment="Top" Height="224" Click="BTN_L_Click">
            <Button.Template>
                <ControlTemplate TargetType ="{x:Type Button}">
                    <Grid RenderTransformOrigin="0.5,0.5" x:Name="RootGrid" Margin="1,0,4,4" >
                        <Image Source="pack://application:,,,/myNamespace;component/resources/L.png" Margin="0,0,-5,0"  />
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property ="IsPressed" Value ="True">
                            <Setter TargetName="RootGrid" Property="RenderTransform">
                                <Setter.Value>
                                    <ScaleTransform ScaleX="0.97" ScaleY="0.95"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>
        </Button>

What I have tried:

<UserControl.Resources>
     <Style x:Key="BTN_L" TargetType="Button">
         <Setter Property="Control.Template">
             <Setter.Value>
                 <ControlTemplate TargetType ="{x:Type Button}">
                     <Grid RenderTransformOrigin="0.5,0.5" x:Name="RootGrid" Margin="1,0,4,4" >
                         <Image Source="pack://application:,,,/myNamespace;component/resources/L.png" Margin="0,0,-5,0"  />
                         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                     </Grid>
                     <ControlTemplate.Triggers>
                         <Trigger Property ="IsPressed" Value ="True">
                             <Setter TargetName="RootGrid" Property="RenderTransform">
                                 <Setter.Value>
                                     <ScaleTransform ScaleX="0.97" ScaleY="0.95"/>
                                 </Setter.Value>
                             </Setter>
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
 </UserControl.Resources>

And then in the code :

<Button Style="{StaticResource BTN_L}..."

Posted 11-Jun-18 17:11pm

canard29

Updated 11-Jun-18 22:56pm

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 12270013 · Accepted Answer · 2018-06-11T22:29:00

You can use BitMapImage for reusing images among different sources

In the resources, add Image:

XML

<BitmapImage x:Key="pic1" UriSource="https://cdn.pixabay.com/photo/2016/10/23/06/04/google-1762248_960_720.png" />
<BitmapImage x:Key="pic2" UriSource="https://cdn.pixabay.com/photo/2016/10/23/06/04/google-1762248_960_721.png" />

Using with button like :

 <Button ..>
 <Button.Content>
  <Image Source="{StaticResource pic1}" />
 </Button.Content>
</Button>

Through Codebehind :

C#

Image image = new Image();
image.Source = FindResource("pic1");
OnBtn.Content = image;

George Swan · Accepted Answer · 2018-06-11T22:58:00

I would store your image in a folder named Images in your application and set its Build Action to Resource. You can then add the resource to the Window like this.

C#

<Window.Resources>
      <Image x:Key="Info" Source="Images/Info.png"/>
  </Window.Resources>

Set the Button's content to the Image and use a Storyboard and ScaleTransform to change the size of the button. In this example the button is reduced 0.95% of its size when clicked for a duration of 0.2 seconds.

C#

<Button
      Grid.Column="1" Grid.Row="0"
     Width="100" Height="50"
     Content="{StaticResource Info}" >
        <Button.RenderTransform>
           <ScaleTransform x:Name="ShrinkScaleTransform"
             ScaleX="1" ScaleY="1" CenterX="50" CenterY="25" />
        </Button.RenderTransform>
           <Button.Triggers>
              <EventTrigger RoutedEvent="Button.Click">
                 <BeginStoryboard>
                   <Storyboard>
                     <DoubleAnimation
                        Storyboard.TargetName="ShrinkScaleTransform"
                        Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                        To="0.95" Duration="0:0:0.2" AutoReverse="True"
                      />
                     <DoubleAnimation
                        Storyboard.TargetName="ShrinkScaleTransform"
                        Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                        To="0.95" Duration="0:0:0.2" AutoReverse="True"
                      />
                   </Storyboard>
                 </BeginStoryboard>
              </EventTrigger>
           </Button.Triggers>
   </Button>

Wpf - button template

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0