There's an weird issue I've found with using VisualBrush and BitmapEffect at once. As I try to animate an element with BitmapEffect there's no problem. But as I create reflection with VisualBrush in XAML, the animation simply jumps from start to end. Here's the code:
1 <Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
2 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ShowGridLines="True">
3 <Grid.ColumnDefinitions>
4 <ColumnDefinition />
5 <ColumnDefinition Width="2.5*" />
6 </Grid.ColumnDefinitions>
7
8 <StackPanel Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center">
9
10 <Border Name="bTest" BorderThickness="2" BorderBrush="SkyBlue">
11 <Border.Background>
12 <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
13 <GradientStop Color="#FFD9E7FB" Offset="0" />
14 <GradientStop Color="#FFA8C8F2" Offset=".25" />
15 <GradientStop Color="#E1EDFD" Offset="1" />
16 </LinearGradientBrush>
17 </Border.Background>
18
19 <StackPanel Orientation="Vertical" Margin="10">
20 <Rectangle Height="100" Width="120" HorizontalAlignment="Center" RenderTransformOrigin=".5, .5" Fill="Blue">
21 <Rectangle.BitmapEffect>
22 <DropShadowBitmapEffect ShadowDepth="3" Softness=".4" />
23 </Rectangle.BitmapEffect>
24 <Rectangle.RenderTransform>
25 <ScaleTransform />
26 </Rectangle.RenderTransform>
27 <Rectangle.Triggers>
28 <EventTrigger RoutedEvent="Image.MouseEnter">
29 <EventTrigger.Actions>
30 <BeginStoryboard>
31 <Storyboard>
32 <DoubleAnimation To="1.5" Duration="0:0:1"
33 Storyboard.TargetProperty="(Image.RenderTransform).(ScaleTransform.ScaleX)"/>
34 <DoubleAnimation To="1.5" Duration="0:0:1"
35 Storyboard.TargetProperty="(Image.RenderTransform).(ScaleTransform.ScaleY)"/>
36 </Storyboard>
37 </BeginStoryboard>
38 </EventTrigger.Actions>
39 </EventTrigger>
40 <EventTrigger RoutedEvent="Image.MouseLeave">
41 <EventTrigger.Actions>
42 <BeginStoryboard>
43 <Storyboard>
44 <DoubleAnimation To="1" Duration="0:0:1"
45 Storyboard.TargetProperty="(Image.RenderTransform).(ScaleTransform.ScaleX)"/>
46 <DoubleAnimation To="1" Duration="0:0:1"
47 Storyboard.TargetProperty="(Image.RenderTransform).(ScaleTransform.ScaleY)"/>
48 </Storyboard>
49 </BeginStoryboard>
50 </EventTrigger.Actions>
51 </EventTrigger>
52 </Rectangle.Triggers>
53 </Rectangle>
54 <TextBlock HorizontalAlignment="Center">Picture</TextBlock>
55 </StackPanel>
56 </Border>
57
58 <!-- Reflection -->
59
60 <Rectangle Width="130" Height="150" Margin="1">
61 <Rectangle.Fill>
62 <VisualBrush Visual="{Binding ElementName=bTest}" />
63 </Rectangle.Fill>
64 <Rectangle.RenderTransform>
65 <ScaleTransform ScaleY="-1" CenterY="75" />
66 </Rectangle.RenderTransform>
67 <Rectangle.OpacityMask>
68 <LinearGradientBrush StartPoint="0,1" EndPoint="0,0">
69 <LinearGradientBrush.GradientStops>
70 <GradientStop Color="sc#0.5, 1, 1, 1" Offset="0" />
71 <GradientStop Color="sc#0.01, 1, 1, 1" Offset="0.55" />
72 </LinearGradientBrush.GradientStops>
73 </LinearGradientBrush>
74 </Rectangle.OpacityMask>
75 </Rectangle>
76
77 </StackPanel>
78 </Grid>
79
Paste it in XamlPad and you'll see there's no animation. Now remove the Reflection section OR Rectangle.BitmapEffect - and it works.
A bug
VisualBrush + BitmapEffect + Animation = Bug?
Haseeb Ahmad
Yes, as I said: this code could work but when I provided it, I could not test it ;)
VisualBrush should display the content, but not the animations.
aniljain50
Jerry K
This is a known issue. I am afraid there is no current plan to enable this for V1.
Thanks and regards.
Rahul Patil [MSFT]
manix
That's sad.. but thanks for answer
Leslie Sheldon
1. I'm using beta 2 as well
2. In your code, reflecting rectangle gets animated, but not it's content.
3. Why animate reflecting rectangle That's what VisualBrush does for me.
TerrariumNewbie
oh, you're right: animation is displayed (but in a strange way...)
So yes, you seems to be correct: when using a BitmapEffect and VisualBrush, animations are not displayed
Well, I don't understand why so yeah, maybe it's a bug
Chandrak Bhavsar
>VisualBrush will display the content, but not the animations.
Certainly it does. Just remove <BitmapEffect> from my code and you'll see it :)
tamlin2
You need to add en EventTrigger with a TargetName that point to your Rectangle used for the Reflexion.
Something like this (not tested since I've no VS or XAMLPad on that machine)
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="2.5*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center">
<Border Name="bTest" BorderThickness="2" BorderBrush="SkyBlue">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FFD9E7FB" Offset="0" />
<GradientStop Color="#FFA8C8F2" Offset=".25" />
<GradientStop Color="#E1EDFD" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<StackPanel Orientation="Vertical" Margin="10">
<Rectangle Height="100" Width="120" HorizontalAlignment="Center" RenderTransformOrigin=".5, .5" Fill="Blue">
<Rectangle.BitmapEffect>
<DropShadowBitmapEffect ShadowDepth="3" Softness=".4" />
</Rectangle.BitmapEffect>
<Rectangle.RenderTransform>
<ScaleTransform />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="1.5" Duration="0:0:1"
Storyboard.TargetProperty="(Image.RenderTransform).(ScaleTransform.ScaleX)"/>
<DoubleAnimation To="1.5" Duration="0:0:1"
Storyboard.TargetProperty="(Image.RenderTransform).(ScaleTransform.ScaleY)"/>
<DoubleAnimation To="1.5" Duration="0:0:1"
Storyboard.TargetName = "rectReflection"
Storyboard.TargetProperty="(Image.RenderTransform).(ScaleTransform.ScaleX)"/>
<DoubleAnimation To="1.5" Duration="0:0:1"
Storyboard.TargetName = "rectReflection"
Storyboard.TargetProperty="(Image.RenderTransform).(ScaleTransform.ScaleY)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="1" Duration="0:0:1"
Storyboard.TargetName = "rectReflection"
Storyboard.TargetProperty="(Image.RenderTransform).(ScaleTransform.ScaleX)"/>
<DoubleAnimation To="1" Duration="0:0:1"
Storyboard.TargetName = "rectReflection"
Storyboard.TargetProperty="(Image.RenderTransform).(ScaleTransform.ScaleY)"/>
<DoubleAnimation To="1" Duration="0:0:1"
Storyboard.TargetProperty="(Image.RenderTransform).(ScaleTransform.ScaleX)"/>
<DoubleAnimation To="1" Duration="0:0:1"
Storyboard.TargetProperty="(Image.RenderTransform).(ScaleTransform.ScaleY)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
<TextBlock HorizontalAlignment="Center">Picture</TextBlock>
</StackPanel>
</Border>
<!-- Reflection -->
<Rectangle Width="130" Height="150" Margin="1" Name="rectReflection">
<Rectangle.Fill>
<VisualBrush Visual="{Binding ElementName=bTest}" />
</Rectangle.Fill>
<Rectangle.RenderTransform>
<ScaleTransform ScaleY="-1" CenterY="75" />
</Rectangle.RenderTransform>
<Rectangle.OpacityMask>
<LinearGradientBrush StartPoint="0,1" EndPoint="0,0">
<LinearGradientBrush.GradientStops>
<GradientStop Color="sc#0.5, 1, 1, 1" Offset="0" />
<GradientStop Color="sc#0.01, 1, 1, 1" Offset="0.55" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
</StackPanel>
</Grid>
RandyTM
That has no effect. It animates element only if this element has no BitmapEffect.
Delboy
Just to be sure, I've tested the code again: it's working.
Not exactly how you want, but if you modify the animation for the Reflection rectangle, it should be fine.
BTW, I'm using the Beta 2 of WinFX :)
Bye.
msraja
I've tested the code I've provided and it works fine for me....