I want to have a slider that returns to 0 when the user stops dragging.
So far I have this:
<Window x:Class="CenteredSliderTest.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">
<DockPanel>
<!--Value="{Binding ZSpeed}"-->
<Slider DockPanel.Dock="Left"
x:Name="ZSlider"
Minimum="-100" Maximum="100"
SelectionStart="-20" SelectionEnd="20"
Orientation="Vertical"
TickFrequency="10"
TickPlacement="TopLeft"
AutoToolTipPlacement="TopLeft"
AutoToolTipPrecision="2"
LargeChange="10"
SmallChange="1"
IsDirectionReversed="True"
Focusable="False"
>
<Slider.Triggers>
<EventTrigger RoutedEvent="LostMouseCapture" SourceName="ZSlider">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ZSlider"
Storyboard.TargetProperty="Value"
From="{Binding Value, ElementName=ZSlider}"
To="0.0"
Duration="0:0:1.5"
FillBehavior="Stop"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Slider.Triggers>
</Slider>
<TextBlock Text="{Binding ZSpeed}" />
</DockPanel>
</Window>
This works as long as I don't bind the slider value to my DependencyProperty ZSpeed.
As soon as I do this, the slider jumps back to the original value and at the second attempt the slider can't be dragged anymore.
So what can I do (preferable in xaml) in order to get the animation modify not only the slider but also the ZSpeed property?
EDIT
Code in MainWindow:
public partial class MainWindow : Window
{
public double ZSpeed
{
get { return (double)GetValue(ZSpeedProperty); }
set { SetValue(ZSpeedProperty, value); }
}
// Using a DependencyProperty as the backing store for ZSpeed. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ZSpeedProperty =
DependencyProperty.Register("ZSpeed", typeof(double), typeof(MainWindow), new UIPropertyMetadata(0.0));
public MainWindow()
{
InitializeComponent();
this.DataContext = this;
Binding binding = new Binding("Value") { Source = ZSlider };
this.SetBinding(ZSpeedProperty, binding);
}
}
You might reverse the direction of the binding. Instead of binding the Slider's Value to ZSpeed you could bind ZSpeed to Value. This would also be the "natural" binding direction if the Slider is meant to change ZSpeed, but ZSpeed won't change otherwise.
EDIT: If ZSpeed is a dependency property in some data class MyData you could create a binding in code like this:
MyData dataObject = ...
Binding binding = new Binding("Value") { Source = ZSlider };
dataObject.SetBinding(MyData.ZSpeedProperty, binding);
SECOND EDIT: Picking up Daniels suggestion, you might animate ZSpeed instead of the Slider's Value. Bind the Value to ZSpeed as before, remove the EventTrigger and add an event handler for LostMouseCapture:
<Slider x:Name="ZSlider" ...
Value="{Binding ZSpeed}"
LostMouseCapture="ZSlider_LostMouseCapture"/>
Code behind:
private void ZSlider_LostMouseCapture(object sender, MouseEventArgs e)
{
DoubleAnimation animation = new DoubleAnimation
{
From = ZSpeed,
To = 0d,
Duration = TimeSpan.FromSeconds(1.5 * Math.Abs(ZSpeed) / 100d),
FillBehavior = FillBehavior.Stop
};
ZSpeed = 0d;
BeginAnimation(ZSpeedProperty, animation);
}
You should be using FillBehavior.HoldEnd.
Edit: That apparently doesn't work. You could set the ZSpeed value to 0 manually in the StoryBoard.Completed event.
Related
I found a good explanation here on SO of how to bind the Duration property of a ColorAnimation to the Value property of a Slider. One uses a converter to convert the Double value from the slider to a Duration, and a Binding to have that set the Duration of the ColorAnimation. Here, abbreviated, is how that works:
<Window.Resources>
<local:DoubleToDurationConverter x:Key="DoubleToDurationConverter" />
</Window.Resources>
<Slider x:Name="slider" />
<Button Content="Click me for an animation">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="Green"
Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
FillBehavior="Stop"
Duration="{Binding ElementName=slider,
Path=Value,
Mode=OneWay,
Converter={StaticResource DoubleToDurationConverter}}" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
I tried that and it worked fine for me. But what I want to do is bind the Duration to a dependency property called FadeTime I've added to my custom control. So, in that control's ControlTemplate I have this:
<ControlTemplate.Triggers>
<Trigger Property="IsLit" Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="glow"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="{Binding FadeTime, Mode=OneWay,
RelativeSource={RelativeSource TemplatedParent}}"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
This compiles, but gives me an error message at run-time:
InvalidOperationException: Cannot freeze this Storyboard timeline tree
for use across threads.
How can I bind my DoubleAnimation's Duration to a dependency variable in a custom control's ControlTemplate?
Thanks!
UPDATE
Data-binding is actually gross overkill for what I want to do. Real data-binding would allow for the property's value to change at run-time. All I really want is a way for the developer who is using my custom control to be able to set the Duration of the DoubleAnimation at design time, without having to edit the ControlTemplate. It's okay if the value the developer chooses never changes at run time.
Instead of defining the animation in your XAML markup, you could define it programmatically in the PropertyChangedCallback for the IsLit property.
You could simply define another property that lets the consumer of the control specify the duration of the animation.
Here is an example for you.
Control:
public class MyCustomControl : Control
{
private UIElement glow;
public static readonly DependencyProperty DurationProperty =
DependencyProperty.Register("Duration", typeof(TimeSpan),
typeof(MyCustomControl), new PropertyMetadata(TimeSpan.FromSeconds(1)));
public TimeSpan Duration
{
get { return (TimeSpan)GetValue(DurationProperty); }
set { SetValue(DurationProperty, value); }
}
public static readonly DependencyProperty IsLitProperty =
DependencyProperty.Register("IsLit", typeof(bool),
typeof(MyCustomControl), new PropertyMetadata(false, new PropertyChangedCallback(OnIsLitChanged)));
public bool IsLit
{
get { return (bool)GetValue(IsLitProperty); }
set { SetValue(IsLitProperty, value); }
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
glow = Template.FindName("glow", this) as UIElement;
if (glow != null && IsLit)
Animate(glow);
}
private static void OnIsLitChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
bool newValue = (bool)e.NewValue;
if(newValue)
{
MyCustomControl c = d as MyCustomControl;
if(c != null && c.glow != null)
{
c.Animate(c.glow);
}
}
}
private void Animate(UIElement glow)
{
DoubleAnimation animation = new DoubleAnimation();
animation.To = 1;
animation.Duration = Duration;
glow.BeginAnimation(OpacityProperty, animation);
}
}
Template:
<ControlTemplate x:Key="ct" TargetType="local:MyCustomControl">
<Border x:Name="glow" Width="100" Height="100" Background="Red" Opacity="0.1">
</Border>
</ControlTemplate>
Usage:
<local:MyCustomControl Template="{StaticResource ct}" Duration="0:0:5" IsLit="True" />
Basically, you can't use normal bindings inside the storyboard of a control template. Since you just want a way for developers to change the value, one of the following options might work for you:
(1) Use StaticResource: Place a duration object somewhere outside the control template, where it's easier to change for developers. However, it needs to be somewhere statically accessible to the control template, since DynamicResource won't work in this place.
<Duration x:Key="MyCustomDuration">0:0:1</Duration>
... then later
Duration="{StaticResource MyCustomDuration}"
(2) Use a static code behind field with x:Static:
public static class SettingsClass
{
public static Duration MyCustomDuration = new Duration(new TimeSpan(0, 0, 1));
}
and use:
Duration="{x:Static local:SettingsClass.MyCustomDuration}"
Say I have a shape. I've given it a Stroke and StrokeThickness and a StrokeDashArray to get the desired dashed outline. Then I animate the StrokeDashOffset via VisualStateManager to get the "Marching Ants" style animation to it. Everything works great...
Except I want the default of the shape to NOT have a StrokeDashArray and instead want to set that based on a VisualState in the VisualStateManager except unfortunately as we know I can only do a DoubleAnimation on a Property, and not a Double Collection Value like what StrokeDashArray is...
My question is, is there a clever way I could animate that value during runtime so the shape in an UnSelected State has a solid Stroke but via the 'VisualStateManager' (maybe) still supply the StrokeDashOffset on the Selected State to the same shape? Or am I better off having two separate shapes and toggling the visibility between them so that each have their own default values?
If it would help visualize with a picture or something let me know and I'll add more to the question.
One option would be to animate a double property and create a new DoubleCollection that is bound to the StrokeDashArray.
Xaml:
<UserControl x:Class="SilverlightApplication1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Name="UI">
<Grid DataContext="{Binding ElementName=UI}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="StrokeDashArrayAnimation">
<Storyboard BeginTime="0">
<DoubleAnimation Duration="0:0:5"
From="0"
Storyboard.TargetName="UI"
Storyboard.TargetProperty="StrokeValue"
To="10" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse x:Name="lo"
Stroke="Red"
StrokeDashArray="{Binding StrokeArray}"
StrokeThickness="5" />
<Button Width="150"
Height="49"
Margin="29,65,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Click="Button_Click_1"
Content="Start" />
</Grid>
Code:
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace SilverlightApplication1
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
public double StrokeValue
{
get { return (double)GetValue(StrokeValueProperty); }
set { SetValue(StrokeValueProperty, value); }
}
public static readonly DependencyProperty StrokeValueProperty =
DependencyProperty.Register("StrokeValue", typeof(double), typeof(MainPage),
new PropertyMetadata(0.0, OnStrokeValueChanged));
private static void OnStrokeValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var page = d as MainPage;
if (page != null) page.StrokeArray = new DoubleCollection { (double)e.NewValue, 1 };
}
public DoubleCollection StrokeArray
{
get { return (DoubleCollection)GetValue(StrokeArrayProperty); }
set { SetValue(StrokeArrayProperty, value); }
}
public static readonly DependencyProperty StrokeArrayProperty =
DependencyProperty.Register("StrokeArray", typeof(DoubleCollection), typeof(MainPage)
, new PropertyMetadata(new DoubleCollection { 0, 1 }));
private void Button_Click_1(object sender, RoutedEventArgs e)
{
VisualStateManager.GoToState(this, "StrokeDashArrayAnimation", false);
}
}
}
I'm trying to create a storyboard in XAML that animates a property of one of the child elements of an element which raises an event. But I can't seem to get it to work without using Names, which is something I can't really do in this specific situation.
I'm basically trying something like this (much simplified of course):
<Canvas>
<Canvas.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Children[0].(Canvas.Left)" From="0" To="400" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
<Button Canvas.Left="20" Canvas.Top="20">A</Button>
<Button Canvas.Left="40" Canvas.Top="20">B</Button>
</Canvas>
Any ideas on how this could be achieved?
Providing that the UIElement you are indexing in the animation exists (i.e. already present on the Canvas) then you can do the following:
<Canvas x:Name="MyCanvas">
<Button x:Name="btn" Canvas.Left="20" Canvas.Top="20">A</Button>
<Button Canvas.Left="40" Canvas.Top="20">B</Button>
<Canvas.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.Target="{Binding ElementName=MyCanvas, Path=Children[0]}"
Storyboard.TargetProperty="(Canvas.Left)" From="0" To="400" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
Notice how I have moved the addition of the Buttons above the Trigger. If the Buttons are below the Trigger as in your question, trying to access Children[0] will throw an ArgumentOutOfRangeException because there are no children at this point.
To use the Storyboard.TargetProperty in the animation, it should always be a dependency property. Children property gets a UIElementCollection of child elements of this Panel (Canvas). Therefore, the following construction Children [n] return UIElement, which should lead to a certain type, to access its dependency property.
This can be done in the code as follows:
Button MyButton = (Button)MyCanvas.Children[0];
MessageBox.Show(MyButton.Width.ToString());
All of these actions missing in the animation by default, this is your construction will not work.
I propose to create animations in the code where this conversion possible.
To demonstrate this, I created a Canvas, in the event Loaded having registered animation. Element number is set via an attached dependency property (of course, the example can be implemented in various ways). Below is my example:
XAML
<Grid>
<local:MyCanvas x:Name="MyCanvas" local:ClassForAnimation.Children="1">
<Button Canvas.Left="20" Canvas.Top="20">A</Button>
<Button Canvas.Left="40" Canvas.Top="20">B</Button>
</local:MyCanvas>
</Grid>
Code behind
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
public class MyCanvas : Canvas
{
public MyCanvas()
{
this.Loaded += new RoutedEventHandler(MyCanvas_Loaded);
}
private void MyCanvas_Loaded(object sender, RoutedEventArgs e)
{
MyCanvas myCanvas = sender as MyCanvas;
// Get No. of children
int children = ClassForAnimation.GetChildren(myCanvas);
// Get current Button for animation
Button MyButton = (Button)myCanvas.Children[children];
if (myCanvas != null)
{
DoubleAnimation doubleAnimation = new DoubleAnimation();
doubleAnimation.From = 0;
doubleAnimation.To = 400;
MyButton.BeginAnimation(Button.WidthProperty, doubleAnimation);
}
}
}
public class ClassForAnimation : DependencyObject
{
public static readonly DependencyProperty ChildrenProperty;
public static void SetChildren(DependencyObject DepObject, int value)
{
DepObject.SetValue(ChildrenProperty, value);
}
public static int GetChildren(DependencyObject DepObject)
{
return (int)DepObject.GetValue(ChildrenProperty);
}
static ClassForAnimation()
{
PropertyMetadata MyPropertyMetadata = new PropertyMetadata(0);
ChildrenProperty = DependencyProperty.RegisterAttached("Children",
typeof(int),
typeof(ClassForAnimation),
MyPropertyMetadata);
}
}
Note: Access to the items in the Canvas should only be done in the event Loaded, or when it ended. Otherwise, the items are not available because they are not loaded.
I've been struggling with this for hours and I can't find out what I'm doing wrong. Please help me find my mistake.
I created a user control with one custom dependency property and I want to animate this property.
Here is my class:
public partial class UserControl1 : UserControl
{
public UserControl1()
{
InitializeComponent();
}
public long Val
{
get { return (long)GetValue(ValProperty); }
set {
SetValue(ValProperty, value);
// Update a text block for debug
((Class1)this.Resources["class1"]).Val = value;
}
}
public static readonly DependencyProperty ValProperty =
DependencyProperty.Register("Val", typeof(long), typeof(UserControl1), new UIPropertyMetadata(0L));
}
Here is the code that is supposed to animate it (there's an instance of UserControl1 called usercontrol11):
Int64Animation myAnimation = new Int64Animation();
myAnimation.From = 100;
myAnimation.To = 200;
myAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
Storyboard.SetTargetName(myAnimation, userControl11.Name);
Storyboard.SetTargetProperty(myAnimation, new PropertyPath(UserControl1.ValProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myAnimation);
myStoryboard.Begin(this);
I also tried the XAML approach, but it didn't work either (in the following XAML, the Width animation works fine, but the Val doesn't):
<my:UserControl1 HorizontalAlignment="Left" Width="150" Margin="72,45,0,0" x:Name="userControl11" VerticalAlignment="Top" Background="#FFFFD100">
<my:UserControl1.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<Int64Animation To="300" Duration="0:0:1"
Storyboard.TargetProperty="Val" />
<DoubleAnimation To="300" Duration="0:0:1"
Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</my:UserControl1.Triggers>
</my:UserControl1>
Any help will be much appreciated!
Well, it's actually animated. You're just checking in the wrong place, animation won't call Val property set accessor. You can, for example, override OnPropertyChanged method to see changes:
protected override void OnPropertyChanged(DependencyPropertyChangedEventArgs e)
{
base.OnPropertyChanged(e);
if(e.Property == ValProperty)
{
MessageBox.Show(e.NewValue.ToString());
}
}
I have a ListView that is set up with a MinHeight and a MaxHeight. The final height is determined by the number of items inside the list.
At the moment, when a list is added to the ItemsSource property of the ListView, the height jumps to the final height. Is there a way to animate this change in height, so that it's smooth?
Here's an example of something that does what you want (as I understand it). I'll call this "quick and dirty" and don't claim to have put a whole lot of thought into it.
public class CustomListView : ListView
{
public bool IsAttached
{
get { return (bool)GetValue(IsAttachedProperty); }
set { SetValue(IsAttachedProperty, value); }
}
// Using a DependencyProperty as the backing store for IsAttached.
// This enables animation, styling, binding, etc...
public static readonly DependencyProperty IsAttachedProperty =
DependencyProperty.Register("IsAttached",
typeof(bool),
typeof(CustomListView),
new UIPropertyMetadata(false));
}
public class ViewModel : INotifyPropertyChanged
{
public void PopulateItems()
{
Items = new List<string>();
for (var i = 0; i < 200; i++ )
{
Items.Add("The quick brown fox jumps over the lazy dog.");
}
InvokePropertyChanged(new PropertyChangedEventArgs("Items"));
IsAttached = true;
InvokePropertyChanged(new PropertyChangedEventArgs("IsAttached"));
}
public List<string> Items { get; private set; }
public bool IsAttached { get; private set; }
public event PropertyChangedEventHandler PropertyChanged;
private void InvokePropertyChanged(PropertyChangedEventArgs e)
{
var changed = PropertyChanged;
if (changed != null)
{
changed(this, e);
}
}
}
<Window x:Class="AnimateHeight.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:AnimateHeight"
Title="Window1" Height="300" Width="300">
<StackPanel>
<Button Width="100" Content="Add Items" Click="OnClickAddItems"/>
<local:CustomListView x:Name="VariableListView" ItemsSource="{Binding Items}" IsAttached="{Binding IsAttached}" >
<local:CustomListView.Style>
<Style TargetType="{x:Type local:CustomListView}">
<Setter Property="MinHeight" Value="50" />
<Setter Property="MaxHeight" Value="50" />
<Style.Triggers>
<Trigger Property="IsAttached" Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="(ListView.MaxHeight)"
To="150"
Duration="0:0:5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</local:CustomListView.Style>
</local:CustomListView>
</StackPanel>
</Window>
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
DataContext = new ViewModel();
}
private void OnClickAddItems(object sender, RoutedEventArgs e)
{
((ViewModel)DataContext).PopulateItems();
}
}
UPDATE: You should be able to copy this into .cs and .xaml files and run it as an example application. To summarize what I'm doing: Set the MaxHeight property to something artificially low, in my case I just set it to the same value as the MinHeight. Then you can create a storyboard that animates the MaxHeight to its real value, which gives you the smooth transition effect. The trick is indicating when to start the animation, I use a dependency property in a subclassed ListView just because that seemed to be the easiest option to implement in a hurry. I just have to bind the dependency property to a value in my ViewModel and I can trigger the animation by changing that value (since I don't know of an easy way to trigger an animation based on a change to a ListView ItemsSource off the top of my head).