对其他控件上方的控件高度进行动画处理

Question

I have a custom control ( CustomButton.cs ) that grows in height (and width) when you hover over it (Screenshot 1). Currently when the control grows, the rest of the layout shrinks to give the control space to grow (Screenshot 2). I would like the layout to remain static and the control to grow over the other controls and overlap instead but I am unable to accomplish this.

I have tried using ClipToBounds="False" and also tried to wrap my control in a <Canvas> both of which did not allow my control to overlap the other controls. I also attempted to use a <Popup> but couldn't get the location correct, it kept appearing off-screen.

Does anyone know how to get this working?

Custom control before hover (Screenshot 1)

Custom control while hovering (Screenshot 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

Would doing something like:

<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>

Work for you?