SliderMenu in Youtube
I can't do something similar to this video, the animation doesn't stop and the menu always flashes. Here's my XAML:
<StackPanel.Style>
<Style TargetType="StackPanel">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Storyboard.TargetProperty="Margin"
From="-70,0,0,0" To="15,0,15,0"
DecelerationRatio=".8" Duration="0:0:0.7"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Storyboard.TargetProperty="Margin"
From="15,0,15,0" To="-70,0,0,0"
DecelerationRatio=".8" Duration="0:0:0.7"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
What's the problem with it?
The flickering is happening because as soon as the StackPanel starts animating, it moves itself out of the way (of the mouse cursor), causing the other animation to start. I don't see you full code, so here are a couple of pointers to improve your code.
Make sure the entire menu is hittest-visible (e.g. by setting a background)
Don't use two triggers, use one trigger with enter and exit-triggers
Avoid the margin on the left - it can cause the same kind of flickering again.
<StackPanel Background="Blue" Width="100" HorizontalAlignment="Left">
<StackPanel.Style>
<Style TargetType="StackPanel">
<Setter Property="Margin" Value="-70,0,0,0"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Storyboard.TargetProperty="Margin"
From="-70,0,0,0" To="0,0,0,0"
DecelerationRatio=".8" Duration="0:0:0.7"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Storyboard.TargetProperty="Margin"
From="0,0,0,0" To="-70,0,0,0"
DecelerationRatio=".8" Duration="0:0:0.7"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
<Button Width="100" Height="25"></Button>
</StackPanel>
Result:
Related
This question already has answers here:
How to use both Command and EventTrigger in DataTemplate Button?
(3 answers)
In WPF, why MouseLeave triggers instead of MouseDown?
(2 answers)
Closed 3 years ago.
So I'm trying to setup a EventTrigger for my style and it seems to only register the MouseOver event but not not the MouseDownone. And I'm not sure why.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="{x:Type Button}" x:Key="KiwiButton">
<!--<Setter Property="Background" Value="#2ecc71"/>-->
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontFamily" Value="Fonts/#Roboto"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center">
</ContentPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="Background.Color"
To="#27ae60" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="Background.Color"
To="#2ecc71" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="Background.Color"
To="Orange" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseUp">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="Background.Color"
To="#27ae60" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
You can try it with PreviewMouseDown
I have a list view that is being populated with wrap panels through my binding. My code currently will animate the opacity on MouseEnter (opacity up to 1.0) and MouseLeave (opacity down to {Binding PanelOpacity}) just fine. However, when I select a different wrap panel, I need the storyboard for MouseLeave to fire to reduce the opacity.
Snippet:
<ListView.ItemTemplate>
<DataTemplate>
<WrapPanel x:Name="panelObject" Orientation="Horizontal" Margin="5,7">
<WrapPanel.InputBindings>
<MouseBinding MouseAction="LeftClick"
Command="{Binding DataContext.GridClickCmd, RelativeSource={RelativeSource AncestorType=Grid}}"
CommandParameter="{Binding Server}"/>
</WrapPanel.InputBindings>
<WrapPanel.Style>
<Style TargetType="{x:Type WrapPanel}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />
</Style.Resources>
<Setter Property="Opacity" Value="{Binding PanelOpacity}" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="1.0" />
</Trigger>
</Style.Triggers>
</Style>
</WrapPanel.Style>
<WrapPanel.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard x:Name="FadeIn">
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
To="1.0" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard x:Name="FadeOut">
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
To="{Binding PanelOpacity}" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="SourceUpdated">
<BeginStoryboard>
<Storyboard x:Name="ChangeSelection">
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
To="{Binding PanelOpacity}" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</WrapPanel.Triggers>
</WrapPanel>
</DataTemplate>
</ListView.ItemTemplate>
I've tried using a few different Routed Events and none of them seem to fire when a different wrap panel is clicked.
Last thing I tried was this:
<EventTrigger RoutedEvent="SourceUpdated">
<BeginStoryboard>
<Storyboard x:Name="ChangeSelection">
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
To="{Binding PanelOpacity}" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
Edit: I've got this in my C#. It works fine currently, without animation:
_viewModel.MainPanel.ToList().Find(x => x.Server == (string)parameter).PanelOpacity = 1.0;
_viewModel.MainPanel.ToList().FindAll(x => x.Server != (string)parameter).ForEach(x => x.PanelOpacity = 0.5);
Second Edit: Added more tags to show location of code.
Final Edit: full ItemTemplate code added.
I'm developing a WPF Application for Touch Devices. I want a behaviour like in Android Browser, if you focus a TextBox the screen 'zooms' in so you only see the TextBox and the virtual Keyboard.
I have already tried Scaling the TextBox and setting the Position if it has Focus but that doesn't work right. If somebody could point me in the right direction i would appreciate that.
you can achieve this function from this code
<TextBox Background="LightGreen" Width="100" Height="100" BorderBrush="Green">
<TextBox.Style>
<Style TargetType="TextBox">
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.400" To="3" Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Duration="0:0:0.300" To="125" Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.300" To="125" Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.250" To="0" Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Duration="0:0:0.150" To="100" Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.150" To="100" Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
In my application I have the following XAML-Code to animate the SearchInputView a bit.
<Grid Grid.Row="1" HorizontalAlignment="Right" Grid.RowSpan="4" Panel.ZIndex="200" VerticalAlignment="Top"
Margin="0,-29,6,0">
<Grid.Resources>
<Duration x:Key="SearchAnimationDuration">0:0:0.4</Duration>
<system:Double x:Key="Hidden">0.0</system:Double>
<system:Double x:Key="Visible">1.0</system:Double>
<system:Double x:Key="Transparent">0.5</system:Double>
<Style TargetType="{x:Type view:SearchInputView}">
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="{StaticResource Hidden}" To="{StaticResource Visible}"
Duration="{StaticResource SearchAnimationDuration}"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="{StaticResource Transparent}" To="{StaticResource Visible}"
Duration="{StaticResource SearchAnimationDuration}"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="{StaticResource Visible}" To="{StaticResource Transparent}"
Duration="{StaticResource SearchAnimationDuration}"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<view:SearchInputView Visibility="{Binding DataContext.SearchIsVisible, Mode=TwoWay, Converter={converter:BoolToVisibilityConverter}, RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}}"/>
</Grid>
The SearchInputView is located in right upper corner of my window. Now I want the control, if the mouse is not over, to fade out of the screen a bit so that only the half of the control is in the visible area. I tried it with the following DoubleAnimation in the ExitActions:
<DoubleAnimation Storyboard.TargetProperty="Margin.Left" To="50" Duration="0:0:0.4"/>
Now when the mouse leaves the control my application crashed immediately.
How can I move my control when the mouse leaves it?
Margin.Left is not DependencyProperty so you cannot animate only left. You can either use ThicknessAnimation to animate whole margin or use TranslateTransform as RenderTransform and animate that
<Style TargetType="{x:Type view:SearchInputView}">
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform X="0" Y="0"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="{StaticResource Transparent}" To="{StaticResource Visible}" Duration="{StaticResource SearchAnimationDuration}"/>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.X" To="0" Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="{StaticResource Visible}" To="{StaticResource Transparent}" Duration="{StaticResource SearchAnimationDuration}"/>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.X" To="50" Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
I have a style for a ListViewItem control:
<EventTrigger RoutedEvent="ListViewItem.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="BitmapEffect.Opacity"
From="0.0" To="1.0" Duration="0:0:0.5" AutoReverse="False" SpeedRatio="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ListViewItem.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="BitmapEffect.Opacity"
From="1.0" To="0.0" Duration="0:0:0.5" AutoReverse="False" SpeedRatio="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
I want to when mouse is over a ListViewItem, border of item appearing slowly and when mouse leave it, border effect disappear,
But i get this error when mouse goes to leave item:
Cannot resolve all property references in the property path 'BitmapEffect.Opacity'. Verify
that applicable objects support the properties.
Note that when i use only first EventTrigger which routed to ListViewItem.MouseEnter, program works correct! but it has not a good view!
I'm using OuterGlowBitmapEffect!
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="SkyBlue" GlowSize="20" />
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="Black" />
</Trigger>
I was trying with BitmapEffect, it is working fine as your above code.
<Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
<Setter Property="BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="Blue" GlowSize="5" />
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="ListViewItem.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="BitmapEffect.Opacity"
From="0.0" To="1.0" Duration="0:0:0.5" AutoReverse="False" SpeedRatio="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="ListViewItem.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="BitmapEffect.Opacity"
From="1.0" To="0.0" Duration="0:0:0.5" AutoReverse="False" SpeedRatio="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
Added Whole sample.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Custom="http://schemas.microsoft.com/wpf/2008/toolkit"
xmlns:uc="clr-namespace:WpfApplication10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="WpfApplication10.Window1"
x:Name="Window"
Title="Window1" mc:Ignorable="d">
<Window.Resources>
<DataTemplate x:Key="ItemTemplate1">
<StackPanel>
<TextBlock Text="{Binding Property1}"/>
<Image Source="{Binding Property2}" HorizontalAlignment="Left" Height="64" Width="64"/>
</StackPanel>
</DataTemplate>
<Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
<Setter Property="BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="Blue" GlowSize="5" />
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="ListViewItem.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="BitmapEffect.Opacity"
From="0.0" To="1.0" Duration="0:0:0.5" AutoReverse="False" SpeedRatio="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="ListViewItem.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="BitmapEffect.Opacity"
From="1.0" To="0.0" Duration="0:0:0.5" AutoReverse="False" SpeedRatio="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid DataContext="{Binding Source={StaticResource SampleDataSource1}}">
<ListBox DataContext="{Binding Source={StaticResource SampleDataSource3}}"
ItemTemplate="{DynamicResource ItemTemplate1}" ItemsSource="{Binding Collection}"
ItemContainerStyle="{DynamicResource ListBoxItemStyle1}" >
</ListBox>
</Grid>