是否有可能移动一个按钮内的两个内容控件，并调整这个按钮的大小？XAML，在动画中移动两个contentcontrol内的按钮
<Button Height="100" Width="100">
<Grid>
<Grid.RowDefinitions>
<RowDefinition height="30"/>
<RowDefinition height="30"/>
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="img.jpg"/>
<TextBlock Grid.Row="1" Text="Some content"/>
</Grid>
</Button>
我想垂直对齐他们水平而不是在鼠标悬停和调整100按钮50，这可能吗？
这可以用风格来实现：
<Style x:Key="ExampleButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="LightGray"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Height" Value="100"/>
<Setter Property="Width" Value="100"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<UniformGrid x:Name="uGrid">
<Image Source="img.jpg" />
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</UniformGrid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="false">
<Setter TargetName="uGrid" Property="Rows" Value="2" />
<Setter TargetName="uGrid" Property="Columns" Value="1" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="uGrid" Property="Columns" Value="2" />
<Setter TargetName="uGrid" Property="Rows" Value="1" />
<Setter Property="Height" Value="50" />
<Setter Property="Width" Value="50" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
这种风格定义了一个修改过的模板为您的按钮，并可以利用触发器来响应鼠标事件。
的风格添加到您的按钮，请执行下列操作：
<Grid>
<Grid.Resources>
<!-- Put Style Here -->
</Grid.Resources>
<Button Style="{DynamicResource ExampleButtonStyle}">
<TextBlock Grid.Row="1" Text="Some content"/>
</Button>
</Grid>
你如何分配的样式和控件实例之间的代码是由你。您可能希望保持模块化和可重用性。
解剖样式
，如果你以前没有探索的风格，他们可以是一个有点令人生畏和冗长。我已经解释了下面提供的风格的组件。
您可以通过声明样式来开始新的样式。在这里，你必须提名一个目标类型（您想应用的样式是什么）和密钥（样式资源的名称：
二传手被用于制作风格<Style x:Key="ExampleButtonStyle" TargetType="{x:Type Button}">
<!-- Style content goes here. -->
</Style>
应用价值为目标控件的属性例如：。
<Setter Property="Background" Value="LightGray"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Height" Value="100"/>
<Setter Property="Width" Value="100"/>
因为要更改按钮的布局，你会想提名控件模板要做到这一点，用二传手设定按钮的Template属性这里的模板可以包含您想要的任何布局。ContentPresenter用于显示您的实现中Button标签的主体：
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<UniformGrid x:Name="uGrid">
<Image Source="img.jpg" />
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</UniformGrid>
</Border>
<ControlTemplate.Triggers>
<!-- Triggers here -->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
最后，您需要添加触发器以使控件模板更新与交互。触发器基本上观察控件的属性，并在其值与触发器指定的值相匹配时应用。这将使用内部的setter更新控件。
<Trigger Property="IsMouseOver" Value="false">
<Setter TargetName="uGrid" Property="Rows" Value="2" />
<Setter TargetName="uGrid" Property="Columns" Value="1" />
</Trigger>
布局
为了实现我用UniformGrid布局的目标。 UniformGrid将自身分成相等的单元格以匹配内部的内容项目数量。请注意，这在WPF中可用，但不能在UWP中使用。在UniformGrid上，您可以设置“列”或“行数”，并根据需要对网格进行补偿。在上面的样式中，我改变了提名的行数和列数，并让网格相应地调整自己的布局。这从视觉上将内容从行切换到列。
参与讨论
有可能做到这一点更优雅等方法，但样式提供了大量的灵活性，并且具有更小的学习曲线。
你说你想将按钮尺寸从100更改为50（我假设在两个轴上？），我必须告诉你不要这样做。你会看到当你应用提供的风格时会发生什么;该按钮以100x100平方开始。用户将鼠标移动到按钮上方，直到按钮的边缘内。该按钮从50x50迅速变为100x100，直到鼠标完全移动到中心或关闭按钮。这提供了一个糟糕和令人困惑的用户体验，值得更多思考。
这可能是晚了，但根据什么都在评论中有人说，这可能做的伎俩，我对类似工作最近
<Style x:Key="btnSubMenu" TargetType="{x:Type Button}">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="FontWeight" Value="ExtraBold"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<Grid x:Name="uGrid2">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="/Images/1.png" />
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Grid Grid.Row="2" Name="Gbexample" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Style="{DynamicResource btnSubSubMenu}" Content="{DynamicResource strCity}" Name="btnCity"/>
<Button Grid.Row="1" Style="{DynamicResource btnSubSubMenu}" Content="{DynamicResource strCountry}" Name="btnCountry"/>
<Button Grid.Row="2" Style="{DynamicResource btnSubSubMenu}" Content="{DynamicResource strStore}" Name="btnStoreIn"/>
<Button Grid.Row="3" Style="{DynamicResource btnSubSubMenu}" Content="{DynamicResource strLocation}" Name="btnLocation"/>
</Grid>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="false">
<Setter TargetName="Gbproduct" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Gbproduct" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
暂时没有评论！嗯，我不知道如何谢谢，这是太多了...谢谢你无限 –
聚苯乙烯：关于按钮的大小，这是一个很好的观点，我会看到如果它不会给用户带来麻烦，但我不得不说我只是改变高度而不是宽度，它是某种滑动菜单，一旦高度为50，拼接网格将在空闲时增加50 ...可能会令人困惑^^“ –
没问题。它可能是更容易将这种折叠行为放到按钮中，因此同样的触发器可以“解开它”，如果它在按钮中，你可以避免快速变化的问题，尽管用网格很容易想到事情，你可能会发现它更容易更改其他属性来模拟相同的行为，例如边距和填充，例如，在某个东西下面显示一个网格，可能类似于在下面添加一个边距。随着XAML的增长，像这样的东西可以使阅读起来不那么让人困惑。IE网格是用于布局的，而不是广告临时定位。 – Gui