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 7 years ago.
Improve this question
I would like to animate text highlight like "slide to unlock" iPhone.
Could you please help me?
Thanks!
One way of doing this is to use a LinearGradientBrush and then animate its gradient stops to create a "strobing" effect.
The following is the XAML for a basic Window with some text that illustrates the technique:
<Window x:Class="StackOverflow.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="Black">
<TextBlock x:Name="_text" Text="Hello World"
FontSize="60" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.Foreground>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0"
ColorInterpolationMode="ScRgbLinearInterpolation">
<GradientStop Color="#ff666666" Offset="-0.2" />
<GradientStop Color="#ffffffff" Offset="-0.1" />
<GradientStop Color="#ff666666" Offset="0" />
</LinearGradientBrush>
</TextBlock.Foreground>
<TextBlock.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever" EnableDependentAnimation="True">
<DoubleAnimation Storyboard.TargetName="_text"
Storyboard.TargetProperty="(TextBlock.Foreground).(GradientBrush.GradientStops)[0].(GradientStop.Offset)"
From="-0.2" To="1.5" Duration="0:0:1.5" />
<DoubleAnimation Storyboard.TargetName="_text"
Storyboard.TargetProperty="(TextBlock.Foreground).(GradientBrush.GradientStops)[1].(GradientStop.Offset)"
From="-0.1" To="1.6" Duration="0:0:1.5" />
<DoubleAnimation Storyboard.TargetName="_text"
Storyboard.TargetProperty="(TextBlock.Foreground).(GradientBrush.GradientStops)[2].(GradientStop.Offset)"
From="0" To="1.7" Duration="0:0:1.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
</Window>
You can experiment with the GradientStop colours and offsets, plus the duration of the DoubleAnimation elements, to get the effect you're after. Just remember that the durations for all three animation elements must be the same.
To use in WPF instead of Universal Windows, the EventTrigger needs to have its RoutedEvent property set, and the EnableDependentAnimation property of the Storyboard must be removed. Something like this:
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
...
</Storyboard>
</BeginStoryboard>
</EventTrigger>
Related
Im recently working on some simple Imageviewer.
Now it came to my mind, it might be a nice feature, to do some context-sensitve actions like Zooming and rotating.
To implement these functions is not my problem, but the ContextMenu is.
I've decided to not use a ContextMenu-Element, instead im going to use a popup.
Reasons for PopUp:
Less Styling
Better Positioning
IsOpen is Bindable (ContextMenu is NOT bindable on IsOpen against all Articles regarding this)
Here comes the trouble:
<Image x:Name="PART_ImgCurrent" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="Uniform" Grid.Row="0" Grid.Column="0"
Source="{Binding ElementName=PART_PreviewPanel, Path=SelectedItem.Source}">
<Image.LayoutTransform>
<RotateTransform Angle="0"></RotateTransform>
</Image.LayoutTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PART_ImgCurrent" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
<Popup IsHitTestVisible="False" Focusable="False" PlacementTarget="{Binding ElementName=PART_ImgCurrent}" AllowsTransparency="True" StaysOpen="True"
IsOpen="{Binding ElementName=PART_ImgCurrent, Path=IsMouseOver, Mode=OneWay}"
Placement="Right" HorizontalOffset="-42" VerticalOffset="2">
<StackPanel Opacity="0.5" VerticalAlignment="Stretch">
<Button Content="Ugly Button" Height="40" Width="40"></Button>
<Button Content="Ugly Button" Height="40" Width="40"></Button>
<Button Content="Ugly Button" Height="40" Width="40"></Button>
</StackPanel>
</Popup>
As you can see, im binding IsOpen of Popup to IsMouseOver on Image which results in a funny Disco-BlinkenLights-Behavior when i try to click a button inside the Popup.
What has this to do with the Title?
AcrobatReader has this
This is almost exactly the behavior im looking for. How is this thing called?
Or had someone ever similar issues and could provide a solution?
Sorry for the delay, soon as I thought I had a second I got busy again. Anyway, here's one of several ways I can think of accomplishing your goal, give it a shot. I sort of assumed it may not be just images you want this for and if you threw the resource stuff in a dictionary and kept your naming consistent (or even better, just target the nested UIElement) you could use it all over the place. Notice the Grid is acting as what would be the Image in this example.
I generally make things open for future added interactions and stuff, so in this case I would probably just make the image source the background brush for Grid or place it as a child. That way if you decide to add other objects in there or say other effects and stuff you've got a good start point.
Anyway I digress, so try out the concept example below and see if it's what you're after. If not, like I said there's several other ways I can think of to accomplish your goal so just let me know. :)
<!-- HitTestVisibility Area -->
<Grid x:Name="ImagePlaceholder"
Height="500" Width="500"
Background="LightBlue">
<Grid.Resources>
<Storyboard x:Key="OnMouseEnter">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="FakePopUp">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnMouseLeave">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="FakePopUp">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<Grid.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource OnMouseEnter}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeave">
<BeginStoryboard Storyboard="{StaticResource OnMouseLeave}"/>
</EventTrigger>
</Grid.Triggers>
<!-- Overlay -->
<Border Name="FakePopUp" Visibility="Collapsed"
Margin="0,0,0,25" Background="SlateGray"
Height="50" CornerRadius="20" Padding="10"
HorizontalAlignment="Center" VerticalAlignment="Bottom">
<StackPanel Orientation="Horizontal">
<Button Content="Eins Bier"/>
<Button Content="Zwei Bier" Margin="10,0"/>
<Button Content="Drei Bier"/>
</StackPanel>
</Border>
</Grid>
I went with Storyboards attached to the parent instead of direct triggers with TargetName like I said, because I could think of a bunch of other instances features might want to be added that would make sense. Even something simple like adding a transition duration for a nice fade effect or maybe a translate y to slide it up while fading etc, etc, etc.
Anyway, hope this helps. Cheers!
I have code something like this:
<Path x:Name="arrow" StrokeThickness="3" Stroke="Black" Data="M34,115 C45,106 91,119 105,112 119,105 172,75.004352 188,82.003591" />
what I want is to animate the Data property of the path. I'm searching this from last two days didn't find a solution.
what I actually want is to show path bit by bit.
Does anyone have any Idea?
"what I actually want is to show path bit by bit"
Do you mean something like this?
<Grid VerticalAlignment="Center" HorizontalAlignment="Center" >
<Grid.Resources>
<Storyboard x:Key="CWTrace">
<!-- To run opposite direction, just swap the 'From' and 'To' values. -->
<DoubleAnimation BeginTime="00:00:0.5" RepeatBehavior="Forever"
Storyboard.TargetName="arrow"
Storyboard.TargetProperty="StrokeDashOffset"
Duration="0:0:5" From="100" To="0"/>
</Storyboard>
</Grid.Resources>
<Grid.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource CWTrace}"/>
</EventTrigger>
</Grid.Triggers>
<Path x:Name="arrow"
StrokeDashOffset="0" StrokeDashArray="100"
StrokeThickness="3" Stroke="Black"
Data="M34,115 C45,106 91,119 105,112 119,105 172,75.004352 188,82.003591"/>
</Grid>
Obviously remove the RepeatBehavior for a one time anim, and tinker with values to get exactly what you're after. Cheers.
I'd like to create a glimmer animation on path's stroke in the direction of the path
My code looks like this:
<Path StrokeThickness="2">
<Path.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard Duration="0:0:3" RepeatBehavior="Forever">
<DoubleAnimation
Storyboard.TargetName="firstGradientStop"
Storyboard.TargetProperty="Offset"
From="-0.2" To="1.0" Duration="0:0:2" />
<DoubleAnimation
Storyboard.TargetName="middleGradientStop"
Storyboard.TargetProperty="Offset"
From="-0.1" To="1.1" Duration="0:0:2" />
<DoubleAnimation
Storyboard.TargetName="lastGradientStop"
Storyboard.TargetProperty="Offset"
From="0" To="1.2" Duration="0:0:2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
<Path.Stroke>
<LinearGradientBrush>
<GradientStop Color="#80000000" x:Name="firstGradientStop" Offset="0.4" />
<GradientStop Color="White" x:Name="middleGradientStop" Offset="0.5" />
<GradientStop Color="#80000000" x:Name="lastGradientStop" Offset="0.6" />
</LinearGradientBrush>
</Path.Stroke>
<Path.Data>
<!-- dynamic data here, sample path below -->
<GeometryGroup>
<LineGeometry StartPoint="0,0" EndPoint="100,100" />
<LineGeometry StartPoint="100,100" EndPoint="200,100" />
</GeometryGroup>
</Path.Data>
</Path>
the problem is that the animation is independent of the direction of path and I need the glow to go in the direction from StartPoint to EndPoint. Is this achievable?
You can use StartPoint and EndPoint of linearGradientBrush, something like that (play with values, so you can rotate angle of gradient like you want whenever you want):
<PointAnimation
Storyboard.TargetName="Brush"
Storyboard.TargetProperty="StartPoint"
From="0,0" To="0.5,0" Duration="0:0:1.5" />
<PointAnimation
Storyboard.TargetName="Brush"
Storyboard.TargetProperty="EndPoint"
From="1,1" To="0.5,1" Duration="0:0:1.5" />
But it's not a solution for complex dynamic path. (And that's limitations of stroke cause it's nothing more than background and you can't glimmer with it self-intersecting paths)
If you need more, then create a simple UserControl that will represent just a straight line with proper animation. After that you need to add that controls(with proper rotateTransform) to canvas from codeBehind iterating by path structure and set needed storyboards timeline. That would be a complete solution.
I want to create marquee effect in WP8 application.
To accomplish this I placed StackPanel inside ScrollViewer and I'm trying to use DoubleAnimation on TranslateTransform.X property.
Code:
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="Scroll" RepeatBehavior="Forever" AutoReverse="True">
<DoubleAnimation From="0" To="100" Storyboard.TargetName="transform" Storyboard.TargetProperty="X" Duration="0:0:5" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot">
...
<ScrollViewer Height="80" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Hidden">
<StackPanel Orientation="Horizontal">
<StackPanel.RenderTransform>
<TranslateTransform x:Name="transform" />
</StackPanel.RenderTransform>
<Image Source="/Assets/logo1.png"></Image>
<Image Source="/Assets/logo2.png"></Image>
<Image Source="/Assets/logo3.png"></Image>
<Image Source="/Assets/logo4.png"></Image>
<Image Source="/Assets/logo5.png"></Image>
</StackPanel>
</ScrollViewer>
</Grid>
Unfortunately when calling Scroll.Begin() from code-behind in page Loaded event handler I'm getting exception: System.InvalidOperationException: Cannot resolve TargetName transform.
What I'am doing wrong?
Animation runs when I place StackPanel directly in LayoutRoot but not when it's child of ScrollViewer.
I think the exception is explanatory. Like you apply storyboard on some UI element but there is no element named "transform" in your xaml to which this storyboard will be going to be applied.
so this property Storyboard.TargetName should be name of the UI element that has to be transformed.
In your case if you have to simply give your StackPanel a name say MyStackPanel and then put this name in place of transform in your storyboard code.
<StackPanel Orientation="Horizontal" Name="MyStackPanel">
<StackPanel.RenderTransform>
<TranslateTransform x:Name="transform" />
</StackPanel.RenderTransform>
...
You storyboard should be changedin this way..
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="Scroll" RepeatBehavior="Forever" AutoReverse="True">
<DoubleAnimation From="0" To="100" Storyboard.TargetName="MyStackPanel" Storyboard.TargetProperty="X" Duration="0:0:5" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>
Important :-It would be much better if you just use Blend for making a simple animation and then see how the animation code generated in the page Xaml. You will got all of your answers :)
I am working on a c# wpf project and I have run in to a problem relating to firing an trigger within the XAML.
What I am trying to achieve is when the drags a file into the grid, it should animate the background colour change but for some reason it keeps on throwing an exception as soon as I run the program. I am getting the following error:
'Provide value on
'System.Windows.Baml2006.TypeConverterMarkupExtension' threw an
exception.' Line number '9' and line position '14'.
Below is the XAML code
<UserControl x:Class="ReportReader.UserControls.ReportDragDropControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008">
<Grid AllowDrop="True" DragDrop.DragOver="Grid_DragOver"
DragDrop.DragEnter="Grid_DragEnter" DragDrop.Drop="Grid_Drop" DragDrop.DragLeave="Grid_DragLeave">
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.DragEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#cecece" Storyboard.TargetProperty="(Grid.BackgroundColor).(SolidColorBrush.Color)" FillBehavior="Stop" Duration="0.0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<TextBlock Margin="12,12,20,12" Name="txtDragDropStatus" Text="Drag file here or use file menu to load your report" TextAlignment="Center" FontSize="30" FontWeight="Bold" TextWrapping="WrapWithOverflow" Width="835" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</UserControl>
Thanks for any help you can provide.
There are two errors in your XAML file -
BackgroundColor is not a Dependency Property, instead use Background.
0.0.1 is not a valid value for TimeSpan. It should be 0:0:1.
This will work fine -
<ColorAnimation To="#cecece"
Storyboard.TargetProperty="(Grid.Background)
.(SolidColorBrush.Color)"
FillBehavior="Stop" Duration="0:0:1" />
Also, to allow animation on background property, you should set it to some default value.
<Grid Background="White"/>
I tried with this sample and its working fine on drag enter -
<Grid AllowDrop="True" Background="White" DragDrop.DragEnter="Grid_DragEnter">
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.DragEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#cecece"
Storyboard.TargetProperty="(Grid.Background).
(SolidColorBrush.Color)"
FillBehavior="Stop" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
/EventTrigger>
</Grid.Triggers>
<TextBlock Margin="12,12,20,12" Name="txtDragDropStatus"
Text="Drag file here or use file menu to load your report"/>
</Grid>