I have a control that I want to enable the property IsHitTestVisable as it fades in the opacity. The code compiles, but as soon as the mouse is moved I get the following error: System.InvalidOperationException: Cannot resolve TargetProperty IsHitTestVisable on specified object.
<local:MotionVisibleControl MinWidth="486" x:Name="MotionActivatedControls" MouseEnterAnimation="
{StaticResource mouseenter}" Opacity="0" IsHitTestVisible="False">
<Storyboard x:Name="mouseenter">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MotionActivatedControls">
<SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="1" KeySpline="0.495999991893768,0,0.49099999666214,1"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MotionActivatedControls" Storyboard.TargetProperty="IsHitTestVisable">
<DiscreteObjectKeyFrame Value="True" KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
You've spelled Visible wrong.
Try IsHitTestVisible instead.
Related
I'm currently working on a custom control for my application that expands and collapses content with a header which you can click to change states. The template for it looks like this at the moment.
<Style TargetType="controls:ExpandControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:ExpandControl">
<Border>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="State">
<VisualState x:Name="Visible">
<VisualState.Setters>
<Setter Target="Grid.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Collapsed">
<VisualState.Setters>
<Setter Target="Grid.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentPresenter x:Name="HeaderPresenter" Content="{TemplateBinding Header}" />
<Grid x:Name="Grid" Grid.Row="1">
<ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" />
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As you can see from the template, I'm currently using visual states to set the visibility of the content in this control but it's not a great user experience as the content just disappears.
I'd like to be able to manipulate the content somehow that would allow the content to look like it's collapsing and expanding from the header when the Visibility of the control changes.
I've taken a look at animations using Storyboards but I'm completely new to that and if anyone could provide some help on Storyboards and how I can make the scenario work for my control, it would be very much appreciated!
Thanks in advance!
Storyboarding isn't a brilliant experience in Visual Studio and attempting to write them manually may not be the best idea.
I'd recommend opening your project in Blend which comes as part of your Visual Studio installation. It's a great tool for designing your applications, and in particular, adding Storyboards in a very easy manner and it will automatically generate the Storyboard XAML for you while you get to see the changes in the designer.
As for your animation scenario, I've played around with your XAML template in a page and have come up with something that makes it look like it's collapsing and expanding but it does it without manipulating the Visibility property like this:
<VisualStateGroup x:Name="State">
<VisualState x:Name="Visible">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Grid">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Grid">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Grid">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.1">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Grid">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Grid">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Grid">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.2">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
You'll also want to change your content Grid to look like this:
<Grid x:Name="Grid" Grid.Row="1" RenderTransformOrigin="0.5,0">
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" />
</Grid>
I'll explain why you'll have to make the changes to the Grid and what the Storyboards do next.
In order to achieve something similar to what you're looking for, I've chosen the Opacity and Y scale on your Grid to animate.
Because we will be manipulating the Y scale of the control, we added the RenderTransform to the Grid. The reason for using the CompositeTransform is so that you can manipulate most common transforms (scale, rotation, translation etc.).
In the states, we use key frames to manipulate the values across time. This is how you achieve the animation in Storyboards. If you only set one KeyFrame with time of 0, it will appear as an immediate change similar to using the VisualState.Setters mechanism of changing properties.
In the Collapsed state, we are changing the opacity and Y scaling of the Grid from 1 to 0. This gives the animation that shows the content collapsing up into the header. As you can see from the key frames, we're staggering the animations of the two properties so the content fades out before it's finished manipulating the scale.
In the Visible state, we are essentially reversing the Collapsed state by changing the opacity and Y scaling from 0 to 1 over the same amount of time.
Try loading these into your control and having a play with them in Blend. It's a great starting point as I threw this together very quickly.
You can find some more information on Storyboarding using Blend here: https://blogs.msdn.microsoft.com/avtarsohi/2016/02/16/understand-storyboard-concept-in-xaml-using-blend-2015/
I need change background image under FlipView on SelectionChanged. But fired only TourFlipViewBackgroundImageFageIn storyboard and when swipe FlipView image does not change smoothly. How to make the image smoothly changed when the source changes?
<Storyboard
x:Name="TourFlipViewBackgroundImageFageOut">
<DoubleAnimation
Storyboard.TargetName="TourFlipViewBackgroundImage"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0:0:0.5" />
</Storyboard>
<Storyboard
x:Name="TourFlipViewBackgroundImageFageIn">
<DoubleAnimation
Storyboard.TargetName="TourFlipViewBackgroundImage"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:0.6" />
</Storyboard>
<core:DataTriggerBehavior
Binding="{Binding SelectedIndex, ElementName=TourFlipView}"
ComparisonCondition="Equal"
Value="1">
<media:ControlStoryboardAction
Storyboard="{StaticResource TourFlipViewBackgroundImageFageOut}"
ControlStoryboardOption="Play" />
<core:ChangePropertyAction
TargetObject="{Binding ElementName=TourFlipViewBackgroundImage}"
PropertyName="Source"
Value="ms-appx:///Assets/Images/TourBackgroundImage2.png" />
<media:ControlStoryboardAction
Storyboard="{StaticResource TourFlipViewBackgroundImageFageIn}"
ControlStoryboardOption="Play" />
</core:DataTriggerBehavior>
That's happend because all storyboards are starting at same time.
You can remove second storyboard:
<media:ControlStoryboardAction
Storyboard="{StaticResource TourFlipViewBackgroundImageFageIn}"
ControlStoryboardOption="Play" />
And add completed event to first (fadeOut) storyboard:
Completed="MyStoryboardCompleted"
Now inside event you can start second storyboard after first one would finish:
private void MyStoryboardCompleted(object sender, object e)
{
var thing = this.Resources["TourFlipViewBackgroundImageFageIn"];
var OtherSB = (Storyboard)thing;
OtherSB.Begin();
}
By the way you can replace image also inside storyboard:
<Storyboard x:Key="TransitionImage" Completed="Storyboard_Completed">
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:0"
Storyboard.TargetName="TourFlipViewBackgroundImage"
Storyboard.TargetProperty="(Image.Source)">
<DiscreteObjectKeyFrame KeyTime="00:00:1">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="ms-appx:///Assets/StoreLogo.png" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
I'm trying to implement a FlipView control in a Win10 UWP app, but I don't seem to be able to animate the transition between the open and closed states like in the Windows 10 calendar app. If I look at the default style of the SplitView, it seems that the panel size is altered by animating the Width property of a ColumnDefinition. This property can not be animated using the default animations provided by the framework. Any help would be appreciated.
In the DefaultStyle, look for the ClosedCompactLeft visual state. Then modify the Duration for the animation on PaneClipRectangleTransform. Look for this animation (which is the one you will modify):
<DoubleAnimation Storyboard.TargetName="PaneClipRectangleTransform"
Storyboard.TargetProperty="TranslateX"
To="{Binding TemplateSettings.NegativeOpenPaneLengthMinusCompactLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Duration="0:0:0.0" />
You can define a Storyboard inside a VisualState. If the trigger is fired, the story will begin automatically.
Example structure of code:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Drawer">
<SplineDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-260">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1020" />
</VisualState.StateTriggers>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Drawer">
<EasingDoubleKeyFrame KeyTime="0" Value="-260"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
If you are using SplitView, you can code a class that extends SplitView and custom it's Style , which makes you get the Pane and the Content in your code and thus you can animate them on your own.
I want to make page flip effect same as . Flip Board app for windows 8.1
Previously i tried to port page turn animation of Windows Phone to Winrt and i dropped the same because of not support to PathGeometry clipping.
Here is the details
I am trying for a solution that works on WinRT (XAML - C#). Because i don't have much knowledge in Direct X & C++.
Hope this helps : I have used eventrigger for Loaded event.
Using PlaneProjection :
I am using RotationX which rotates the images around the x-axis of rotation.
<Grid >
<Grid.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Flip1">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="90.0146"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="180"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Flip2">
<EasingDoubleKeyFrame KeyTime="0" Value="-180"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-90"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Flip1">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.3">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Flip2">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.3">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<Rectangle x:Name="Flip1" Fill="Aqua" Height="50" Width="50">
<Rectangle.Projection>
<PlaneProjection x:Name="PlaneProjection1"></PlaneProjection>
</Rectangle.Projection>
</Rectangle>
<Rectangle x:Name="Flip2" Fill="Aqua" Height="50" Width="50">
<Rectangle.Projection>
<PlaneProjection x:Name="PlaneProjection2"></PlaneProjection>
</Rectangle.Projection>
</Rectangle>
</Grid>
Using ScaleTransform : Changing horizontal scale from 1 to -1 has the same rotating effect and you can animate ScaleX property to get rotating effect. You should also change it's Visibility from Visible to Hidden and vice versa. To make image disappearing after rotating 90 degrees.
<Rectangle x:Name="Flip3" Fill="Red" Height="50" RenderTransformOrigin="0.5,.5" Width="50">
<Rectangle.RenderTransform>
<ScaleTransform x:Name="st" ScaleX="1" ScaleY="0.1"></ScaleTransform>
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" Storyboard.TargetName="Flip3" From="1" To="-1" Duration="0:0:0.5">
<DoubleAnimation.EasingFunction>
<ExponentialEase EasingMode="EaseOut"></ExponentialEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
You can use the PlaneProjection as Projection property and easily do the transforms you need. Play with the transform with blend and you should see how that works. One thing you need to do first is split your UI into two surfaces and you can use RenderTargetBitmap.Render() method to do that - render all you are transitioning from into one bitmap and what you are transitioning to into another and then appropriately combine the bitmaps.
I wrote this storyboard in my however whenever I do a SwapImages.Begin(); from the C# file nothing happens. Can someone tell me what might be wrong with the code below?
<Storyboard x:Name="SwapImages" >
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Width)" Storyboard.TargetName="Image" >
<EasingDoubleKeyFrame KeyTime="0" Value="300" />
<EasingDoubleKeyFrame KeyTime="0:0:5" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Width)" Storyboard.TargetName="Image2" >
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:5" Value="300" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.HorizontalAlignment)" Storyboard.TargetName="Image">
<DiscreteObjectKeyFrame KeyTime="00:00:7">
<DiscreteObjectKeyFrame.Value>
<HorizontalAlignment>Right</HorizontalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.HorizontalAlignment)" Storyboard.TargetName="Image2">
<DiscreteObjectKeyFrame KeyTime="00:00:7">
<DiscreteObjectKeyFrame.Value>
<HorizontalAlignment>Left</HorizontalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
I don't think you can animate alignment properties (according to this question here) You could try doing what the comment in the linked question says, and put your two images in a canvas, then manipulate there x and y coordinates from the code-behind
this is the code I wrote in the MainPage.xaml along with ur story board and I did get the output.
<Page
x:Class="TestApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:data="using:TestApp">
<Page.Resources>
<Storyboard x:Name="SwapImages" >
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Width)" Storyboard.TargetName="Image" >
<EasingDoubleKeyFrame KeyTime="0" Value="300" />
<EasingDoubleKeyFrame KeyTime="0:0:5" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Width)" Storyboard.TargetName="Image2" >
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:5" Value="300" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.HorizontalAlignment)" Storyboard.TargetName="Image">
<DiscreteObjectKeyFrame KeyTime="00:00:7">
<DiscreteObjectKeyFrame.Value>
<HorizontalAlignment>Right</HorizontalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.HorizontalAlignment)" Storyboard.TargetName="Image2">
<DiscreteObjectKeyFrame KeyTime="00:00:7">
<DiscreteObjectKeyFrame.Value>
<HorizontalAlignment>Left</HorizontalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<Grid >
<Rectangle Fill="Red" Height="100" Margin="430,237,0,0" Stroke="Black" Name="Image" VerticalAlignment="Top" Width="100"/>
<Rectangle Fill="Green" Loaded="Image2_Loaded_1" Height="100" Margin="922,212,0,0" Stroke="Black" VerticalAlignment="Top" Width="100" Name="Image2"/>
</Grid></Page>
Here's the code behind for the above xaml
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
/// <summary>
/// Invoked when this page is about to be displayed in a Frame.
/// </summary>
/// <param name="e">Event data that describes how this page was reached. The Parameter
/// property is typically used to configure the page.</param>
protected async override void OnNavigatedTo(NavigationEventArgs e)
{
}
private void Image2_Loaded_1(object sender, RoutedEventArgs e)
{
SwapImages.Begin();
}
}
It worked fine only thing is that I wrote the SwapImages.Begin(); method in the loaded event which is fired after the elements are loaded onto the screen.
The other thing that you might be mistaken is with the fact that animating alignments does not mean you will get a smooth transition from left to right . Alignment is always relative to the parent container and can have few sets of value. So if you want a smooth transition try animating some other property like canvas X,Y etc etc. .