Анимировать высоту элемента управления поверх других элементов управления

Question

У меня есть пользовательский элемент управления (CustomButton.cs), который увеличивается по высоте (и ширине) при наведении на него курсора (снимок экрана 1). В настоящее время, когда элемент управления увеличивается, остальная часть макета уменьшается, чтобы увеличить пространство элемента управления (снимок экрана 2). Мне бы хотелось, чтобы макет оставался статичным, а элемент управления рос над другими элементами управления и перекрывался вместо этого, но я не могу этого сделать.

Я пытался использовать ClipToBounds="False", а также пытался обернуть свой элемент управления в <Canvas>, оба из которых не позволяли моему элементу управления перекрывать другие элементы управления. Я также попытался использовать <Popup>, но не смог определить правильное местоположение, оно продолжало появляться за кадром.

Кто-нибудь знает, как заставить это работать?

Пользовательский элемент управления до наведения (Снимок экрана 1)

Пользовательский контроль при зависании (скриншот 2)

MainWindow.xaml

<Window x:Class="Tests.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:Tests"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Grid Margin="10">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="10"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
    <Border Grid.Row="0" Background="Beige" BorderBrush="Black" BorderThickness="1" ></Border>
    <StackPanel Grid.Row="2" Orientation="Horizontal">
        <local:CustomButton Margin="0,0,10,0">Text1</local:CustomButton>
        <local:CustomButton>Text2</local:CustomButton>
    </StackPanel>
</Grid>

CustomButton.cs

public class CustomButton : Button
{
    static CustomButton()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomButton), new FrameworkPropertyMetadata(typeof(CustomButton)));
    }

    public CustomButton()
    {
        this.Loaded += OnLoaded;
    }

    private void OnLoaded(object sender, RoutedEventArgs e)
    {
        this.Width = this.ActualWidth;
        this.Height = this.ActualHeight;
    }
}

Generic.xaml

<Style TargetType="{x:Type local:CustomButton}">
    <Setter Property="Background" Value="LightBlue"></Setter>
    <Setter Property="BorderBrush" Value="Black"></Setter>
    <Setter Property="BorderThickness" Value="1"></Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:CustomButton}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <TextBlock Text="{TemplateBinding Content}" Padding="5" HorizontalAlignment="Center"></TextBlock>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <!-- Button increase Width/Height animation -->
                                    <DoubleAnimation Storyboard.TargetProperty="Height" By="20" Duration="0:0:0.1" />
                                    <DoubleAnimation Storyboard.TargetProperty="Width" By="50" Duration="0:0:0.1" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <!-- Button decrease Width/Height animation -->
                                    <DoubleAnimation Storyboard.TargetProperty="Height" By="-20" Duration="0:0:0.2" />
                                    <DoubleAnimation Storyboard.TargetProperty="Width" By="-50" Duration="0:0:0.2" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

будет делать что-то вроде:

<Grid Margin="10">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="10"></RowDefinition>
        <RowDefinition Height="50"></RowDefinition>
    </Grid.RowDefinitions>
    <Border Grid.Row="0" Background="Beige" BorderBrush="Black" BorderThickness="1" ></Border>
    <StackPanel Grid.Row="0" Grid.RowSpan="3" Orientation="Horizontal" VerticalAlignment="Bottom" >
        <Local:CustomButton Margin="0,0,10,0">Text1</Button>
        <Local:CustomButton>Text2</Button>
    </StackPanel>
</Grid>

Работа для вас?