Why can't I refer to ActualWidth as a value from, which I was able to use in code.
XAML:
<StackPanel>
<Button x:Name="cmdVibrate" HorizontalAlignment="Center">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation From="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualWidth}" By="200" AutoReverse="True" Duration="0:0:1" Storyboard.TargetProperty="Width"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
Mouse over me to shake
</Button>
</StackPanel>
</Window>
RelativeSource={RelativeSource Mode=Self} will probably be refering to the DoubleAnimation (which doesn't have an ActualWidth property). Try to find the ancestor Button instead
From="{Binding RelativeSource={RelativeSource AncestorType={x:Type Button}},
Path=ActualWidth}"
Xaml
<StackPanel>
<Button x:Name="cmdVibrate" HorizontalAlignment="Center">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation From="{Binding RelativeSource={RelativeSource AncestorType={x:Type Button}}, Path=ActualWidth}"
By="200"
AutoReverse="True"
Duration="0:0:1"
Storyboard.TargetProperty="Width"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
Mouse over me to shake
</Button>
</StackPanel>
Related
In WPF I have set below style for a border:
<Style TargetType="Border" x:Key="BorderBlinking">
<Style.Triggers>
<DataTrigger Binding="{Binding PopupBlinking}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="0" AutoReverse="True" Duration="0:0:0.5" SpeedRatio="3" RepeatBehavior="3x" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="1" AutoReverse="True" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
and I attach to the border like this:
<Border Grid.Row="2" x:Name="popup"
Style="{StaticResource BorderBlinking}"
CornerRadius="10,10,0,0" Height="25" Margin="0"
HorizontalAlignment="Center" Width="Auto"
VerticalAlignment="Center"
BorderBrush="DarkBlue" BorderThickness="1"
Background="AntiqueWhite">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Image Source="Common.Images;component/Images/Info.png" Height="20" Width="20" Stretch="Fill"/>
<TextBlock Margin="5" VerticalAlignment="Center" HorizontalAlignment="Left"
Background="Transparent" FontSize="12"><Run Text="this is a custom popup"/></TextBlock>
</StackPanel>
</Border>
Then from my code behind (not view model) I want to start the storyboard. I know how to start it from view model through a property "PopupBlinking" (as above in the example) bound to the datatrigger but now I need to know how to start it from code-behind (not view model).
I have modified code above and done below:
<Storyboard x:Key="Blink" >
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="0" AutoReverse="True" Duration="0:0:0.5" SpeedRatio="3" RepeatBehavior="3x" />
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="1" AutoReverse="True" Duration="0:0:0.5" />
</Storyboard>
and from code-behind:
Storyboard sb = Resources["Blink"] as Storyboard;
sb.Begin(this.popup);
Is this the correct way to do it?
You could directly start an animation like this:
popup.BeginAnimation(UIElement.OpacityProperty,
new DoubleAnimation
{
To = 0,
Duration = TimeSpan.FromSeconds(0.5),
AutoReverse = true,
RepeatBehavior = RepeatBehavior.Forever
});
I want to make TextBlock like this
But,
aTextBlock.BeginAnimation(Button.MarginProperty, myDoubleAnimation);
get this error
'System.Windows.Media.Animation.DoubleAnimation' cannot be used to animate the 'Margin' property of type 'System.Windows.Thickness'.
I have test in Xaml and get same error:
<Border CornerRadius="8" Background="Red" Margin="352,173,214,368">
<TextBlock x:Name="TestB"
Text="{Binding ElementName=MTxt,Path=Text,NotifyOnSourceUpdated=True}"
Margin="0,0,0,0"
HorizontalAlignment="Center"
Foreground="White"
FontWeight="Bold"
FontSize="16">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="TextBlock.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="TestB"
Storyboard.TargetProperty="(TextBlock.Margin)"
To="2"
Duration="0:0:1" AutoReverse="True"
RepeatBehavior="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
</Border>
What is your idea?
You need to use ThicknessAnimation for this. DoubleAnimation is for properties of Double type.
<TextBlock.Triggers>
<EventTrigger RoutedEvent="TextBlock.Loaded">
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation
Storyboard.TargetName="TestB"
Storyboard.TargetProperty="(TextBlock.Margin)"
To="2"
Duration="0:0:1" AutoReverse="True"
RepeatBehavior="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
I have a simple button (3 of them - all same except the content binding which is just an integer.
<Button Width="24" Height="24" Style="{StaticResource CircleButton}"
Background="#CC2B2B" Foreground="#FFFFFF"
Content="{Binding PinnedItemsCount,
FallbackValue=0,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged,
NotifyOnTargetUpdated=True}"
Name="ui_btnPinnedCount" />
How do I make the button boune when the data changes?
The underlying content implements INotifyPropertyChanged and the data bindings are all working, just need the button to bounce 3 times once the data changes....
Thanks!
Use animations with a DataTrigger
http://msdn.microsoft.com/en-us/library/system.windows.media.animation.bounceease.aspx
How to: Trigger an Animation When Data Changes
<Rectangle Name="myRectangle" Width="200" Height="30" Fill="Blue">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseDown">
<BeginStoryboard>
<Storyboard>
<Storyboard x:Name="myStoryboard">
<DoubleAnimation From="30" To="200" Duration="00:00:3"
Storyboard.TargetName="myRectangle"
Storyboard.TargetProperty="Height">
<DoubleAnimation.EasingFunction>
<BounceEase Bounces="2" EasingMode="EaseOut"
Bounciness="2" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
This makes it fade in and out, replace with any sotryboard animation I imagine.
<Button Width="24" Height="24" Style="{StaticResource CircleButton}" Background="#CC2B2B" Foreground="#FFFFFF"
Content="{Binding PinnedCount, FallbackValue=0, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, NotifyOnTargetUpdated=True}"
Name="ui_btnPinnedCount">
<Button.Triggers>
<EventTrigger RoutedEvent="Binding.TargetUpdated">
<BeginStoryboard>
<Storyboard AutoReverse="True">
<DoubleAnimation Storyboard.TargetName="ui_btnPinnedCount" Storyboard.TargetProperty="Opacity" To=".1" Duration="0:0:.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
I want the value To="200.0" will be equal to the grid size automaticaly
<ListBox HorizontalAlignment="Stretch" Grid.Column="1"
Margin="12,90,12,12"
Name="listBox1"
Opacity="0.6"
VerticalAlignment="Stretch" BorderThickness="0.5" BorderBrush="White">
<ListBox.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="listBox1"
Storyboard.TargetProperty="Width"
From=" 0.0" To="200.0" />
<DoubleAnimation Storyboard.TargetName="listBox1"
Storyboard.TargetProperty="Height"
From="0.0" To="200.0" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ListBox.Triggers>
</ListBox>
try something like this:
<Grid Name="test">
<ListBox HorizontalAlignment="Stretch" Name="listBox1"
VerticalAlignment="Stretch" BorderThickness="0.5" BorderBrush="Black">
<ListBox.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="listBox1"
Storyboard.TargetProperty="Width"
From="0.0" To="{Binding ElementName=test,Path=ActualWidth}" />
<DoubleAnimation Storyboard.TargetName="listBox1"
Storyboard.TargetProperty="Height"
From="0.0" To="{Binding ElementName=test,Path=ActualHeight}" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ListBox.Triggers>
</ListBox>
</Grid>
I used ElementName binding instead of a RelativeSource binding because I can't make RelativeSource to work. I guess because the story board is not part of the same visual/control tree as the listbox.
I've set up a Transformation and a Storyboard as local resources, but when I trigger the storyboard from a button I get the following error:
{"'WorldTranslation' name cannot be found in the name scope of 'System.Windows.Controls.Button'."}
Can someone point me in the right direction please?
<Window.Resources>
<Transform3DGroup x:Key="WorldTranslation">
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="myAngleRotation" Axis="0,1,0" Angle="0" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Transform3DGroup>
<Storyboard x:Key="MyStoryboard">
<DoubleAnimation
Storyboard.TargetName="WorldTranslation"
Storyboard.TargetProperty="(Transform3DGroup).(RotateTransform3D).(RotateTransform3D.Rotation).(AxisAngleRotation3D.Angle)"
From="0"
To="360"
Duration="0:0:1"
/>
</Storyboard>
</Window.Resources>
And heres the button xaml ...
<Button Height="20" Width="100">
<Button.Content>Blah</Button.Content>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource MyStoryboard}" >
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
There are several things wrong in you XAML. I will start with the transform inline and then refactor it to resources. I changed to a 2D RotateTransform as not to complicate matters unnecessarily.
We start with:
<Button Height="20" Width="100"
RenderTransformOrigin=".5,.5"
Content="Blah">
<Button.RenderTransform>
<RotateTransform Angle="0" x:Name="MyAnimatedTransform"/>
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyAnimatedTransform"
Storyboard.TargetProperty="(RotateTransform.Angle)"
From="0.0" To="360" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
Then we take out the StoryBoard:
<Window.Resources>
<Storyboard x:Key="MyStoryBoard">
<DoubleAnimation
Storyboard.TargetName="MyAnimatedTransform"
Storyboard.TargetProperty="(RotateTransform.Angle)"
From="0.0" To="360" Duration="0:0:.3" />
</Storyboard>
</Window.Resources>
<Grid>
<Button Height="20" Width="100"
RenderTransformOrigin=".5,.5"
Content="Blah">
<Button.RenderTransform>
<RotateTransform Angle="0" x:Name="MyAnimatedTransform"/>
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource MyStoryBoard}"/>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
And finally the RotateTransform. Referencing this by the Storyboard.TargetName property does not work here. You need the Storyboard.Target property:
<Window.Resources>
<RotateTransform Angle="0" x:Key="WorldTransform"/>
<Storyboard x:Key="MyStoryBoard">
<DoubleAnimation
Storyboard.Target="{Binding TemplatedParent}"
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
From="0.0" To="360" Duration="0:0:.3" />
</Storyboard>
</Window.Resources>
<Grid>
<Button Height="20" Width="100"
RenderTransformOrigin=".5,.5"
Content="Blah">
<Button.RenderTransform>
<StaticResource ResourceKey="WorldTransform" />
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource MyStoryBoard}"/>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
EDIT: due to bonus question ;-)
Suppose you want the transform to take place on the containing grid. Simply catch the Button.Click event in the Grid (events are routed remember?) and put the trigger there. The TemplatedParent will now be the grid and no longer the button.
<Grid RenderTransformOrigin=".5,.5">
<Grid.RenderTransform>
<StaticResource ResourceKey="WorldTransform"/>
</Grid.RenderTransform>
<Grid.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource MyStoryBoard}"/>
</EventTrigger.Actions>
</EventTrigger>
</Grid.Triggers>
<Button Height="20" Width="100"
Content="Blah">
</Button>
</Grid>