I want to do a usercontrol, that show and hide (visible & collapsed) a vector object in my project. For that a got a canvas element in my grid.
And truing to make an animation of 2 object Layer1 and Layer2.
<UserControl.Resources>
<Storyboard x:Key="ProgressAnimation" RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Layer1" Storyboard.TargetProperty="Visibility">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="00:00:01" Value="Visible"/>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Layer2" Storyboard.TargetProperty="Visibility">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="00:00:02" Value="Visible"/>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
Next I make a trigger :
<UserControl.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard x:Name="ProgressAnimationBeginStoryboard" Storyboard="{StaticResource ProgressAnimation}"/>
</EventTrigger>
</UserControl.Triggers>
And insert my element in to Grid :
<Grid>
<Canvas x:Name="Layer1" Margin="74,112,78,40" Visibility="Collapsed">
<Path Data="########" Fill="#FF00FF99" Height="148.219" Canvas.Left="0" Canvas.Top="0" Width="147.623"/>
</Canvas>
<Canvas x:Name="Layer2" Margin="74,113,79,40" Visibility="Collapsed">
<Path Data="########" Fill="#FF00FF99" Height="147.36" Canvas.Left="0" Canvas.Top="0" Width="147.243"/>
</Canvas>
</Grid>
In MainForm insert that code to XAML :
<Grid>
<control:LoadingForm HorizontalAlignment="Center" VerticalAlignment="Center" Height="298" Width="304"/>
</Grid>
And that not work properly - got that error :
Error 1 The animation(s) applied to the 'Visibility' property calculate a current value of 'Visible', which is not a valid value for the property. J:\Projects\LoadingPj\LoadingPj\MainWindow.xaml 1 2 LoadingPj
Who can help me to understand my problem?
Thx.
Try to specify Visibility.Visible value explicitly:
<DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static Visibility.Visible}" />
Seems like it was treated as a string value.
Related
I have a simple animation that alternate two frames changing the image. It works perfectly until I try to bind the bitmapimage urisource.
<Image Stretch="Fill">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00" Duration="{Binding ElementName=MyControl, Path=FrameDuration}"
Storyboard.TargetProperty="(Image.Source)">
<DiscreteObjectKeyFrame KeyTime="00:00:00.000000">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="Assets/frame1.png" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
BeginTime="{Binding ElementName=MyControl, Path=FrameBeginTime}" Duration="{Binding ElementName=MyControl, Path=FrameDuration}"
Storyboard.TargetProperty="(Image.Source)">
<DiscreteObjectKeyFrame KeyTime="00:00:00.0000000">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="Assets/frame2.png" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
I tried these two bindings but none of them work:
XAML:
<BitmapImage Source="{Binding ElementName=MyControl, Path=FrameUri1}" />
Code:
public Uri FrameUri1 { get { return _frameUri1; } set { _frameUri1 = value; NotifyPropertyChanged("FrameUri1"); } }
and
XAML:
<Image Source="{Binding ElementName=CosoControl, Path=BitmapSource}" />
Code:
public ImageSource BitmapSource
{
get
{
BitmapImage bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.UriSource = new Uri("pack://application:,,,/Myassembly;component/Assets/frame1.png");
bitmap.EndInit();
return bitmap;
}
}
I read other threads with similar issue, but I'm quite new to WPF/C# and I could not figure out how to solve it. I read about IValueConverter but no idea how to arrange that.
Best way is to use diff. images with proper binding and hide them. Then animate opacity/visibility of the needed one.
<Border BorderThickness="3" BorderBrush="#FF341A1A" Height="200">
<Border.Background>
<VisualBrush>
<VisualBrush.Visual>
<Grid>
<Image x:Name="Img1" Visibility="Collapsed" Source="{Binding Text, ElementName=MyControl1}"/>
<Image x:Name="Img2" Visibility="Collapsed" Source="{Binding Text, ElementName=MyControl2}"/>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Border.Background>
<Border.Triggers>
<EventTrigger RoutedEvent="Border.Loaded">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames
Duration="0:0:3"
Storyboard.TargetName="Img1"
Storyboard.TargetProperty="Visibility"
>
<DiscreteObjectKeyFrame KeyTime="0:0:1">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
</Border>
I want to make a kind of custom ListView in WPF. It consists of a Header and a stack panel which contains all entries.
I want to be able to minimize the ListView, so I added a little Triangle before the header that triggers an Storyboard. This should minimize/maximize the Listview.
Anything works well except that I don't have a static height. So in my Storyboard I can't set a Keyframe with a specific static Value. I tried a Binding with a custom converter that adds to the height of the stack panel the height of the header. But it seems like it always returns "0".
My current code:
<UserControl
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:GenericWPF="clr-namespace:GenericWPF"
mc:Ignorable="d"
x:Class="Vertretungsplan.UserElements.VertretungsPlan"
x:Name="UserControl" Width="824" SizeChanged="VertretungsPlan_OnSizeChanged" Height="40">
<UserControl.Resources>
<GenericWPF:AddValueConverter x:Key="AddConverter"/>
<Style x:Key="HeaderTextBlockLinkStyle" TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#FF3C66C1"/>
</Trigger>
</Style.Triggers>
<Setter Property="TextWrapping" Value="NoWrap"/>
<Setter Property="TextTrimming" Value="None"/>
</Style>
<Storyboard x:Key="Maximize">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="UserControl">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="900"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="NotExpandedTriangle">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ExpandedTriangle">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.995"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NotExpandedTriangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.7" Value="{x:Static Visibility.Hidden}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ExpandedTriangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Minimize">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="UserControl">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="40"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ExpandedTriangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.7" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Hidden}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ExpandedTriangle">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="NotExpandedTriangle">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NotExpandedTriangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseDown" SourceName="NotExpandedTriangle">
<BeginStoryboard x:Name="Maximize_BeginStoryboard" Storyboard="{StaticResource Maximize}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseDown" SourceName="ExpandedTriangle">
<BeginStoryboard x:Name="Minimize_BeginStoryboard" Storyboard="{StaticResource Minimize}"/>
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="LayoutRoot" Height="Auto">
<TextBlock x:Name="Header" TextWrapping="Wrap" VerticalAlignment="Top" Margin="60,10,10,0" TextAlignment="Center" FontSize="20" FontWeight="Bold" MouseDown="Header_MouseDown" Style="{DynamicResource HeaderTextBlockLinkStyle}" Cursor="Hand"><Run Text="XX.XX.XXXX XXXXXXX, Woche X"/></TextBlock>
<StackPanel x:Name="RowStackPanel" Margin="0,41.6,0,0" MinHeight="100"/>
<Path x:Name="NotExpandedTriangle" Data="M0,0 L26,26 0,26 z" Fill="Black" HorizontalAlignment="Left" Height="20" Margin="10,12.5,0,0" Stretch="Fill" SnapsToDevicePixels="True" Stroke="Black" StrokeThickness="0" VerticalAlignment="Top" Width="20" RenderTransformOrigin="0.5,0.5" >
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-134.855"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<Path x:Name="ExpandedTriangle" Data="M0,0 L26,26 0,26 z" Fill="Black" HorizontalAlignment="Left" Height="20" Margin="10,12.5,0,0" Stretch="Fill" SnapsToDevicePixels="True" Stroke="Black" StrokeThickness="0" VerticalAlignment="Top" Width="20" RenderTransformOrigin="0.5,0.5" Opacity="0" Visibility="Hidden" >
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-44.898"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</UserControl>
Please help me out how I can get a dynamic Value for the Keyframe that represents the total Heigth of the stackPanel + the Header + Spacing. Thanks!
It's possible to set the value of that key frame from code.
At a point you feel is best, possibly via the SizeChanged event, search for the storyboard in the resources. I have code that looks something like the following...
maximizeStoryboard = (Storyboard)FindResource("Maximize");
After you have that you can grab the timeline collection from its Children. And the first child in your case will be
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="UserControl">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="900"/>
</DoubleAnimationUsingKeyFrames>
Once you have that, you can gain access to the key frames via the DoubleAnimationUsingKeyFrames property KeyFrames. Which again is a collection. As you only have one EasingDoubleKeyFrame, grab a hold of that one frame and from that you can set its value via its Value property.
Hope this helps.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I would like to ask how to implement the UI change based on the button click. At below screenshots shown 1,2,3 are the toggle buttons.
When user click button 1, then it will display Form B UI.
When user click button 2, it will display image.
Run this xaml code separately and try.
<Border Width="500" Height="400" BorderThickness="1" BorderBrush="Black">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="70"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Grid.Column="0" Grid.ColumnSpan="6" BorderBrush="Black" BorderThickness="0,0,0,1"></Border>
<TextBlock Name="FormA" Text="Form A" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Top"></TextBlock>
<Border Name="FormBBoder" Grid.Column="0" Grid.ColumnSpan="6" Grid.Row="1" Visibility="Collapsed" BorderBrush="Black" BorderThickness="0,0,0,1"></Border>
<TextBlock Name="FormB" Text="Form B" Grid.Column="1" Grid.Row="1" Visibility="Collapsed" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
<Border Name="FormCBoder" Grid.Column="0" Grid.Row="2" Visibility="Collapsed" BorderBrush="Black" BorderThickness="0,0,1,0"></Border>
<TextBlock Text="Form C" Name="FormC" Visibility="Collapsed" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
<ToggleButton Content="1">
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<Int32Animation Storyboard.TargetName="FormA" Storyboard.TargetProperty="(Grid.Column)" From="0" To="1" Duration="0:0:0" ></Int32Animation>
<Int32Animation Storyboard.TargetName="FormA" Storyboard.TargetProperty="(Grid.Row)" From="0" To="2" Duration="0:0:0" ></Int32Animation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormBBoder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Collapsed}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormB" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Collapsed}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormCBoder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Collapsed}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormC" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Collapsed}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
<ToggleButton Content="2" Grid.Column="1">
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormBBoder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormB" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
<ToggleButton Content="3" Grid.Column="2">
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormBBoder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormB" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Collapsed}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormCBoder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormC" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
</Grid>
</Border>
Result
Create a form with all the elements. Set visibility on the image and form b to collapsed. On button 1 create an event that changes form b visibility to visible. On button 2 create an event that changes image visibility to visible.
A simple example:
Code in xaml
<Window x:Class="WpfApplication1.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">
<StackPanel>
<TextBlock Text="1st element" HorizontalAlignment="Center"></TextBlock>
<TextBlock x:Name="hiddenElement" Visibility="Collapsed" Text="hiddenElement" HorizontalAlignment="Center"></TextBlock>
<Button x:Name="btn" Content="Show 2nd element" Click="btn_Click"/>
</StackPanel>
</Window>
Code behind
private void btn_Click(object sender, RoutedEventArgs e)
{
hiddenElement.Visibility = Visibility.Visible;
}
This should give you a basic idea of what to do.
Use a TabControl
<TabControl>
<TabItem Header="1">
<!-- your content (Form A) here -->
</TabItem>
<TabItem Header="2">
<!-- your content (Form A,B) here -->
</TabItem>
<TabItem Header="1">
<!-- your content (Form A,B and image) here -->
</TabItem>
</TabControl>
Using the WPF TabControl
The WPF TabControl allows you to split your interface up into different areas, each accessible by clicking on the tab header, usually positioned at the top of the control.
WPF TabControl
Is there a way to show marquee style border around objects in WinRT?
I see there is stroke style of border,
but I want it to move around the object like the lasso tool border in Photoshop or Paint.
Also I need to decide what should be the color of the gap between two strokes of the dashes.
Thank you.
This is what you want, since you want the fill color:
<Page.Resources>
<Storyboard RepeatBehavior="Forever" x:Name="Test">
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
Storyboard.TargetProperty="(Shape.StrokeDashOffset)"
Storyboard.TargetName="Marquee1">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="3.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
Storyboard.TargetProperty="(Shape.StrokeDashOffset)"
Storyboard.TargetName="Marquee2">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="2.5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Rectangle x:Name="Marquee1" Height="200" Width="200"
Stroke="Red" StrokeThickness="10" StrokeDashArray="0.5 2"
StrokeDashOffset="1" StrokeDashCap="Square" />
<Rectangle x:Name="Marquee2" Height="200" Width="200"
Stroke="Green" StrokeThickness="10" StrokeDashArray="0.5 2"
StrokeDashOffset="0" StrokeDashCap="Square" />
<Image Height="175" Width="175" />
</Grid>
Looks like this:
Best of luck!
Found a way to get Marquee style border work like in Photoshop:
<Storyboard RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ImageToDisplayBorder" Storyboard.TargetProperty="StrokeThickness">
<DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ImageToDisplayBorder" Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaperDark}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ImageToDisplayBorder" Storyboard.TargetProperty="StrokeDashArray">
<DiscreteObjectKeyFrame KeyTime="0" Value="3, 3"/>
<DiscreteObjectKeyFrame KeyTime="00:00:0.200" Value="3, 3"/>
<DiscreteObjectKeyFrame KeyTime="00:00:0.400" Value="3, 3"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ImageToDisplayBorder" Storyboard.TargetProperty="StrokeDashOffset">
<DiscreteObjectKeyFrame KeyTime="0" Value="3"/>
<DiscreteObjectKeyFrame KeyTime="00:00:0.200" Value="0"/>
<DiscreteObjectKeyFrame KeyTime="00:00:0.400" Value="3"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
I still don't have a way to specify the Gap color though
Given the following style, and a storyboard named animation that lives in <Window.Resources>, how can I pause (and resume) a storyboard triggered from code behind via ((Storyboard)FindResource("animate")).Begin(Tab1, true);
The following code errors saying the PauseStoryboard event can't find animate, which makes sense since it doesn't live in the template. The BeginStoryboard event allows you to bind to resources, but the pause and resume do not.
<Style x:Key="HiddenTabItem" TargetType="{x:Type TabItem}">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate DataType="{x:Type TabItem}">
<Border x:Name="grid">
<ContentPresenter>
<ContentPresenter.Content>
<TextBlock Text="{TemplateBinding Content}"/>
</ContentPresenter.Content>
</ContentPresenter>
</Border>
<DataTemplate.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<PauseStoryboard BeginStoryboardName="animate" />
</EventTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
The animate storyboard:
<Window.Resources>
<Storyboard x:Key="animate">
<ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation BeginTime="0:0:0.0" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.2"/>
<DoubleAnimation BeginTime="0:0:2.5" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:0.5"/>
<ObjectAnimationUsingKeyFrames BeginTime="0:0:5.5" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Hidden</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
how can I pause (and resume) a storyboard triggered from code behind
First off save the reference to the storyboard which was kicked off in codebehind in a convenient location. Since you now have that as a reference, subscribe to the mouse enter event from the control which you are targeting. Either in Xaml or most likely in codebehind use that reference to the storyboard to pause it.
Thus removing the need to use a style trigger.