从图像制作自定义可伸缩按钮模板

Question

我试图从4张图片制作一个WPF按钮模板：“btnNormal，btnHover，btnPressed和btnDisabled”。

问题是我不知道如何使我的按钮与WPF样式完全相同。所以现在我试图使用这些图像。问题是我希望我的按钮可伸缩，并且在任何尺寸上看起来都一样。要做到这一点，我需要为每个按钮状态图像制作3个切片：“顶部，底部，左侧，右侧，中心”

我现在有这个XAML：

<Application.Resources>
    <ControlTemplate x:Key="StylishBlueButton" TargetType="{x:Type Button}">
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="MouseOver"/>
                        <VisualState x:Name="Pressed"/>
                        <VisualState x:Name="Disabled"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Focused"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="ValidationStates">
                        <VisualState x:Name="InvalidFocused"/>
                        <VisualState x:Name="InvalidUnfocused"/>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Grid>
        </ControlTemplate>

    </Application.Resources>
</Application>

任何人都可以帮助我，我该如何制作这个按钮模板？

Answer 1

您想在VisualState中指定一些内容，例如

<ControlTemplate TargetType="Button">
            <Grid>
              <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">

                <VisualStateGroup.Transitions>
                    <!--Take one half second to transition to the MouseOver state.-->
                    <VisualTransition To="MouseOver" GeneratedDuration="0:0:0.5" />
                  </VisualStateGroup.Transitions>

                  <VisualState x:Name="Normal"/>
                  <VisualState x:Name="MouseOver">
                    <Storyboard>
                      <ColorAnimation Duration="0" Storyboard.TargetName="borderColor" Storyboard.TargetProperty="Color" To="Cyan"/>
                    </Storyboard>
                  </VisualState>
                  <VisualState x:Name="Pressed">
                    <Storyboard>
                      <ColorAnimation Duration="0" Storyboard.TargetName="borderColor" Storyboard.TargetProperty="Color" To="Red"/>
                    </Storyboard>
                  </VisualState>
                </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>
              <Ellipse>
                <Ellipse.Fill>
                  <SolidColorBrush x:Name="borderColor" Color="Black"/>
                </Ellipse.Fill>
              </Ellipse>
              <Ellipse x:Name="ButtonShape" Margin="5" Fill="{TemplateBinding Background}"/>
              <ContentPresenter HorizontalAlignment="Center"
                        VerticalAlignment="Center"/>
            </Grid>
          </ControlTemplate>

Answer 2

 <Border Background="DodgerBlue">
     <Rectangle Fill="Transparent" Stroke="White" Margin="3" />
 </Border>

根据您需要的样式放置路径而不是Rectangle。