I'm trying to do a fade in page transition. The fade out transition works but when I try to do a fade in it doesn't seem to do anything, or perhaps is too fast.
My XAML Code:
<Page
x:Class="CYBOracleProject.Chapter1_1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CYBOracleProject"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Storyboard x:Name="FadeInTransition">
<FadeInThemeAnimation Storyboard.TargetName="StartPage1" />
</Storyboard>
</Page.Resources>
<Grid x:Name="StartPage1" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Image Source="Image/hallway.jpg" Stretch="Fill" />
</Grid>
For the EventHandler I tried Loaded but it didn't work.
I would probably do this using the Behaviors SDK using ControlStoryboardAction
If you want to do it from code-behind use DoubleAnimation with the Opacity property instead of FadeInThemeAnimation.
XAML
<Storyboard x:Name="FadeInTransition">
<DoubleAnimation Storyboard.TargetName="StartPage1"
Storyboard.TargetProperty="Opacity" From="0.0"
To="1.0" Duration="0:0:1" />
</Storyboard>
Loaded event:
FadeInTransition.Begin();
Related
In order for my app's storyboard to work properly, I must divide the window's height and width by two and then use those values as the CenterY and CenterX values.
XAML:
<Window x:Name="GanjAsemanMainWindow" x:Class="Ganj_Aseman.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:Ganj_Aseman"
mc:Ignorable="d"
Loaded="GanjAsemanMainWindow_Loaded" AllowsTransparency="True" Background="Transparent" FontSize="13" Height="535" ResizeMode="CanResizeWithGrip" Title="MainWindow" Width="764" WindowStyle="None">
<Window.RenderTransform>
<RotateTransform CenterX="{Binding}" CenterY="{Binding}" Angle="{Binding}"/>
</Window.RenderTransform>
<Window.Resources>
<Storyboard x:Key="WindowRotation">
<DoubleAnimation BeginTime="00:00:00" SpeedRatio="2.5" Duration="00:00:2" From="{Binding Path=Height,ElementName=GanjAsemanMainWindow}" To="0" AutoReverse="False" Storyboard.TargetName="GanjAsemanMainWindow" Storyboard.TargetProperty="Height"/>
<DoubleAnimation BeginTime="00:00:00" SpeedRatio="2.5" Duration="00:00:2" From="{Binding Path=Width,ElementName=GanjAsemanMainWindow}" To="0" AutoReverse="False" Storyboard.TargetName="GanjAsemanMainWindow" Storyboard.TargetProperty="Width"/>
<DoubleAnimation BeginTime="00:00:00" SpeedRatio="3.5" Duration="00:00:2" From="0" To="360" AutoReverse="False" Storyboard.TargetName="GanjAsemanMainWindow" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"/>
</Storyboard>
</Window.Resources>
<Grid>
<Image x:Name="MinimizeIconImage" PreviewMouseLeftButtonDown="MinimizeIconImage_PreviewMouseLeftButtonDown" MouseEnter="MinimizeIconImage_MouseEnter" MouseLeave="MinimizeIconImage_MouseLeave" GotFocus="MinimizeIconImage_GotFocus" LostFocus="MinimizeIconImage_LostFocus" Focusable="True" FocusVisualStyle="{x:Null}" Cursor="Hand" Height="47" VerticalAlignment="Top" Source="{Binding}" Margin="0,2,67,0" HorizontalAlignment="Right" Width="52"/>
</Grid>
</Window>
C#:
private void MinimizeIconImage_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
//I checked the height and width values after resizing using "Grip" here
RotateTransform RT = new RotateTransform(0, Width/2 ,Height/2);
GanjAsemanMainWindow.RenderTransform = RT;
(Resources["WindowRotation"] as Storyboard).Begin();
}
When the storyboard first runs and the height and width values become zero, I resize the window using the Grip icon, but the values of those two properties do not change and remain zero.
Best regards,
Reza Jaferi
As is mentioned in this answer, Width/Height is the requested size. In this case, we need to use ActualWidth/ActualHeight.
XAML:
From="{Binding Path=ActualHeight,ElementName=GanjAsemanMainWindow}"
From="{Binding Path=ActualWidth,ElementName=GanjAsemanMainWindow}"
C#:
RotateTransform RT = new RotateTransform(0, ActualWidth / 2, ActualHeight / 2);
I am building a Windows WPF application that contains number of buttons.
I want to notify the user that he should load a pdf before he can press other buttons by making the load pdf button blink / vibrate if the user clicks on other places and no pdf is loaded.
For example - The exact behavior happens on Microsoft Paint if you try to click anywhere outside of the edit colors box while it is open. (see attached gif)
Does anyone have an idea ?
You can use a storyboard with a DoubleAnimation, change the drop shadow, make it go back automatically and repeat it (here 4 times).
Here is a UserControl, which you can reuse for all buttons with such effect; you only need to replace the text "Button content" by some DependencyProperty to make it versatile.
<UserControl x:Class="AnimateDropShadow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d">
<Grid>
<Button HorizontalAlignment="Left" >
Button content
<Button.Effect>
<DropShadowEffect x:Name="warningEffect" Color="Black" BlurRadius="10" ShadowDepth="0"/>
</Button.Effect>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="warningEffect"
Storyboard.TargetProperty="BlurRadius"
From="15" To="10" Duration="0:0:0.1"
AutoReverse="True" RepeatBehavior="0:0:0.4" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
</UserControl>
How can I use scale animation to scaling the Shapes like Path, Rectangle, ... without memory increasing.
It seems that UWP uses BitmapCache by default in Scale animation and this is because UWP tries to use BitmapCache for smooth animation but I think UWP can clip the BtimapCache to decrease memory usage.
Here is my simple code which builds in Windows10 v1903.
<Page.Resources>
<Storyboard x:Name="MyStoryboard" >
<DoubleAnimation To="{Binding MyScale}" Duration="0:0:0.3" Storyboard.TargetName="CompositeTransform"
Storyboard.TargetProperty="ScaleX"/>
<DoubleAnimation To="{Binding MyScale}" Duration="0:0:0.3" Storyboard.TargetName="CompositeTransform"
Storyboard.TargetProperty="ScaleY"/>
</Storyboard>
</Page.Resources>
<Grid Background="Transparent">
<Ellipse x:Name="path" Fill="Red" VerticalAlignment="Top" HorizontalAlignment="Left"
StrokeThickness="1" Stroke="#FF000000" Width="200" Height="100"
>
<Ellipse.RenderTransform>
<CompositeTransform x:Name="CompositeTransform" ></CompositeTransform>
</Ellipse.RenderTransform>
</Ellipse>
</Grid>
and C#:
private void MainPage_OnPointerWheelChanged(object sender, PointerRoutedEventArgs e)
{
if (e.GetCurrentPoint(this).Properties.MouseWheelDelta > 0)
MyScale *= 2;
else
MyScale /= 2;
MyStoryboard.Begin();
}
when the user uses the mouse wheel and tries to zoom-in, the memory is increasing.
Is there anything wrong with my code?
To simplify this question I'm going to compare UWP and WPF in big objects. so I create solutions in both UWP and WPF with just one shape in MainPage. Here are the solutions:
UWP:
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Rectangle Width="20000" Height="20000" Fill="Red" Stroke="Black" />
</Page>
WPF:
<Window x:Class="TestScaleBigPath.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"
mc:Ignorable="d"
WindowState="Maximized" >
<Rectangle Width="20000" Height="20000" Fill="Red" Stroke="Black" />
</Window>
WPF only takes 53MB memory while UWP takes 950MB. Here are the Diagnostics Sessions:
UWP
WPF
I want to create marquee effect in WP8 application.
To accomplish this I placed StackPanel inside ScrollViewer and I'm trying to use DoubleAnimation on TranslateTransform.X property.
Code:
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="Scroll" RepeatBehavior="Forever" AutoReverse="True">
<DoubleAnimation From="0" To="100" Storyboard.TargetName="transform" Storyboard.TargetProperty="X" Duration="0:0:5" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot">
...
<ScrollViewer Height="80" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Hidden">
<StackPanel Orientation="Horizontal">
<StackPanel.RenderTransform>
<TranslateTransform x:Name="transform" />
</StackPanel.RenderTransform>
<Image Source="/Assets/logo1.png"></Image>
<Image Source="/Assets/logo2.png"></Image>
<Image Source="/Assets/logo3.png"></Image>
<Image Source="/Assets/logo4.png"></Image>
<Image Source="/Assets/logo5.png"></Image>
</StackPanel>
</ScrollViewer>
</Grid>
Unfortunately when calling Scroll.Begin() from code-behind in page Loaded event handler I'm getting exception: System.InvalidOperationException: Cannot resolve TargetName transform.
What I'am doing wrong?
Animation runs when I place StackPanel directly in LayoutRoot but not when it's child of ScrollViewer.
I think the exception is explanatory. Like you apply storyboard on some UI element but there is no element named "transform" in your xaml to which this storyboard will be going to be applied.
so this property Storyboard.TargetName should be name of the UI element that has to be transformed.
In your case if you have to simply give your StackPanel a name say MyStackPanel and then put this name in place of transform in your storyboard code.
<StackPanel Orientation="Horizontal" Name="MyStackPanel">
<StackPanel.RenderTransform>
<TranslateTransform x:Name="transform" />
</StackPanel.RenderTransform>
...
You storyboard should be changedin this way..
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="Scroll" RepeatBehavior="Forever" AutoReverse="True">
<DoubleAnimation From="0" To="100" Storyboard.TargetName="MyStackPanel" Storyboard.TargetProperty="X" Duration="0:0:5" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>
Important :-It would be much better if you just use Blend for making a simple animation and then see how the animation code generated in the page Xaml. You will got all of your answers :)
In the code below, I want to start the animation when there's TextChanged() event of TextBlock is called. But when I try this code, I get an error...
"Failed to assign to property 'System.Windows.EventTrigger.RoutedEvent'"
I am lost, could someone please assist me that how can I do this?
<StackPanel>
<ListBox Name"lstSample" SelectionChanged="lstSample_SelectionChanged">
<ListBox.Triggers>
<EventTrigger RoutedEvent="ListBox.SelectionChanged">
<BeginStoryboard>
<BeginStoryboard.Storyboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="txtSample" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:1.0">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn" Power="8"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard.Storyboard>
</BeginStoryboard>
</EventTrigger>
</ListBoxTriggers>
</ListBox>
<Border Name="brdrTextSampleLanguageOne" BorderThickness="0" BorderBrush="{StaticResource PhoneAccentBrush}">
<TextBlock
Text="This is sample text."
Name="txtSample"
TextAlignment="Right"
VerticalAlignment="Center" />
</Border>
</StackPanel>
Thanks very much.
Would be really easy using code, just create a property like:
private string _textBlockText;
public string textBlockText
{
get { return _textBlockText; }
set
{
if (txtSample.Text != value)
{
if (Storyboard1.GetCurrentState() != ClockState.Active)
Storyboard1.Begin();
txtSample.Text = value;
}
}
}
Just use textBlockText property to update text in anywhere in your code and this should work like TextChanged event... Note: Storyboard1 is the animation you desire to play on TextChanged Event.
This will help you find the code below
<UserControl x:Class="WrapPanel.MainPage"
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"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
<Grid x:Name="LayoutRoot"
Background="White">
<StackPanel>
<StackPanel.Resources>
<Storyboard x:Key="mystoryboard">
<DoubleAnimation Storyboard.TargetName="txtSample"
Storyboard.TargetProperty="Opacity"
From="0"
To="1"
Duration="0:0:1.0">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"
Power="8" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</StackPanel.Resources>
<ListBox Name="lstSample"
SelectionChanged="lstSample_SelectionChanged">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<ei:ControlStoryboardAction ControlStoryboardOption="Play"
Storyboard="{StaticResource mystoryboard}">
</ei:ControlStoryboardAction>
</i:EventTrigger>
</i:Interaction.Triggers>
</ListBox>
<Border Name="brdrTextSampleLanguageOne"
BorderThickness="0">
<TextBlock Text="This is sample text."
Name="txtSample"
TextAlignment="Right"
VerticalAlignment="Center" />
</Border>
</StackPanel>
</Grid>
</UserControl>
Let me know if it works for you.
Cheers!
Vinod