Увеличьте границы при загрузке 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 а не поставлено Height & Width в Border, поэтому он не будет отображаться вообще. Либо задайте значение высоты и ширины, либо установите 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>

Если у вас есть какая-то другая иерархия управления, обновите ее, и я обновлю свой ответ для этого.

Обновить:

В вашей обновленной разметке Border будет иметься Height & Width во время рендеринга. Но SZoomIn стиль, кажется, отличается от XAML, данного ранее. Вы не устанавливаете Storyboard.TargetProperty свойство правильно. Вам не хватает RenderTransform префикс в нем.

так что решение таково:

Замените свой Storyboard в последнем XAML от Storyboard во-первых XAML ,

Answer 2

Итак, как уже упоминалось в комментариях, код, который я здесь разместил, действительно работает нормально. Проблема была с еще одним элементом разметки, который я оставил в исходном посте. Я создал класс с именем DraggableArea, который наследуется от ContentControl, и этот элемент окружил мою границу (см. Разметку FULL ниже). DraggableArea делает любой контент перетаскиваемым с помощью мыши. Я пропустил это, потому что решил, что все сосредоточатся на этом, а не смотрят на окружающий 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>