Wpf - 按钮模板 [英] Wpf - button template

问题描述

我有很多像这样定义的按钮。目标是在单击按钮时定义小缩放动画。我想定义一个模板来重用相同的代码，然后定义为参数。我尝试了下面的解决方案，但我不知道如何管理图像以重用代码。你能帮帮忙吗？我开始在WPF

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}..."

推荐答案

您可以使用 BitMapImage ，用于在不同来源之间重复使用图像



In资源，添加图片：

You can use BitMapImage for reusing images among different sources

In the resources, add Image:

<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>

通过Codebehind：

Through Codebehind :

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

我会将您的图像存储在应用程序中名为Images的文件夹中，并将其Build Action设置为Resource。然后，您可以像这样将资源添加到窗口。

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.

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

将Button的内容设置为Image并使用 Storyboard 和 ScaleTransform 更改按钮的大小。在这个例子中，当点击持续0.2秒时按钮缩小了0.95％。

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.

<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 - 按钮模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！