在加载 WPF 时使边框纵向扩展

Question

对于我的生活，我无法弄清楚为什么下面的简单设置不起作用。 我只想在加载边框后放大（"放大"），放大功能以资源样式包装。 但是，当以下 XAML 运行时，边框仅以 100% 比例加载，不会发生动画。 您的帮助将不胜感激！

    <Style x:Key="SZoomIn" TargetType="FrameworkElement">
        <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform/>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)">
                            <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)">
                            <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>            
    </Style>
    <Style x:Key="SBorder" BasedOn="{StaticResource SZoomIn}" TargetType="Border">
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
    </Style>
    <!-- ....... -->
    <Border Style="{StaticResource SBorder}"/>

编辑：我没有在上面显示完整的标记，以便事情可以保持简单，但我的完整标记如下。 请注意，由于边框内有按钮，因此边框在运行时确实具有高度/宽度。

<Window x:Name="StartWindow" x:Class="MEACruncher.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:MEACruncher"
    mc:Ignorable="d"
    Title="MEA Cruncher" Height="393" Width="659" Margin="0" WindowState="Maximized">
<Window.Background>
    <ImageBrush ImageSource="Resources/NeuronBackground.jpg" Stretch="UniformToFill"/>
</Window.Background>
<Window.Resources>
    <SolidColorBrush x:Key="BabyBlue">#FF4D7EB8</SolidColorBrush>
    <SolidColorBrush x:Key="BlackBkgrd">#B2000000</SolidColorBrush>
    <Style x:Key="SBtn" TargetType="Button">
        <Setter Property="Margin" Value="0,5"/>
        <Setter Property="Background" Value="{StaticResource BabyBlue}"/>
        <Setter Property="BorderBrush" Value="{x:Null}"/>
        <Setter Property="Padding" Value="10,3"/>
        <Setter Property="FontSize" Value="24"/>
    </Style>
    <Style x:Key="STopBtn" BasedOn="{StaticResource SBtn}" TargetType="Button">
        <Setter Property="Margin" Value="0,0,0,5"/>
    </Style>
    <Style x:Key="SBottomBtn" BasedOn="{StaticResource SBtn}" TargetType="Button">
        <Setter Property="Margin" Value="0,5,0,0"/>
    </Style>
    <Style x:Key="SZoomIn" TargetType="FrameworkElement">
        <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform/>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)">
                            <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)">
                            <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>            
    </Style>
    <Style x:Key="SBorder" BasedOn="{StaticResource SZoomIn}" TargetType="Border">
        <Setter Property="BorderBrush" Value="{StaticResource BabyBlue}"/>
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="Background" Value="{StaticResource BlackBkgrd}"/>
        <Setter Property="CornerRadius" Value="5"/>
        <Setter Property="Padding" Value="10"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
    </Style>
    <Style x:Key="SStackPnl" TargetType="StackPanel">
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>            
    </Style>
</Window.Resources>
<Border x:Name="MainBorder" Style="{StaticResource SBorder}">
    <StackPanel x:Name="MainStackPnl" Style="{StaticResource SStackPnl}">
        <Button x:Name="ViewProjectsBtn" Content="View Projects" Style="{StaticResource STopBtn}" Click="ViewProjectsBtn_Click"/>
        <Button x:Name="AboutBtn" Content="About" Style="{StaticResource SBtn}" Click="AboutBtn_Click"/>
        <Button x:Name="ExitBtn" Content="Exit" Style="{StaticResource SBottomBtn}" Click="ExitBtn_Click"/>
    </StackPanel>
</Border>
</Window>

Answer 1

如果以上是你所有的XAML那么更改你的代码如下：

<Border Style="{StaticResource SBorder}" Background="Red" Height="200" Width="200"/>

您已将VerticalAlignment和HorizontalAlignment设置为Center a，而不是在 Border 中设置 aby Height & Width，因此它不会显示 完全。要么给高度和宽度一些值，要么设置 VerticalAlignment HorizontalAlignment Stretch，您将 看到Animation工作正常。如下：

 <Style x:Key="SBorder" BasedOn="{StaticResource SZoomIn}" TargetType="Border">
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
    </Style>

如果您有其他控件层次结构，请更新有问题的控件层次结构，我将为此更新我的答案。

更新：

在

更新的标记中，边框在渲染时将具有Height和Width。但SZoomIn样式似乎与之前给出的 XAML 不同。您没有正确设置 Storyboard.TargetProperty 属性。您缺少RenderTransform前缀。

所以解决方案是：

将最新XAML中的Storyboard从 Storyboard 替换为第一个XAML。

Answer 2

因此，正如评论中提到的，我在此处发布的代码实际上确实可以正常工作。 问题出在我从原始帖子中遗漏的另一个标记元素上。 我创建了一个名为 DraggableArea 的类，它继承自 ContentControl，这个元素包围了我的 Border（请参阅下面的 FULL 标记）。 可拖动区域使任何内容都可以用鼠标拖动。 我把它省略了 b/c 我想每个人都会专注于这一点，而不是看周围的 XAML，我确信问题出在那里。 事实证明我错了，像往常一样，我的自定义代码导致了错误。 不确定为什么会发生错误，但你去吧。 不过，感谢您的所有帮助！

<local:DraggableArea>
    <Border x:Name="MainBorder" Style="{StaticResource SBorder}">
        <StackPanel x:Name="MainStackPnl" Style="{StaticResource SStackPnl}">
            <Button x:Name="ViewProjectsBtn" Content="View Projects" Style="{StaticResource STopBtn}" Click="ViewProjectsBtn_Click"/>
            <Button x:Name="AboutBtn" Content="About" Style="{StaticResource SBtn}" Click="AboutBtn_Click"/>
            <Button x:Name="ExitBtn" Content="Exit" Style="{StaticResource SBottomBtn}" Click="ExitBtn_Click"/>
        </StackPanel>
    </Border>
</local:DraggableArea>