I have this xaml:
<Window x:Class="StoryboardTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="RenderTransformOrigin" Value="0.5 0.5"/>
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform x:Name="rt" Angle="0"/>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="Start">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation From="0" To="100" Storyboard.TargetName="pbar" Storyboard.TargetProperty="Value" Duration="0:0:6"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Grid.Row="1" Content="1" x:Name="btn1">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard x:Name="bs1">
<Storyboard>
<DoubleAnimation From="0" To="90" Storyboard.TargetProperty="RenderTransform.Angle" Duration="0:0:1" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Grid.Row="1" Grid.Column="1" Content="2" x:Name="btn2">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard x:Name="bs2">
<Storyboard>
<DoubleAnimation From="0" To="90" Storyboard.TargetProperty="RenderTransform.Angle" Duration="0:0:1" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Grid.Row="1" Grid.Column="2" Content="3" x:Name="btn3">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard x:Name="bs3">
<Storyboard>
<DoubleAnimation From="0" To="90" Storyboard.TargetProperty="RenderTransform.Angle" Duration="0:0:1" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<ProgressBar x:Name="pbar" Maximum="100" Grid.Row="2" Grid.ColumnSpan="3"/>
</Grid>
</Window>
As you can see there are 4 buttons(Start button - the main one, buttons 1, 2 and 3) and a progress bar. When I click buttons 1,2 or 3 they rotate slightly. My question is how can I trigger that rotations(which are described by respective storyboards) in Start's button EventTrigger? Is it possible to achieve this not writing 3 other storyboards in the Start button but invoking already attached storyboards for buttons 1,2,3 in xaml only?
<Window.Resources>
<Storyboard x:Key="StoryboardName">
<DoubleAnimation From="0" To="90" Storyboard.TargetProperty="RenderTransform.Angle" Storyboard.TargetName="btn1" Duration="0:0:1" AutoReverse="True"/>
<DoubleAnimation From="0" To="90" Storyboard.TargetProperty="RenderTransform.Angle" Storyboard.TargetName="btn2" Duration="0:0:1" AutoReverse="True"/>
<DoubleAnimation From="0" To="90" Storyboard.TargetProperty="RenderTransform.Angle" Storyboard.TargetName="btn3" Duration="0:0:1" AutoReverse="True"/>
</Storyboard>
</Window.Resources>
<Button Grid.Column="1" Content="Start">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Storyboard="{StaticResource StoryboardName}"/>
</EventTrigger>
</Button.Triggers>
</Button>
Doubleanimations declared in storyboard will run simultaneously.
<Button>
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=start, Path=IsPressed}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
...
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
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
How to make the animation start of the TextBlock when entering (hovering) the button
In TextBlock I want that the <EventTrigger RoutedEvent will be in Input2 at MouseEnter, How can I do that
<EventTrigger RoutedEvent=Input2.MouseEnter doesn't recognized
The button:
<Button Grid.Row="0" Name="Input2" Click="Input_Click" MouseEnter="Input_MouseEnter" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}">
<Button.Template>
<ControlTemplate>
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<Image Source= "C:\Users\Me\input.png"
Width="40"
Height="40"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
The TextBlock:
<TextBlock Grid.Row="0" Name="Input_Name1" Text="Input" FontSize="40" FontFamily="/10KHours;component/Font_count/#Dancing Script" VerticalAlignment="Center" Height="48" Margin="65.346,33.6,-102.081,36">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="TextBlock.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Input_Name1"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="true" RepeatBehavior="1x">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
The basic idea to change the style of the TextBlock is totally correct. Add a DataTrigger and bind it to the the IsMouseOver of the Button you are going to hover. Using the IsMouseOver is propaply the simplest way to get the desired information. Here is a minimal example:
<Button x:Name="btn" Content="Hover me"/>
<TextBlock x:Name="tb" Text="Input">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=btn, Path=IsMouseOver}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:1"
AutoReverse="true" RepeatBehavior="1x">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
Below my rectangle in WPF:
<Rectangle Margin="5,0" HorizontalAlignment="Left" Width="380" Height="25" Fill="LightYellow" Stroke="Orange" StrokeThickness="2" RadiusX="8" RadiusY="8"/>
I would like to start bliking for some seconds (and then stop) the rectangle stroke property when a property "StartBlinking" in view model changes from false to true.
I would like to implement storyboard in xaml not in c# code.
How can I do this?
I have tried this but not working:
<Rectangle Margin="5,0" HorizontalAlignment="Left" Width="380" Height="25" Fill="LightYellow" Stroke="Orange" StrokeThickness="2" RadiusX="8" RadiusY="8">
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Style.Resources>
<Storyboard x:Key="flashAnimation" >
<DoubleAnimation Storyboard.TargetProperty="Stroke" From="1" To="0" AutoReverse="True" Duration="0:0:0.5" RepeatBehavior="Forever" />
</Storyboard>
</Style.Resources>
</Style>
</Rectangle.Style>
</Rectangle>
I am using C# and .NET 3.5 in Visual Studio 2008.
You could animate the Opacity property of the Stroke using a DataTrigger and a Storyboard:
<Rectangle Margin="5,0" HorizontalAlignment="Left" Width="380" Height="25" Fill="LightYellow"
Stroke="Orange" StrokeThickness="2" RadiusX="8" RadiusY="8">
<Rectangle.Style>
<Style TargetType="Rectangle">
<Style.Triggers>
<DataTrigger Binding="{Binding StartBlinking}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Stroke.(SolidColorBrush.Opacity)"
To="0" AutoReverse="True" Duration="0:0:0.5" RepeatBehavior="6x" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Stroke.(SolidColorBrush.Opacity)"
To="1" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
My xaml is
<Grid DockPanel.Dock="Top" >
<DockPanel Background="#bdbec0" MouseEnter="showTopMenu_MouseEnter" HorizontalAlignment="Stretch" Height="55" >
<Button HorizontalAlignment="Center" VerticalAlignment="Center">Down</Button>
</DockPanel>
<DockPanel Background="#151515" LastChildFill="True" Visibility="Collapsed" Name="TopMenuArea" Height="55">
some controls here in a horizontal strip , by default its hidden and when some one click on top button its visible and it wil be hidden when some one click outside this area
</DockPanel>
And code for button mouse over is
private void showTopMenu_MouseEnter(object sender, MouseEventArgs e)
{
TopMenuArea.Visibility = Visibility.Visible;
}
How can i apply a animation effect while changing the visibility of TopMenuArea ? Is any way to do it from xaml directly?
Eventtrigger
<DockPanel Background="#bdbec0" MouseEnter="showTopMenu_MouseEnter" HorizontalAlignment="Stretch" Height="55" >
<DockPanel.Triggers>
<EventTrigger RoutedEvent="DockPanel.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="TopMenuArea"
From="0.0" To="1.0" Duration="0:0:1"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="DockPanel.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="TopMenuArea"
From="1.0" To="0" Duration="0:0:1"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</DockPanel.Triggers>
<Button HorizontalAlignment="Center" VerticalAlignment="Center">Down</Button>
</DockPanel>
<DockPanel Background="#151515" LastChildFill="True" Visibility="Collapsed" Opacity="0" Name="TopMenuArea" Height="55">
</DockPanel>
Or use a style for fade in and out (with mouse enter / exit eventhandler like you did it)
<Style TargetType="FrameworkElement" x:Key="VisibleAnimation">
<Setter Property="Visibility" Value="Collapsed"/>
<Setter Property="Opacity" Value="0"/>
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
From="0.0" To="1.0" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
<DockPanel Background="#151515" LastChildFill="True" Style="{StaticResource VisibleAnimation}" Name="TopMenuArea" Height="55">
Just define the style in your App Resources, or in the local Window or UserControl. You reuse the Animation style for any control.
use this in your Stackpanel
<StackPanel Background="Red" HorizontalAlignment="Stretch" >
<StackPanel.Triggers>
<EventTrigger RoutedEvent="StackPanel.MouseLeftButtonDown" >
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="TopMenuArea"
From="1.0" To="0" Duration="0:0:1"></DoubleAnimation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TopMenuArea"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:2" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</StackPanel.Triggers>
<Label HorizontalAlignment="Center">Area outside top panel . Clicking here will hide top panel again</Label>
</StackPanel>
It's an old question, but I've put together an open source library to allow fading and/or translation on Visibility changed, Loaded or binding.
You can find it at SciChart.Wpf.UI.Transitionz on Github and on NuGet.
Usage:
<Window x:Class="WpfApplication15.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:tz="http://schemas.abtsoftware.co.uk/transitionz"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="b2vc"></BooleanToVisibilityConverter>
</Window.Resources>
<Grid>
<CheckBox x:Name="CheckBox" Content="Is Visible?" IsChecked="False"></CheckBox>
<TextBlock Text="Hello World!" FontSize="44" HorizontalAlignment="Center" VerticalAlignment="Center"
Visibility="Collapsed"
tz:Transitionz.Opacity="{tz:OpacityParams From=0, To=1, Duration=200, TransitionOn=Visibility}"
tz:Transitionz.Translate="{tz:TranslateParams From='10,0', To='0,0', Duration=200, TransitionOn=Visibility}"
tz:Transitionz.Visibility="{Binding ElementName=CheckBox, Path=IsChecked, Converter={StaticResource b2vc}}"/>
</Grid>
</Window>
Which results in:
This would be a good start.
You can just add one c# file and set property like below.
common:VisibilityAnimation.AnimationType="Fade"
here is a sample example
<Grid DockPanel.Dock="Top">
<DockPanel Background="#bdbec0"
x:Name="topPanel"
HorizontalAlignment="Stretch"
Height="55">
<Button HorizontalAlignment="Center"
VerticalAlignment="Center">Down</Button>
</DockPanel>
<DockPanel Background="#151515"
LastChildFill="True"
Name="TopMenuArea"
IsHitTestVisible="False"
Height="55">
<TextBlock Foreground="White"> some controls here in a horizontal strip , by default its hidden and when some one click on top button its visible and it wil be hidden when some one click outside this area</TextBlock>
<DockPanel.Style>
<Style TargetType="DockPanel">
<Setter Property="Opacity"
Value="0" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver,ElementName=topPanel}"
Value="true">
<Setter Property="Opacity"
Value="1" />
</DataTrigger>
</Style.Triggers>
</Style>
</DockPanel.Style>
</DockPanel>
</Grid>
in the sample above I have set IsHitTestVisible="False" on the TopMenuArea dockPanel, as i can see that it is on top of previous (source for trigger panel)
other option is to use the TopMenuArea as the source if it is on the top
sample
<Grid DockPanel.Dock="Top">
<DockPanel Background="#bdbec0"
HorizontalAlignment="Stretch"
Height="55">
<Button HorizontalAlignment="Center"
VerticalAlignment="Center">Down</Button>
</DockPanel>
<DockPanel Background="#151515"
LastChildFill="True"
Name="TopMenuArea"
Height="55">
<TextBlock Foreground="White"> some controls here in a horizontal strip , by default its hidden and when some one click on top button its visible and it wil be hidden when some one click outside this area</TextBlock>
<DockPanel.Style>
<Style TargetType="DockPanel">
<Setter Property="Opacity"
Value="0" />
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Opacity"
Value="1" />
</Trigger>
</Style.Triggers>
</Style>
</DockPanel.Style>
</DockPanel>
</Grid>
give it a try and see if it is close to what you are looking for.
both of above just switch the opacity between 0 & 1, you may also use animation to make a fade effect if needed.
I come up with a way to gradually show Grid and hide Grid using ScaleTransform.
The ScaleTransform is set to X=0 Y=0 to hide, X=1 Y=1 to show,
and Trigger using Tag property, as the code below:
At ViewModel:
private string _helpVisiblilityTag = "hide";
public string HelpVisiblilityTag
{
get { return _helpVisiblilityTag; }
set
{
_helpVisiblilityTag = value;
NotifyOfPropertyChange(() => HelpVisiblilityTag);
}
}
public void Hide()
{
HelpVisiblilityTag = "hide";
}
public void Show()
{
HelpVisiblilityTag = "show";
}
At View:
<Button Click="Show"/>
<Grid VerticalAlignment="Center" HorizontalAlignment="Center" Tag="{Binding HelpVisiblilityTag}"
RenderTransformOrigin="0.5, 0.5" >
<Grid.Background>
<SolidColorBrush Color="#D4F1FA" Opacity="0.8"/>
</Grid.Background>
<Grid.RenderTransform>
<ScaleTransform x:Name="MyAnimatedScaleTransform"
ScaleX="0" ScaleY="0" />
</Grid.RenderTransform>
<Grid.Style>
<Style TargetType="{x:Type Grid}">
<Style.Triggers>
<Trigger Property="Tag" Value="show">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
From="0.0" To="1.0" Duration="0:0:1" AutoReverse="False" />
<DoubleAnimation
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
From="0.0" To="1" Duration="0:0:1" AutoReverse="False"
>
<DoubleAnimation.EasingFunction>
<ElasticEase EasingMode="EaseOut" Oscillations="1"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
From="0.0" To="1" Duration="0:0:1" AutoReverse="False"
>
<DoubleAnimation.EasingFunction>
<ElasticEase EasingMode="EaseOut" Oscillations="1"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
Duration="0:0:0.5" AutoReverse="False" />
<DoubleAnimation
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
From="1" To="0.0" Duration="0:0:0.5" AutoReverse="False"
/>
<DoubleAnimation
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
From="1" To="0.0" Duration="0:0:0.5" AutoReverse="False"
/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Style>
<Button Click="Hide"/>
</Grid>
Sample Screenshot:
You can use ToggleButton Checked and UnChecked Routed Event with Event Trigger:
<ToggleButton Content="Toggle" Height="20" Width="60" Panel.ZIndex="2" VerticalAlignment="Top" HorizontalAlignment="Left">
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Storyboard.TargetName="MyDockPanel"
Storyboard.TargetProperty="Opacity"
From="0" To="1"
Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MyDockPanel"
Storyboard.TargetProperty="Opacity"
From="1" To="0"
Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
<DockPanel x:Name="MyDockPanel" Background="Yellow" Opacity="0">
<TextBlock DockPanel.Dock="Bottom" Text="DockPanel"
VerticalAlignment="Center" HorizontalAlignment="Center"/>
</DockPanel>
Result:
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>
<!-- ... -->