how can I start this animation not at Window.Loaded event? I want to fire it at the click method of this button in the xaml.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button x:Name="myButton" Grid.Column="1" Height="25" Width="100">Start</Button>
<Canvas Name="Can1">
<Rectangle Name="Rect1" Canvas.Left="10" Fill="LightSeaGreen"
Stroke="Bisque"
StrokeThickness="5"
Width="100" Height="100">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Rect1"
Storyboard.TargetProperty="(Canvas.Left)"
From="10" To="100"
Duration="0:0:2"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
</Grid>
Move the Storyboard to the Button's Triggers, in an EventTrigger on the Button.Click event:
<Button x:Name="myButton" Grid.Column="1" Height="25" Width="100" Content="Start">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Rect1"
Storyboard.TargetProperty="(Canvas.Left)"
To="100" Duration="0:0:2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Canvas x:Name="Can1">
<Rectangle x:Name="Rect1" Canvas.Left="10" Width="100" Height="100"
Fill="LightSeaGreen" Stroke="Bisque" StrokeThickness="5"/>
</Canvas>
Related
I want to make a drawer using storyboard.
There are 2 child grids in the base grid.
One is a 'MenuGrid', the other is a 'ContentGrid'.
So I wrote a storyboard like this(This is a storyboard that adjusts the width of the 'MenuGrid'.):
<Window.Resources>
<Storyboard x:Key="MenuOpen">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width"
Storyboard.TargetName="MenuGrid">
<EasingDoubleKeyFrame KeyTime="0" Value="60"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="300"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MenuClose" >
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width"
Storyboard.TargetName="MenuGrid">
<EasingDoubleKeyFrame KeyTime="0" Value="300"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="60"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpenMenu">
<BeginStoryboard Storyboard="{StaticResource MenuOpen}"/>
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCloseMenu">
<BeginStoryboard Storyboard="{StaticResource MenuClose}"/>
</EventTrigger>
</Window.Triggers>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Width="300" x:Name="MenuGrid" Grid.Column="0">
<StackPanel>
<Button x:Name="ButtonCloseMenu" Width="60" Height="60" VerticalAlignment="Top" HorizontalAlignment="Right">
</Button>
<Button x:Name="ButtonOpenMenu" Width="60" Height="60" VerticalAlignment="Top" HorizontalAlignment="left" >
</Button>
</StackPanel>
</Grid>
<Grid x:Name="ContentGrid" Grid.Column="1">
</Grid>
</Grid>
Every time I press a certain button it works very well.
However, when the Width of the MenuGrid decreases, I want the Width of the ContentGrid to increase as well.
In EasingDoubleKeyFrame KeyTime="0" Value="300", is there a way to express 'Value' as a percentage or ratio rather than an int value?
I'm trying to do slide animation for whole grid, but having an exception: "Cannot resolve TargetName translateTransform." What's wrong?
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RenderTransform>
<TranslateTransform x:Name="translateTransform" X="500" />
</Grid.RenderTransform>
<Grid.Resources>
<Storyboard x:Name="StoryBoard1">
<DoubleAnimation Storyboard.TargetName="ContentPanel"
Storyboard.TargetProperty="Opacity"
From="0" To="1" Duration="0:0:1"
/>
<DoubleAnimation Storyboard.TargetName="translateTransform"
Storyboard.TargetProperty="X"
From="500" To="200" Duration="0:0:1"/>
</Storyboard>
</Grid.Resources>
<TextBlock x:Name="Txt2" Text="foo">
</TextBlock>
You are missing x:Key from the Storyboard resource, all the resources needs to have x:Key. My VS2013 says that.
<Grid x:Name="ContentPanel"
Background="Purple"
Grid.Row="1" Margin="12,0,12,0">
<Grid.RenderTransform>
<TranslateTransform x:Name="translateTransform" X="500" />
</Grid.RenderTransform>
<Grid.Resources>
<Storyboard x:Key="hey" x:Name="StoryBoard1">
<DoubleAnimation Storyboard.TargetName="ContentPanel"
Storyboard.TargetProperty="Opacity"
From="0" To="1" Duration="0:0:10"
/>
<DoubleAnimation Storyboard.TargetName="translateTransform"
Storyboard.TargetProperty="X"
From="500" To="0" Duration="0:0:10"/>
</Storyboard>
</Grid.Resources>
<TextBlock x:Name="Txt2" Text="foo">
</TextBlock>
</Grid>
In my project I want marquee n number of images. I have tried but not succeeded. when I give the Duration in same it all images are combined and moving.
My XAML -
<Grid>
<Canvas x:Name="MyCanvas" VerticalAlignment="Center">
<Canvas.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard >
<Storyboard Storyboard.TargetName="img1" Storyboard.TargetProperty="(Canvas.Left)">
<DoubleAnimation From="0" To="514" Duration="0:0:20" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard >
<Storyboard Storyboard.TargetName="img2" Storyboard.TargetProperty="(Canvas.Left)">
<DoubleAnimation From="0" To="514" Duration="0:0:20" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard >
<Storyboard Storyboard.TargetName="img3" Storyboard.TargetProperty="(Canvas.Left)">
<DoubleAnimation From="0" To="514" Duration="0:0:20" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<Image Name="img1" Source="/Images/01.jpg" Height="180" Width="120" />
<Image Name="img2" Source="/Images/02.jpg" Height="180" Width="120" />
<Image Name="img3" Source="/Images/03.jpg" Height="180" Width="120" />
</Canvas>
</Grid>
My Model is -
Refer the following link and apply it in your case.
http://weblogs.asp.net/razan/archive/2009/10/01/creating-marquee-scrolling-text-in-wpf.aspx
Update 1:
Modified your code as follows seems to meet your requirement
<Grid>
<Canvas x:Name="MyCanvas" VerticalAlignment="Center">
<Canvas.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard >
<Storyboard Storyboard.TargetName="panel" Storyboard.TargetProperty="(Canvas.Left)">
<DoubleAnimation From="0" To="514" Duration="0:0:20" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<StackPanel x:Name="panel" Orientation="Horizontal">
<Image Name="img1" Source="/Images/01.jpg" Height="180" Width="120" />
<Image Name="img2" Source="/Images/02.jpg" Height="180" Width="120" />
<Image Name="img3" Source="/Images/03.jpg" Height="180" Width="120" />
</StackPanel>
</Canvas>
</Grid>
Can anyone tell me what might be wrong with this template. the expander only animates when expanding, not collapsing.
<ControlTemplate x:Key="ExpanderExTemplate" TargetType="{x:Type Expander}" >
<StackPanel Margin="0">
<Border BorderThickness="1" >
<Expander Name="expanderEx" Header="{TemplateBinding Header}" IsExpanded="{TemplateBinding IsExpanded}" BorderThickness="0">
<Border BorderThickness="0" >
<ContentPresenter x:Name="ExpandSite" Margin="5,5,5,5" >
<ContentPresenter.LayoutTransform>
<ScaleTransform x:Name="scaleTransform" ScaleX="1" ScaleY="1" />
</ContentPresenter.LayoutTransform>
</ContentPresenter>
</Border>
<Expander.Triggers>
<EventTrigger RoutedEvent="Expander.Expanded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard >
<DoubleAnimation From="0" To="1" Duration="0:0:0.25"
Storyboard.TargetName="ExpandSite"
Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Expander.Collapsed">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="1" To="0" Duration="0:0:0.25"
Storyboard.TargetName="ExpandSite"
Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Expander.Triggers>
</Expander>
</Border>
</StackPanel>
</ControlTemplate>
When the mouse hover, the panel will be show on the left side and leave the mouse it will be hiden.
How to do that in WPF?
Is there any component?
Here's a slide-out console panel from one of my apps (I haven't included the style, but you get the idea). It starts with a width and height of zero, and expands when a toggle button is clicked (notice the EventTrigger that ties the slide-out animation to the Unchecked event of the Togglebutton).
If you base it on the mouseover event instead, that should help you on your way.
<!-- Console Panel -->
<Border Style="{StaticResource SettingsWindowStyle}" x:Name="ConsoleBorder" Grid.Row="0" Grid.Column="2" Margin="0,0,0,0">
<Border.Triggers>
<EventTrigger SourceName="toggleConsole" RoutedEvent="ToggleButton.Checked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Width" To="635" />
<DoubleAnimationUsingKeyFrames BeginTime="0:0:0.2" Duration="0:0:0.3" Storyboard.TargetProperty="Height">
<LinearDoubleKeyFrame Value="680" KeyTime="0:0:0.2" />
<LinearDoubleKeyFrame Value="690" KeyTime="0:0:0.24" />
<LinearDoubleKeyFrame x:Name="FullScreenConsole" Value="700" KeyTime="0:0:0.3" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger SourceName="toggleConsole" RoutedEvent="ToggleButton.Unchecked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="Height">
<LinearDoubleKeyFrame Value="100" KeyTime="0:0:0.2" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetProperty="Width">
<LinearDoubleKeyFrame Value="40" KeyTime="0:0:0.2" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<ToggleButton Style="{StaticResource ToggleButtonStyle}" x:Name="toggleConsole">
<TextBlock Text="Console" Foreground="Black">
<TextBlock.LayoutTransform>
<RotateTransform Angle="90" />
</TextBlock.LayoutTransform>
</TextBlock>
<ToggleButton.ToolTip>
<ToolTip>
<TextBlock Padding="10" Background="White" Foreground="Black" Text="Show/Hide" />
</ToolTip>
</ToggleButton.ToolTip>
</ToggleButton>
<Rectangle Style="{StaticResource RectangleDividerStyle}" />
<DockPanel Grid.Column="0" Margin="10,2,0,2" Background="#33FFFFFF">
<StackPanel Orientation="Vertical" DockPanel.Dock="Top" Margin="0,10,0,0">
<!-- main screen box -->
<TextBox x:Name="txtConsole" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True" Margin="5,0,0,0" Width="500" Height="590" HorizontalAlignment="Left" VerticalAlignment="Top"></TextBox>
<!-- button row -->
<StackPanel Orientation="Horizontal" Grid.Row="1" Margin="5,10,0,0">
<TextBox x:Name="txtSend" Width="400" Height="30" Margin="0,0,0,0" KeyDown="txtSend_KeyDown" >
</TextBox>
<Button Name="cmdSend" Click="cmdSend_Click" Width="80" Margin="3,0,0,0" Template="{StaticResource GlassButton}">
<TextBlock Foreground="LightGray">Send</TextBlock>
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="1" Margin="5,5,0,0">
<Button HorizontalAlignment="Left" Margin="5,2,0,0" Foreground="White" Height="30" x:Name="btnRawStatus" Click="btnRawStatus_Click" Width="100" Template="{StaticResource GlassButton}">Raw Status</Button>
<Button HorizontalAlignment="Left" Margin="5,2,0,0" Foreground="White" Height="30" x:Name="btnLast50" Click="btnLast50_Click" Width="100" Template="{StaticResource GlassButton}">Last 50 Logs</Button>
</StackPanel>
</StackPanel>
</DockPanel>
</Grid>
</Border>