在其他控件顶部设置动画控件高度答案

【问题标题】：Animate control height over the top of other controls在其他控件顶部设置动画控件高度
【发布时间】：2018-11-08 15:43:56
【问题描述】：

我有一个自定义控件 (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>

【问题讨论】：

我建议你使用ScaleTransform（RenderTransform 而不是LayoutTranform）而不是摆弄Width 和Height。
@LittleBit 在我的实际应用程序中，我在自定义控件中有一个图标，我的印象是使用ScaleTransform 会改变所有孩子，拉伸我的形象？如果我错了，请纠正我。

标签： c# .net wpf xaml animation

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

为你工作？

【讨论】：

:) 有时只需要第二眼。