从图像制作自定义可拉伸按钮模板答案

【问题标题】：Making a custom stretchable button template from images从图像制作自定义可拉伸按钮模板
【发布时间】：2013-12-24 07:51:22
【问题描述】：

我试图从 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>

谁能帮帮我，如何制作这个按钮模板？

【问题讨论】：

你必须用图像来做吗？你有表情混合吗？
是的.. 是的，我确实有表情混合。

标签： c# wpf button styles

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：