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>
Related
I'm hiding/showing a stackpanel with an animation using a Togglebutton defining this animation as follows:
<StackPanel Orientation="Horizontal">
<ToggleButton Width="48" Height="24" Margin="0,0,0,4" HorizontalAlignment="Left" FontFamily="Marlett" Content="6" >
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard>
<Storyboard x:Name="HideGrid">
<DoubleAnimation Storyboard.TargetName="stackPanelName" Storyboard.TargetProperty="Height" From="0" To="520" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="5"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<BeginStoryboard>
<Storyboard x:Name="ShowGrid">
<DoubleAnimation Storyboard.TargetName="stackPanelName" Storyboard.TargetProperty="Height" From="520" To="0" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="6"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
<TextBlock Margin="4">Show/Hide</TextBlock>
</StackPanel>
This is the stackpanel to which Storyboard.TargetName="stackPanelName" is referencing:
<StackPanel x:Name="stackPanelName">
<StackPanel Orientation="Horizontal" Margin="8">
<TextBlock Width="160">Name</TextBlock>
<TextBox Width="148" Margin="0,0,16,0" Text="{Binding Name}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="8">
<TextBlock Width="160">Surname</TextBlock>
<TextBox Width="148" Margin="0,0,16,0" Text="{Binding Surname}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="8">
<TextBlock Width="160">Phone number</TextBlock>
<TextBox Width="148" Margin="0,0,16,0" Text="{Binding PhoneNumber}"/>
</StackPanel>
</StackPanel>
This works perfectly, but i have to use this kind of togglebutton in several places and i'd like not to put <ToggleButton.Triggers>...</ToggleButton.Triggers> again and again for each togglebutton i have to use.
So i'm trying to define a template in a style...something like this:
<Style TargetType="{x:Type ToggleButton}" x:Key="tgButtonStyle1">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="2" Background="{TemplateBinding Background}" Storyboard.TargetName="{TemplateBinding Name}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard>
<Storyboard x:Name="HideStackPanel">
<DoubleAnimation Storyboard.TargetName="{TemplateBinding Storyboard.TargetName}" Storyboard.TargetProperty="Height" From="0" To="320" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="5"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<BeginStoryboard>
<Storyboard x:Name="ShowStackPanel">
<DoubleAnimation Storyboard.TargetName="{TemplateBinding Storyboard.TargetName}" Storyboard.TargetProperty="Height" From="320" To="0" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="6"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
And then:
<ToggleButton Width="48" Height="24" Margin="0,0,0,4" HorizontalAlignment="Left" FontFamily="Marlett" Content="6" Style="{Binding tgButtonStyle1}" Storyboard.TargetName="stackPanelName">
The key here is that in the trigger at <DoubleAnimation Storyboard.TargetName="{TemplateBinding Storyboard.TargetName}" ....> i'm using a templatebinding thinking that it would "catch" the value specified at <ToggleButton.... Storyboard.TargetName="stackPanelName" .../>.
But it has no effect at all, no animation.
What am i doing wrong? Is there something left to do?
Thanks.
I have this:
<Border.Triggers>
<EventTrigger RoutedEvent="Border.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard TargetProperty="Background">
<ColorAnimation From="Red" To="Green" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Border.Triggers>
I want to change the background when hovering over with mouse, like gradientstop or simple colors, but I get errors. And where to lookup which dependency properties I have to use at TargetProperty.
for example this doesnt work either
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard TargetProperty="Background.GradientStops[1].Color">
<ColorAnimation From="Red"
To="Green"
Duration="0:0:2"
AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard TargetProperty="Background.GradientStops[1].Offset">
<DoubleAnimation From="0"
To="1"
Duration="0:0:2"
AutoReverse="True"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Grid.Triggers>
You should set the Background property of the Border to the Brush that you want to animate. If there is no brush there is nothing to animate. The following markup works. It animates the Color property of the SolidColorBrush that is set as the Background of the Border:
<Border Background="Transparent">
<Border.Triggers>
<EventTrigger RoutedEvent="Border.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<ColorAnimation From="Red" To="Green" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Border.Triggers>
<TextBlock>Border....</TextBlock>
</Border>
for example this doesnt work either
Same thing here. If you want to animate the Color property of a GradientStop you need to make sure that there actually is a GradientStop to animate, i.e. you should set the Background property of the Grid to a LinearGradientBrush. This works:
<Grid>
<Grid.Background>
<LinearGradientBrush>
<GradientStop />
<GradientStop />
</LinearGradientBrush>
</Grid.Background>
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard TargetProperty="Background.GradientStops[0].Color">
<ColorAnimation From="Red"
To="Green"
Duration="0:0:2"
AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard TargetProperty="Background.GradientStops[1].Offset">
<DoubleAnimation From="0"
To="1"
Duration="0:0:2"
AutoReverse="True"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Grid.Triggers>
<TextBlock>Grid...</TextBlock>
</Grid>
I have multiple points and I want to draw lines connecting that points with WPF, but I want to see them drawing slowly, and I need to do that programmatically, how can I do that?
Thanks.
You can try something like this:
<Grid>
<Grid.Triggers>
<EventTrigger RoutedEvent="MouseDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard TargetName="MyLine">
<DoubleAnimation Storyboard.TargetProperty="X2" To="100" Duration="0:0:5"/>
<DoubleAnimation Storyboard.TargetProperty="Y2" To="100" Duration="0:0:5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Grid.Triggers>
<Line X1="10" Y1="10" X2="20" Y2="20" Stroke="Black" Name="MyLine"/>
</Grid>
When you click on the line, you'll see it grow. You can attach starting this storyboard to whatever event or code you want, I just used a mousedown for demonstration purposes.
If you want to draw multiple lines, you can do something like this:
<Grid>
<Grid.Triggers>
<EventTrigger RoutedEvent="Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Line1" Storyboard.TargetProperty="X2" To="100" Duration="0:0:5"/>
<DoubleAnimation Storyboard.TargetName="Line1" Storyboard.TargetProperty="Y2" To="100" Duration="0:0:5"/>
<DoubleAnimation Storyboard.TargetName="Line2" Storyboard.TargetProperty="X2" To="200" Duration="0:0:5" BeginTime="0:0:5"/>
<DoubleAnimation Storyboard.TargetName="Line2" Storyboard.TargetProperty="Y2" To="0" Duration="0:0:5" BeginTime="0:0:5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Grid.Triggers>
<Line X1="10" Y1="10" X2="10" Y2="10" Stroke="Black" Name="Line1"/>
<Line X1="100" Y1="100" X2="100" Y2="100" Stroke="Black" Name="Line2"/>
</Grid>
And, of course, it's quite possible to construct these storyboards on the fly if you can't declare them ahead of time in XAML.
I currently have the XAML:
<Grid Name="WindowGrid">
<Grid Height="66" HorizontalAlignment="Stretch" Margin="0" Name="ControlsGrid" VerticalAlignment="Bottom" Background="#B4000000" />
</Grid>
What I want is when the mouse enters the window (or even WindowGrid, preferably), the ControlGrid slides up, and vice versa (when the cursor leaves, it slides down). I have little experience in WPF/XAML, having most experience in WinForms. I understand there is a way to do this with storyboards/triggers, but the examples I've seen are too confusing.
Use event triggers to perform this:
<Grid Name="WindowGrid">
<Grid.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ControlsGrid"
Storyboard.TargetProperty="(Grid.Height)"
From="0"
To="66"
Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ControlsGrid"
Storyboard.TargetProperty="(Grid.Height)"
From="66"
To="0"
Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<!--
This is a sample content to demostrate animation;
Without it 'WindowGrid' will be collapsed.
-->
<ListBox />
<Grid Margin="0" Name="ControlsGrid" VerticalAlignment="Bottom" Background="#B4000000" />
</Grid>
I think the title of my question is some mess! Sorry!
I have two Grid in same window. First named loginBox and second is operationBox. I want to disappear loginBox after validating user, using DoubleAnimation class and then operationBox will be appear in same time (during 00:00:01).
Scenario:
Grid named loginBox is showing when window shown. After user clicked on btnLogin, loginBox start disappearing using DoubleAnimation on it's Opacity property and in same time, operationBox will be appear using same technique.
After ending operation, user clicks on btnLogout and operationBox start disappearing and loginBox appearing by DoubleAnimation.
The problem is because operationBox grid is overloginBox grid, User can't do anything in loginbox! How ever operationBox.Opacity=0 ;but nothing can do with loginBox grid at start up!
CODE:
<!--Login Box-->
<Grid Background="Transparent" Name="loginBox" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button Content="ورود" Height="23" HorizontalAlignment="Left" Margin="344,199,0,0" Name="btnLogin" VerticalAlignment="Top" Width="75" IsDefault="True"
Click="btnLogin_Click" >
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="loginBox"
Storyboard.TargetProperty="(Grid.Opacity)"
From="1" To="0" Duration="0:0:1" AutoReverse="False" />
<DoubleAnimation
Storyboard.TargetName="operationBox"
Storyboard.TargetProperty="(Grid.Opacity)"
From="0" To="1" Duration="0:0:1" AutoReverse="False" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
.
.
.
</Grid>
.
.
.
<!--Operation Box-->
<Grid Background="Transparent" Name="operationBox" Opacity="0" Visibility="Hidden">
...
<Button Content="خروج" Height="23"
HorizontalAlignment="Left" Margin="15,324,0,0" Name="btnLogout"
VerticalAlignment="Top" Width="75" Click="btnLogout_Click">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="operationBox"
Storyboard.TargetProperty="(Grid.Opacity)"
From="1" To="0" Duration="0:0:1" AutoReverse="False" />
<DoubleAnimation
Storyboard.TargetName="loginBox"
Storyboard.TargetProperty="(Grid.Opacity)"
From="0" To="1" Duration="0:0:1" AutoReverse="False" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
and finally, Sorry for bad grammar! :)
Try adding operationBox.IsHitTestVisible="False"
Update
Try to add something like this
<Grid Grid.ZIndex="4" Background="Green" Opacity="0.4" Name="loginBox" VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.Style>
<Style>
<Style.Triggers>
<Trigger Property="Grid.Opacity" Value="0.0">
<Setter Property="Grid.IsHitTestVisible" Value="False"/>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Style>
<!-- ... -->