WPF - KeyFrame animation not working - wpf

I've got a KeyFrame Animation storyboard and a separate rotation transformation in my Window.Resources.
The rotation transformation works as I can alter the angle and see the content rotate. I know the storyboard is being called, because it took me a few goes to get the PropertyPath right after I clicked on the button.
However now it does nothing - no error, but no rotation either!
Can anyone help please?
Thanks,
Andy
<Window
x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="400">
<Window.Resources>
<Storyboard x:Key="myStoryboard">
<Rotation3DAnimationUsingKeyFrames
Storyboard.Target="{Binding TemplatedParent}"
Storyboard.TargetProperty="(Viewport2DVisual3D.Transform).(RotateTransform3D.Rotation)" >
<Rotation3DAnimationUsingKeyFrames.KeyFrames>
<LinearRotation3DKeyFrame KeyTime="0:0:1">
<LinearRotation3DKeyFrame.Value>
<AxisAngleRotation3D Axis="0,1,0" Angle="0" />
</LinearRotation3DKeyFrame.Value>
</LinearRotation3DKeyFrame>
</Rotation3DAnimationUsingKeyFrames.KeyFrames>
</Rotation3DAnimationUsingKeyFrames>
</Storyboard>
<RotateTransform3D x:Key="myRotateTransform3D" >
<RotateTransform3D.Rotation>
<AxisAngleRotation3D Axis="0,1,0" Angle="30" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
<!-- Front, left square -->
<MeshGeometry3D
x:Key="squareMeshFront"
Positions="-1,-1,1 1,-1,1 1,1,1 -1,1,1"
TriangleIndices="0 1 2 0 2 3"
TextureCoordinates="0,1 1,1 1,0 0,0" />
<!-- Bottom -->
<MeshGeometry3D
x:Key="squareMeshBottom"
Positions="-1,-1,1 1,-1,1 1,-1,-1 1,1,-1"
TriangleIndices="0 1 2 0 2 3"
TextureCoordinates="0,1 1,1 1,0 0,0" />
<DiffuseMaterial x:Key="visualHostMaterial" Brush="White" Viewport2DVisual3D.IsVisualHostMaterial="True" />
</Window.Resources>
<Viewport3D>
<Viewport3D.Camera>
<PerspectiveCamera Position="0,0,9" LookDirection="0,0,-1" />
</Viewport3D.Camera>
<Viewport2DVisual3D Material="{StaticResource visualHostMaterial}" Geometry="{StaticResource squareMeshFront}" Transform="{StaticResource myRotateTransform3D}" >
<StackPanel Background="Blue" Width="120" Height="80">
<Button Height="30" Margin="20">
<Button.Content>Click Me</Button.Content>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource myStoryboard}" >
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Viewport2DVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<AmbientLight Color="White" />
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</Window>

The problem is in Storyboard.Target="{Binding TemplatedParent}". Give a name to Viewport2DVisual3D control: <Viewport2DVisual3D x:Name="vp" .../>, and set Storyboard.TargetName="vp" instead of what you have...
Cheers

Related

Flip Animation in Xaml Wpf

I was trying to make Flip Animation in XAML in WPF but was not as I wanted and I am not able to find the required answer. Only thing I could make was Scale the Image(XAML code is below) but it was not looking like flip. Please tell me what is needed for Flip Animation.
<Rectangle x:Name="Image" Fill="DarkSeaGreen" RenderTransformOrigin="0.5,0.5" Height="150" Width="200" Canvas.Left="150" Canvas.Top="150">
<Rectangle.RenderTransform>
<ScaleTransform ScaleY="-1" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard x:Name="ImageFlip">
<DoubleAnimation From="-1" To="1" BeginTime="0:0:1" Duration="0:0:2" Storyboard.TargetName="Image" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
If you want it to look like it's flipping then you need to skew the object so what would be the furthest edge is narrower
Like this:
<Rectangle x:Name="Image" Fill="DarkSeaGreen"
RenderTransformOrigin="0.5,0.5" Height="150" Width="200">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard x:Name="ImageFlip">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00.0" Value="1" />
<SplineDoubleKeyFrame KeyTime="00:00:00.09" Value="0.3" />
<SplineDoubleKeyFrame KeyTime="00:00:00.12" Value="0.6" />
<SplineDoubleKeyFrame KeyTime="00:00:00.15" Value="0.8" />
<SplineDoubleKeyFrame KeyTime="00:00:00.18" Value="1" />
<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00.0" Value="1" />
<SplineDoubleKeyFrame KeyTime="00:00:00.09" Value="0.9" />
<SplineDoubleKeyFrame KeyTime="00:00:00.18" Value="1" />
<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
<SplineDoubleKeyFrame KeyTime="00:00:00.06" Value="-10" />
<SplineDoubleKeyFrame KeyTime="00:00:00.09" Value="-20" />
<SplineDoubleKeyFrame KeyTime="00:00:00.1" Value="20" />
<SplineDoubleKeyFrame KeyTime="00:00:00.18" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
You might find this interesting:
https://archive.codeplex.com/?p=flipcontrol
You need a scale transform for Y-axis running from 1 to -1. My WPF-fu is pretty outdated so I can't give you the exact transform XAML.
<UserControl x:Class="FlipControl.FlipControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<UserControl.Resources>
<Storyboard x:Key="StoryFlip">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(AxisAngleRotation3D.Angle)"
Storyboard.TargetName="rot">
<SplineDoubleKeyFrame KeyTime="00:00:01" KeySpline="0,0,0,1" Value="180"></SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(AxisAngleRotation3D.Angle)"
Storyboard.TargetName="rot2">
<SplineDoubleKeyFrame KeyTime="00:00:01" KeySpline="0,0,0,1" Value="360"></SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="StoryFlipBack">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(AxisAngleRotation3D.Angle)"
Storyboard.TargetName="rot">
<SplineDoubleKeyFrame KeyTime="00:00:01" KeySpline="0,0,0,1" Value="0"></SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(AxisAngleRotation3D.Angle)"
Storyboard.TargetName="rot2">
<SplineDoubleKeyFrame KeyTime="00:00:01" KeySpline="0,0,0,1" Value="180"></SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Viewport3D>
<Viewport3D.Camera>
<PerspectiveCamera Position="0, 0, 4"/>
</Viewport3D.Camera>
<Viewport2DVisual3D x:Name="Side1">
<!-- Rotation definieren -->
<Viewport2DVisual3D.Transform>
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="rot" Angle="0" Axis="1, 0, 0" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Viewport2DVisual3D.Transform>
<!-- Geometry und Material für das Viewport2DVisual3D -->
<Viewport2DVisual3D.Geometry>
<MeshGeometry3D Positions="-1,1,0 -1,-1,0 1,-1,0 1,1,0"
TextureCoordinates="0,0 0,1 1,1 1,0"
TriangleIndices="0 1 2 0 2 3" />
</Viewport2DVisual3D.Geometry>
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="White"/>
</Viewport2DVisual3D.Material>
</Viewport2DVisual3D>
<Viewport2DVisual3D x:Name="Side2">
<!-- Rotation definieren -->
<Viewport2DVisual3D.Transform>
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="rot2" Angle="180" Axis="1, 0, 0" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Viewport2DVisual3D.Transform>
<!-- Geometry und Material für das Viewport2DVisual3D -->
<Viewport2DVisual3D.Geometry>
<MeshGeometry3D Positions="-1,1,0 -1,-1,0 1,-1,0 1,1,0"
TextureCoordinates="0,0 0,1 1,1 1,0"
TriangleIndices="0 1 2 0 2 3" />
</Viewport2DVisual3D.Geometry>
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="White"/>
</Viewport2DVisual3D.Material>
<!-- Steuerelemente in 3D-Look -->
</Viewport2DVisual3D>
<!-- Licht -->
<ModelVisual3D>
<ModelVisual3D.Content>
<AmbientLight Color="White" />
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</UserControl>
Add properties
public Visual FrontSide
{
get
{
return Side1.Visual;
}
set
{
UIElement Elem;
Storyboard Animation;
Side1.Visual = value;
Elem = Side1.Visual as UIElement;
if (Elem != null)
{
Elem.MouseEnter += (sender, e) =>
{
Animation = this.Resources["StoryFlip"] as Storyboard;
if (Animation != null)
{
Animation.Begin();
}
};
}
}
}
public Visual BackSide
{
get
{
return Side2.Visual;
}
set
{
UIElement Elem;
Storyboard Animation;
Side2.Visual = value;
Elem = Side2.Visual as UIElement;
if (Elem != null)
{
Elem.MouseLeave += (sender, e) =>
{
Animation = this.Resources["StoryFlipBack"] as Storyboard;
if (Animation != null)
{
Animation.Begin();
}
};
}
}
}
add front ad flip side
Mario Meir-Huber</TextBlock>
You can do a lot of</TextBlock>
Things with this Control!</TextBlock>-->
<flip:FlipControl.BackSide>
<StackPanel>
<Border BorderThickness="2" BorderBrush="Red">
<Button Height="20" Width="40"></Button>
</Border>
<!--<TextBlock>You want to send me an E-Mail?</TextBlock>
<TextBox Height="80" AcceptsReturn="True"></TextBox>
<Button>Just do it!</Button>
<TextBlock>mario#meirhuber.de</TextBlock>-->
</StackPanel>
</flip:FlipControl.BackSide>
</flip:FlipControl>
</Border>
<Border Width="150" Height="150">
<flip:FlipControl MouseEnter="FlipControl_MouseEnter" MouseLeave="FlipControl_MouseLeave" Name="FlipMe1">
<flip:FlipControl.FrontSide>
<StackPanel Height="20" Width="40">
<Border BorderThickness="2" BorderBrush="Green">
<Button Height="20" Width="40"></Button>
</Border>
<!--<TextBlock FontSize="16" Foreground="Blue">Mario Meir-Huber</TextBlock>
<Line X1="0" X2="130" StrokeThickness="2" Stroke="Black" />
<TextBlock FontSize="6">You can do a lot of</TextBlock>
<TextBlock FontSize="6">Things with this Control!</TextBlock>-->
</StackPanel>
</flip:FlipControl.FrontSide>
<flip:FlipControl.BackSide>
<StackPanel>
<Border BorderThickness="2" BorderBrush="Red">
<Button Height="20" Width="40"></Button>
</Border>
<!--<TextBlock>You want to send me an E-Mail?</TextBlock>
<TextBox Height="80" AcceptsReturn="True"></TextBox>
<Button>Just do it!</Button>
<TextBlock>mario#meirhuber.de</TextBlock>-->
</StackPanel>
</flip:FlipControl.BackSide>
</flip:FlipControl>
</Border>
<Border Width="150" Height="150">
<flip:FlipControl MouseEnter="FlipControl_MouseEnter" MouseLeave="FlipControl_MouseLeave" Name="FlipMe2">
<flip:FlipControl.FrontSide>
<StackPanel Height="20" Width="40">
<Border BorderThickness="2" BorderBrush="Green">
<Button Height="20" Width="40"></Button>
</Border>
<!--<TextBlock FontSize="16" Foreground="Blue">Mario Meir-Huber</TextBlock>
<Line X1="0" X2="130" StrokeThickness="2" Stroke="Black" />
<TextBlock FontSize="6">You can do a lot of</TextBlock>
<TextBlock FontSize="6">Things with this Control!</TextBlock>-->
</StackPanel>
</flip:FlipControl.FrontSide>
<flip:FlipControl.BackSide>
<StackPanel>
<Border BorderThickness="2" BorderBrush="Red">
<Button Height="20" Width="40"></Button>
</Border>
<!--<TextBlock>You want to send me an E-Mail?</TextBlock>
<TextBox Height="80" AcceptsReturn="True"></TextBox>
<Button>Just do it!</Button>
<TextBlock>mario#meirhuber.de</TextBlock>-->
</StackPanel>
</flip:FlipControl.BackSide>
</flip:FlipControl>
</Border>
</WrapPanel>

Image transition animation on ribbon button

How can I create a WPF ribbon button switching between two images, with an animated "wipe" transition between images? I can't place both images within a a grid within the button and animate the opacity of each image in turn (as suggested here) because I can't set the content of the ribbon directly, only the LargeImageSource/SmallImageSource and Label properties.
Update
I tried BorisB.'s suggestion together with the animation from the link above, but there is now no image displayed in the ribbon button. Removing the animation, opacity mask and multiple images, and leaving the following code also doesn't show the image at all.
<RibbonToggleButton Label="Dashboard" Name="btnDashboard" IsChecked="True">
<RibbonToggleButton.LargeImageSource>
<DrawingImage>
<DrawingImage.Drawing>
<DrawingGroup>
<ImageDrawing ImageSource="/Icons/Dashboard.png" />
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
</RibbonToggleButton.LargeImageSource>
</RibbonToggleButton>
You can use a DrawingImage as an ImageSource. Then you can assign a DrawingGroup as a DrawingImage.Drawing. That drawing group can contain two ImageDrawings wrapped in their own DrawingGroups, so you could apply the approach from your link:
<Grid>
<Ribbon>
<RibbonTab x:Name="HomeTab" Header="Home">
<RibbonGroup x:Name="Group1" Header="Group1">
<RibbonButton x:Name="Button1" Label="Button1">
<RibbonButton.LargeImageSource>
<DrawingImage>
<DrawingImage.Drawing>
<DrawingGroup>
<DrawingGroup>
<ImageDrawing Rect="0, 0, 32, 32" ImageSource=ImageOne.png"/>
</DrawingGroup>
<DrawingGroup>
<ImageDrawing Rect="0, 0, 32, 32" ImageSource="ImageTwo.png"/>
<DrawingGroup.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Offset="0" Color="Black" x:Name="BlackStop"/>
<GradientStop Offset="0" Color="Transparent" x:Name="TransparentStop"/>
</LinearGradientBrush>
</DrawingGroup.OpacityMask>
</DrawingGroup>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
</RibbonButton.LargeImageSource>
</RibbonButton>
</RibbonGroup>
</RibbonTab>
</Ribbon>
</Grid>
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="TransparentStop"
Storyboard.TargetProperty="Offset" By="1" Duration="0:0:2" />
<DoubleAnimation Storyboard.TargetName="BlackStop"
Storyboard.TargetProperty="Offset" By="1" Duration="0:0:2"
BeginTime="0:0:0.05" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Window.Triggers>
The wrapping DrawingGroups are used so you can use OpacityMask, which is essential for the effect.

WPF xaml orbit animation not maintaining path

I am trying to create three paths (orbital paths) and get three ellipses (planets, rings) to travel along them, I have followed a few different blogs and forum posts but I cannot see why the ellipses are not travelling on the path.
Here is the xaml:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
ResizeMode="NoResize"
Title="Window2" Width="800" Height="600">
<Window.Resources>
<PathGeometry x:Key="smallGeo" Figures="M 400,250C 427.614,250 450,272.386 450,300C 450,327.614 427.614,350 400,350C 372.386,350 350,327.614 350,300C 350,272.386 372.386,250 400,250"/>
<PathGeometry x:Key="mediumGeo" Figures="M 400,245C 430.376,245 455,269.624 455,300C 455,330.376 430.376,355 400,355C 369.624,355 345,330.376 345,300C 345,269.624 369.624,245 400,245"/>
<PathGeometry x:Key="largeGeo" Figures="M 400,240C 433.137,240 460,266.863 460,300C 460,333.137 433.137,360 400,360C 366.863,360 340,333.137 340,300C 340,266.863 366.863,240 400,240"/>
</Window.Resources>
<Grid Width="800" Height="600" HorizontalAlignment="Center" VerticalAlignment="Center">
<Canvas>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Small orbit animation -->
<DoubleAnimationUsingPath
Storyboard.TargetName="smallEllipse"
Storyboard.TargetProperty="(Canvas.Left)"
PathGeometry="{StaticResource smallGeo}"
Duration="0:0:5"
RepeatBehavior="Forever"
Source="X"/>
<DoubleAnimationUsingPath
Storyboard.TargetName="smallEllipse"
Storyboard.TargetProperty="(Canvas.Top)"
PathGeometry="{StaticResource smallGeo}"
Duration="0:0:5"
RepeatBehavior="Forever"
Source="Y"/>
<!-- Medium orbit animation -->
<DoubleAnimationUsingPath
Storyboard.TargetName="mediumEllipse"
Storyboard.TargetProperty="(Canvas.Left)"
PathGeometry="{StaticResource mediumGeo}"
Duration="0:0:5"
RepeatBehavior="Forever"
Source="X"/>
<DoubleAnimationUsingPath
Storyboard.TargetName="mediumEllipse"
Storyboard.TargetProperty="(Canvas.Top)"
PathGeometry="{StaticResource mediumGeo}"
Duration="0:0:5"
RepeatBehavior="Forever"
Source="Y"/>
<!-- Large orbit animation -->
<DoubleAnimationUsingPath
Storyboard.TargetName="largeEllipse"
Storyboard.TargetProperty="(Canvas.Left)"
PathGeometry="{StaticResource largeGeo}"
Duration="0:0:5"
RepeatBehavior="Forever"
Source="X"/>
<DoubleAnimationUsingPath
Storyboard.TargetName="largeEllipse"
Storyboard.TargetProperty="(Canvas.Top)"
PathGeometry="{StaticResource largeGeo}"
Duration="0:0:5"
RepeatBehavior="Forever"
Source="Y"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<Ellipse x:Name="smallEllipse" Height="20" Stroke="Green" StrokeThickness="5" Width="20" RenderTransformOrigin="0.5,0.5"/>
<Ellipse x:Name="mediumEllipse" Height="40" Stroke="Red" StrokeThickness="5" Width="40" RenderTransformOrigin="0.5,0.5"/>
<Ellipse x:Name="largeEllipse" Height="60" Stroke="Blue" StrokeThickness="5" Width="60" RenderTransformOrigin="0.5,0.5"/>
<Path Stroke="Green" Data="{StaticResource smallGeo}"/>
<Path Stroke="Red" Data="{StaticResource mediumGeo}"/>
<Path Stroke="Blue" Data="{StaticResource largeGeo}"/>
</Canvas>
</Grid>
I used MS expression design to create the paths and kaxaml to preview the xaml.
I suspect that the Animation is not taking into account the Size of the Ellipse as its animating using the Top/Left of the Ellipse not the center of the Ellipse
One way around this would be to set the Margin of the Ellipse to negative half of the Size
Example:
<Ellipse x:Name="smallEllipse" Margin="-10" Height="20" Width="20" ......./>
<Ellipse x:Name="mediumEllipse" Margin="-20" Height="40" Width="40" ......./>
<Ellipse x:Name="largeEllipse" Margin="-30" Height="60" Width="60" ......../>
Result:
Before: After :

View from inside of 3d element WPF

Im using SphereMeshGenerator to create a sphere element in a WPF application.
This sphere is mapped with a media element (video).
I would like to place the camera in the middle of the sphere to get view from inside of the sphere.
Ive tried to play with camera position and direction without any success.
My knowledge about wpf and 3d are quite limited unfortunately.
So my question is, if possible, how to do it?
My goal is to emulate a video panoramic animation.
Thank you.
PS: this question has already been asked but still unanswered. See comments section here:
Link Page
Topic quite old but, as it could help other people in the same situation, i think i have to post the way to do that.
Code XAML using SphereMeshGenerator:
<Window x:Class="WpfSphereMeshGenerator.SphereMeshGeneratorMediaInto"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfSphereMeshGenerator"
Title="SphereMeshGeneratorMediaInto"
Height="300" Width="300"
Loaded="Window_Loaded">
<!-- OXYZ axis in WPF are in center of ViewPort3D-->
<Window.Resources>
<!--sphere diameter-->
<local:SphereMeshGenerator
x:Key="MySphereMeshGenerator"
Center="0 0 0"
Radius="100.0" />
</Window.Resources>
<Grid>
<Viewport3D>
<!--camera in center of ViewPort => 0,0,0-->
<Viewport3D.Camera>
<PerspectiveCamera
x:Name="Camera"
UpDirection="0,1,0"
LookDirection="-2,-2,-2"
Position="0,0,0"
FieldOfView="100" >
</PerspectiveCamera>
</Viewport3D.Camera>
<ModelVisual3D>
<ModelVisual3D.Content>
<AmbientLight
Color="White">
</AmbientLight >
</ModelVisual3D.Content>
</ModelVisual3D>
<!--ModelVisualD by default in center of ViewPort-->
<ModelVisual3D
x:Name="ModelA">
<ModelVisual3D.Content>
<GeometryModel3D
Geometry="{Binding
Source={StaticResource
MySphereMeshGenerator},
Path=Geometry}">
<!--turn sphere-->
<GeometryModel3D.Transform>
<RotateTransform3D >
<RotateTransform3D.Rotation>
<AxisAngleRotation3D
x:Name="Rotate"
Axis="0,1,0"/>
</RotateTransform3D.Rotation>
</RotateTransform3D>
</GeometryModel3D.Transform>
<!--video put on BackMaterial-->
<!--inside face-->
<GeometryModel3D.BackMaterial>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<VisualBrush>
<VisualBrush.Visual>
<MediaElement>
<MediaElement.Triggers>
<EventTrigger RoutedEvent="MediaElement.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<MediaTimeline
x:Name="mediaTimeline"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</MediaElement.Triggers>
</MediaElement>
</VisualBrush.Visual>
</VisualBrush>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.BackMaterial>
</GeometryModel3D>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</Grid>
<Window.Triggers>
<EventTrigger
RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Rotate"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:10"
RepeatBehavior="Forever">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
Thx to MABROUKI for the help on this one.

WPF PropertyPath Issue - Cannot resolve all property references in property path

I'm struggling to get a PropertyPath to work - I've got a Transformation in the Window Resources that I'm trying to affect via a StoryBoard - also in Window Resources ...
Heres the property path i'm using ...
(Viewport2DVisual3D.Transform).(Transform3DGroup)[0].(RotateTransform3D).(RotateTransform3D.Rotation).(AxisAngleRotation3D.Angle)
EDIT: Thanks to Anurags suggestion I've got a bit further ...
(Viewport2DVisual3D.Transform).(Transform3DGroup.Children)[0].(RotateTransform3D.Rotation).(AxisAngleRotation3D.Angle)
but now it errors with "Rotation property does not point to a DependencyProperty"
Can anyone please put me back on track?
Heres the code in full ...
<Window
x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300">
<Window.Resources>
<Transform3DGroup x:Key="WorldTranslation">
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D Axis="0,1,0" Angle="0" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Transform3DGroup>
<Storyboard x:Key="MyStoryboard">
<DoubleAnimation
Storyboard.Target="{Binding TemplatedParent}"
Storyboard.TargetProperty="(Viewport2DVisual3D.Transform).(Transform3DGroup.Children)[0].(RotateTransform3D.Rotation).(AxisAngleRotation3D.Angle)"
From="0.0" To="360" Duration="0:0:1" />
</Storyboard>
<MeshGeometry3D
x:Key="squareMeshFrontLeft"
Positions="-1,-1,1 1,-1,1 1,1,1 -1,1,1"
TriangleIndices="0 1 2 0 2 3"
TextureCoordinates="0,1 1,1 1,0 0,0" />
<DiffuseMaterial x:Key="visualHostMaterial" Brush="White" Viewport2DVisual3D.IsVisualHostMaterial="True" />
</Window.Resources>
<Viewport3D>
<Viewport3D.Camera>
<PerspectiveCamera Position="0,0,10" LookDirection="0,0,-1" />
</Viewport3D.Camera>
<Viewport2DVisual3D Material="{StaticResource visualHostMaterial}" Geometry="{StaticResource squareMeshFrontLeft}" >
<Viewport2DVisual3D.Transform>
<StaticResource ResourceKey="WorldTranslation" />
</Viewport2DVisual3D.Transform>
<StackPanel Background="Blue" Width="80" Height="80">
<Button Height="30" Margin="20">
<Button.Content>Blah</Button.Content>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource MyStoryboard}" >
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Viewport2DVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<AmbientLight Color="White" />
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</Window>
First of all, instead of DoubleAnimation, use 3D KeyFrame Animation.
and correct your StoryBoard.TargetProperty's syntax using (Transform3DGroup.Children) instead of
check this also:
http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/78170274-a585-4cd6-85ed-edfd655d34ab

Resources