WPF：如何在弹出窗口中淡入和缩放用户控件答案

【问题标题】：WPF: How to fade-in and scale a user control in a popupWPF：如何在弹出窗口中淡入和缩放用户控件
【发布时间】：2009-05-14 08:33:29
【问题描述】：

我有一个用户控件，我想在用户单击按钮时显示该控件。这不是问题，使用 af Popup 控件。

但是，我想让用户控制淡入并同时从 0.5 缩放到 1.2 再回到 1.0（X 和 Y）。

我该怎么做？

【问题讨论】：

标签： wpf animation fade scale

【解决方案1】：

WPF 弹出窗口不透明，因此淡入和淡出不会真正起作用。您可以根据需要设置不透明度，但这不会改变任何事情。但是，您可以使用工具提示。它非常接近弹出窗口。无论如何，这里有一些东西可以帮助您入门：

<UserControl x:Class="WpfApplication1.UserControl1"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<UserControl.Style>
    <Style>
        <Style.Triggers>
            <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="00:00:02" From="0" To="1" />
                    </Storyboard>
                </BeginStoryboard>                  
            </EventTrigger>
            <Trigger Property="FrameworkElement.Visibility" Value="Collapsed">
                <Setter Property="FrameworkElement.Opacity" Value="0"/>             
            </Trigger>
        </Style.Triggers>
    </Style>
</UserControl.Style>
<Border x:Name="border" BorderBrush="Blue" BorderThickness="3" CornerRadius="3" Padding="3" Background="Orange"
    Width="175" Height="175">
    <TextBlock Text="Sample" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>

把它放在某个地方，我在同一个按钮上使用了一个工具提示，只是为了演示目的：

<Button Click="OnButtonClick" Content="click to see popup">
        <Button.ToolTip>
            <ToolTip x:Name="popup" IsOpen="False" Background="Transparent" BorderBrush="Transparent" 
                     Placement="Bottom">
                <WpfApplication1:UserControl1/>
            </ToolTip>
        </Button.ToolTip>
    </Button>

对于后面的 OnButtonClick 代码，我只是切换了弹出窗口，以便可以多次单击它：

private void OnButtonClick(object sender, RoutedEventArgs e)
{
    popup.IsOpen = !popup.IsOpen;
}

【讨论】：

【解决方案2】：

WPF弹窗可以处理透明度，只需设置如下

<Popup AllowsTransparency="True" PopupAnimation="Fade">

【讨论】：