WPF按钮使用内容模板调整大小 [英] WPF button resize using content template

问题描述

我正在尝试创建一个控件，可以在按钮事件的鼠标上执行多个动画。第一个功能是，按钮应采用padding = 2并占据整个列。我无法做到这一点;如果我试图在鼠标悬停时减小按钮的宽度，我可以这样做，但是当我试图增加宽度时，按钮正在扩展但扩展部分不可见。如何实现相同的？



我在控制模板中使用以下代码。请建议更改： -

Hi,

I am trying to create a control that performs several animations on mouse over event of a button. The first functionality is that, the button should take padding=2 and occupy the entire columns. I am not able to do that; if I am trying to decrease the width of the button on mouseover, I am able to do, but when I am trying to increase the width, the button is expanding but the expanded part is not visible. How to implement the same ?

I am using the below code in control template. Please suggest changes :-

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!--Create a control template for button-->
    <ControlTemplate x:Key="buttonAnimate" TargetType="Button">
        <Grid Name="myGrid">
            <Button Name="myButton" Background="{TemplateBinding Background }" Width="{TemplateBinding Width}">
            </Button>
        <Border Name="MyBorder" BorderBrush="Orange" BorderThickness="3" CornerRadius="2"></Border>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="DarkRed" TargetName="MyBorder"/>
                <Setter Property="Width" Value="200" TargetName="myButton"/>
                <Setter Property="Cursor" Value="Hand" TargetName="myGrid"/>
                <Setter Property="Width" Value="300" TargetName="myButton"/>
                <Setter Property="Width" Value="300" TargetName="MyBorder"/>
                <Setter Property="Padding" Value="2" TargetName="myButton"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</ResourceDictionary>

提前致谢。

Thanks in advance.

推荐答案

你好Jashobanta，



我相信这段代码可以帮到你：

Hi Jashobanta,

I believe that this code can help you:

<Style TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate  TargetType="Button">
            <Border x:Name="MyBorder" removed="{TemplateBinding Background}" 

                    Width="{TemplateBinding Width}" BorderBrush="Orange" 

                     BorderThickness="3" CornerRadius="2">
               <Border.RenderTransform>
                  <ScaleTransform x:Name="MyAnimatedScale" ScaleX="1" ScaleY="1"/>
               </Border.RenderTransform>
                  <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
             </Border>
           <ControlTemplate.Triggers>
              <Trigger Property="IsMouseOver" Value="True">
                 <Setter Property="Cursor" Value="Hand" TargetName="MyBorder"/>
                     <Trigger.EnterActions>
                         <BeginStoryboard >
                             <Storyboard>
                                 <DoubleAnimation Storyboard.TargetName="MyAnimatedScale"                                                  

                                   Storyboard.TargetProperty="(ScaleTransform.ScaleX)"

                                     To="3.0" Duration="0:0:01" />
                                  <DoubleAnimation Storyboard.TargetName="MyAnimatedScale"

                                   Storyboard.TargetProperty="(ScaleTransform.ScaleY)"

                                    To="3.0" Duration="0:0:01" />
                                   <ColorAnimation Storyboard.TargetName="MyBorder"  

                                     Storyboard.TargetProperty="BorderBrush.Color" 

                                     From="Orange" 

                                     To="DarkRed"               

                                     Duration="0:0:01" />
                                </Storyboard>
                          </BeginStoryboard>
                       </Trigger.EnterActions>
                       <Trigger.ExitActions>
                           <BeginStoryboard >
                              <Storyboard>
                                  <DoubleAnimation Storyboard.TargetName="MyAnimatedScale"

                                    Storyboard.TargetProperty="(ScaleTransform.ScaleX)"

                                     To="1.0" Duration="0:0:01" />
                                   <DoubleAnimation Storyboard.TargetName="MyAnimatedScale"

                                    Storyboard.TargetProperty="(ScaleTransform.ScaleY)"

                                     To="1.0" Duration="0:0:01" />
                                    <ColorAnimation Storyboard.TargetName="MyBorder"  

                                     Storyboard.TargetProperty="BorderBrush.Color" 

                                     From="DarkRed" 

                                     To="Orange"               

                                      Duration="0:0:01" />
                                </Storyboard>
                             </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这篇关于WPF按钮使用内容模板调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！