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>
Related
So I am trying to make an animation for a memory game project. The animation I am having trouble with is the flip animation. I have no problem making the image flip, but I want to make it change the image after the scale.x went from -1 to 0. This is what I have so far:
<Window.Resources>
<ControlTemplate TargetType="Button" x:Key="ImageButton">
<Image Source="gurbe1.jpg"
x:Name="image"
Height="{TemplateBinding Height}"
Width="{TemplateBinding Width}" />
</ControlTemplate>
</Window.Resources>
<Grid>
<Button Template="{StaticResource ImageButton}"
Width="100" Click="Button_Click" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<ScaleTransform x:Name="AnimatedScaleTransform" ScaleX="-1" />
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="0" Duration="0:0:1" Storyboard.TargetName="AnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
<DoubleAnimation To="1" BeginTime="0:0:1" Duration="0:0:1" Storyboard.TargetName="AnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
</Window>
I already looked on here and tried some stuff, but I couldn't get it to work :
xaml change image source
How can I do multiple animations in a single storyboard in C#/XAML?
For people also having this problem, it's as simple as this:
<Grid>
<Button Width="100" Click="Button_Click" RenderTransformOrigin="0.5,0.5" Height="100">
<Button.RenderTransform>
<ScaleTransform x:Name="AnimatedScaleTransform" ScaleX="-1" />
</Button.RenderTransform>
<Button.Template>
<ControlTemplate>
<Image Source="gurbe1.jpg"/>
</ControlTemplate>
</Button.Template>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="0" Duration="0:0:1" Storyboard.TargetName="AnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Width="100" Click="Button_Click" RenderTransformOrigin="0.5,0.5" Height="100">
<Button.RenderTransform>
<ScaleTransform x:Name="AnimatedScaleTransform2" ScaleX="0" />
</Button.RenderTransform>
<Button.Template>
<ControlTemplate>
<Image Source="gurbe2.jpg"/>
</ControlTemplate>
</Button.Template>
<Button.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0" To="1" BeginTime="0:0:2.3" Duration="0:0:1" Storyboard.TargetName="AnimatedScaleTransform2" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
It's not smooth atm, but you can get pretty close by adjusting the begin time
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 problem, while writing a program for drawing figures from a text file. My program is currently reading figures from a text file and drawing them on the canvas, but I have problem with MouseEnter and MouseLeave Events.
I would like the polygon to change colour if there is the mouse over it. How can I do this?
The app is written in WPF, using the Canvas control.
You could use event triggers for this. For example:
<Canvas>
<Canvas.Resources>
<Style TargetType="Polygon">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1"
Storyboard.TargetProperty="(Polygon.Fill).(SolidColorBrush.Color)"
To="Yellow"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1"
Storyboard.TargetProperty="(Polygon.Fill).(SolidColorBrush.Color)"
To="Blue"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Canvas.Resources>
<Polygon Fill="Blue" Canvas.Left="100" Canvas.Top="50">
<Polygon.Points>
<Point>0,0</Point>
<Point>20,0</Point>
<Point>25,5</Point>
<Point>20,20</Point>
<Point>0,20</Point>
<Point>0,0</Point>
</Polygon.Points>
</Polygon>
</Canvas>
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 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>
<!-- ... -->