Reputation: 2554
For the life of me, I cannot figure out why the simple setup below is not working. I just want a border to scale up ("zoom in") once its loaded, with the zoom-in functionality wrapped up in a resource style. But when the following XAML runs, the border just loads at 100% scale, no animation happens. Your help will be much appreciated!
<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}"/>
EDIT: I did not show the complete markup above so that things could be kept simple, but my complete markup is below. Note that, because there are buttons inside the Border, the Border does have Height/Width at run-time.
<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>
Upvotes: 0
Views: 843
Reputation: 2554
So, as mentioned in the comments, the code that I posted here actually does work fine. The issue was with one other markup element that I left out of the original post. I created a class called DraggableArea that inherits from ContentControl, and this element surrounded my Border (see FULL markup below). DraggableArea makes any content draggable with the mouse. I left it out b/c I figured everyone would focus on that and not look at the surrounding XAML, where I was sure the problem lay. Turns out I was wrong, and as usual my custom code was causing the bug. Not sure exactly why the bug is happening yet but there you go. Thanks for all the help though!
<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>
Upvotes: 0
Reputation: 8823
If above is all your XAML
then change your code as following:
<Border Style="{StaticResource SBorder}" Background="Red" Height="200" Width="200"/>
You have set
VerticalAlignment
andHorizontalAlignment
toCenter
a and not set abyHeight
&Width
in Border so it will not display at all. Either give Height & Width some value or setVerticalAlignment
andHorizontalAlignment
toStretch
and you'll see theAnimation
will work fine. as below:
<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>
If you have some other control hierarchy then update that in question and I'll update my answer for that.
Update:
In your updated markup Border will have Height
& Width
at render time. But the SZoomIn
style seems different from the XAML given before. You are not setting the Storyboard.TargetProperty
property correctly. You are missing RenderTransform
prefix in it.
so the solution is:
Replace your
Storyboard
in latestXAML
fromStoryboard
in firstXAML
.
Upvotes: 1