鼠标悬停时的 XAML 可扩展按钮/菜单项

Question

我对 XAML 非常陌生，我正在尝试模仿以下 => 菜单 example menu（我说的是 google、facebook 等的菜单项）

预期行为：

1. Hoover 在按钮下方

1. 应该看起来像：

我的代码只给了我：

如何实现预期的输出 - 让我的 TextBlock 出现并成为按钮的一部分？

我的第一种方法是使用网格并创建两列，第二列始终隐藏并仅在 hoover 上显示。然后我想出了下面的按钮方法，最后我发现了 Expander 类......不确定什么是正确的方法，下面是我到目前为止的方法，显然与预期的输出相去甚远。

<Button Name="button1" Width="170" Height="170" Cursor="Hand">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
    <Image Width="48" Height="48"  Source="https://pbs.twimg.com/profile_images/638750728354430976/HnTYCHzN_400x400.png" />
    <TextBlock Visibility="Hidden" Width="100" Height="70" VerticalAlignment="Center" HorizontalAlignment="Center" Background="pink">
        MenuItem1
        <TextBlock.Style>
            <Style TargetType="TextBlock">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsMouseOver, ElementName=button1}" Value="True">
                    <Setter Property="Visibility" Value="Visible" />
                </DataTrigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
    </TextBlock>
</StackPanel>
<Button.Style>
    <Style TargetType="Button">
        <Setter Property="Background" Value="Green"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Red"/>
                <Setter Property="Margin" Value="20,0,0,0" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Button.Style>

Answer 1

您可以使用动画来实现这一点。下面是 Button 的模板，它使用动画在 MouseEnter 和 MouseLeave 事件上提供滑入和滑出效果

   <Button Name="button1"   Cursor="Hand">
        <Button.Template>
            <ControlTemplate>
                <Grid VerticalAlignment="Center" HorizontalAlignment="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Image Width="48" Height="48"  Source="https://pbs.twimg.com/profile_images/638750728354430976/HnTYCHzN_400x400.png" />
                    <TextBlock Grid.Column="1" x:Name="myTextBlock" Width="0" Height="48" VerticalAlignment="Center" HorizontalAlignment="Left" Background="pink">
    MenuItem1

                    </TextBlock>
                    <TextBlock Grid.Column="1" Visibility="Hidden"  Width="100" Height="48" x:Name="dummyBlock" />
                </Grid>
                <ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="MouseEnter">
                        <BeginStoryboard>
                            <Storyboard >
                                <DoubleAnimation 
                                    Storyboard.TargetName="myTextBlock" 
                                    Storyboard.TargetProperty="Width" 
                                    From="0.0" 
                                    To="100"
                                    Duration="0:0:0.5" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="MouseLeave">
                        <BeginStoryboard>
                            <Storyboard >
                                <DoubleAnimation 
                                    Storyboard.TargetName="myTextBlock" 
                                    Storyboard.TargetProperty="Width" 
                                    From="100.0" 
                                    To="0"
                                    Duration="0:0:0.3" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Button.Template>
    </Button>

Answer 2

这是实现您的要求的公平开始：

1.Style 使用渲染变换来拉伸你的按钮。

2.按钮内容根据绑定的布尔值变化

<UserControl ...>
    <UserControl.Resources>

        <!--*********** Templates ***********-->
        <ControlTemplate x:Key="VIEWALLTemplate">

        </ControlTemplate>
        <ControlTemplate x:Key="DefultTemplate">
            <StackPanel Background="White" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
                <Image Width="48" Height="48"  Source="https://pbs.twimg.com/profile_images/638750728354430976/HnTYCHzN_400x400.png" />
                <TextBlock Text="MenuItem1" Visibility="Hidden" Width="100" Height="70" VerticalAlignment="Center" HorizontalAlignment="Center" Background="pink"/>
            </StackPanel>
        </ControlTemplate>

        <!--*********** Styles ***********-->
        <Style TargetType="Button">
            <Setter Property="Background" Value="Green"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <ScaleTransform ScaleX="2" ScaleY="1"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

    </UserControl.Resources>

        <Grid>
            <Button Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center">
                <Button.Content>
                    <ContentControl DataContext="{Binding}" Grid.Row="1">
                        <ContentControl.Style>
                            <Style TargetType="ContentControl">
                                <Setter Property="Template" Value="{StaticResource DefultTemplate}" />
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Path=SomeBool}" Value="true">
                                        <Setter Property="Template" Value="{StaticResource VIEWALLTemplate}" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </ContentControl.Style>
                    </ContentControl>
                </Button.Content>
            </Button>   
        </Grid>
</UserControl>