Develop Reference

C# WPF Android like zoom if TextBox gets Focus

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>

WPF stop and reverse Storyboard animation when new animation starts

I have 2 DataTrigger that animates the background color of a button (with reverse), this part works fine.
The problem is that when the 2 triggers are fired in overlapping times, the first trigger fired does not reverse the color, when the second trigger stops it reverses the color to whatever was the color when the previous animation stopped.
What should I do?
This is the example code:
<DataTrigger Binding="{Binding IsUp}" Value="True">
<DataTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="isDownStoryBoard"/>
<BeginStoryboard Name="isUpStoryBoard">
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Background.GradientStops[0].Color" To="#b4e391" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
<ColorAnimation Storyboard.TargetProperty="Background.GradientStops[1].Color" To="#61c419" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
<ColorAnimation Storyboard.TargetProperty="Background.GradientStops[2].Color" To="#b4e391" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
<ColorAnimation Storyboard.TargetProperty="Background.GradientStops[3].Color" To="#b4e391" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding IsDown}" Value="True">
<DataTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="isUpStoryBoard"/>
<BeginStoryboard Name="isDownStoryBoard">
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Background.GradientStops[0].Color" To="#efc5ca" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
<ColorAnimation Storyboard.TargetProperty="Background.GradientStops[1].Color" To="#d24b5a" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
<ColorAnimation Storyboard.TargetProperty="Background.GradientStops[2].Color" To="#ba2737" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
<ColorAnimation Storyboard.TargetProperty="Background.GradientStops[3].Color" To="#f18e99" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>

There is a StopStoryboard Class that you can use to stop a running Storyboard with, but there is no ReverseStoryboard class. However, you can just create another Storyboard that runs in reverse to your original one that you start when you stop the original one. You can use the StopStoryboard class like this (from the linked page on MSDN):
<!-- Begin the Storyboard -->
<EventTrigger RoutedEvent="Button.Click" SourceName="BeginButton">
<BeginStoryboard Name="MyBeginStoryboard">
<Storyboard >
<DoubleAnimation
Storyboard.TargetName="myRectangle"
Storyboard.TargetProperty="Width"
Duration="0:0:5" From="100" To="500" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
...
<!-- Stop the Storyboard -->
<EventTrigger RoutedEvent="Button.Click" SourceName="StopButton">
<StopStoryboard BeginStoryboardName="MyBeginStoryboard" />
</EventTrigger>
Also, please see the Timeline.FillBehavior Property that you can set on the Storyboard which Gets or sets a value that specifies how the Timeline behaves after it reaches the end of its active period. You can set it to the FillBehavior.HoldEnd enumeration to get the Storyboard to keep it's last value when it ends.

Move UserControl in StoryBoard

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>

Using ColorAnimationUsingKeyFrames multiple times for Stroke.Color Property

I like to use this ColorAnimationUsingKeyFrames
<Color x:Key="HighlightedColor">Yellow</Color>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00.0000000"
Duration="00:00:00.1000000"
Storyboard.TargetName="HighlightAnimatedColorBrush"
Storyboard.TargetProperty="Color"
FillBehavior="HoldEnd">
<ColorAnimationUsingKeyFrames.KeyFrames>
<LinearColorKeyFrame Value="{StaticResource HighlightedColor}" KeyTime="00:00:00.5000000"/>
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
multiple times.
At the moment I had this workaround
<shapes:MirrorTile InnerXRadius="5.0"
InnerYRadius="5.0"
OuterXRadius="57.0"
OuterYRadius="57.0"
MirrorTileAngle="45.0"
Fill="Green"
StrokeThickness="2"
CentrePoint="181.0, 181.0">
<shapes:MirrorTile.Stroke>
<SolidColorBrush x:Name="HighlightAnimatedColorBrush" Color="{StaticResource DefaultColor}"/>
</shapes:MirrorTile.Stroke>
<shapes:MirrorTile.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00.0000000"
Duration="00:00:00.1000000"
Storyboard.TargetName="HighlightAnimatedColorBrush"
Storyboard.TargetProperty="Color"
FillBehavior="HoldEnd">
<ColorAnimationUsingKeyFrames.KeyFrames>
<LinearColorKeyFrame Value="{StaticResource HighlightedColor}" KeyTime="00:00:00.5000000"/>
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</shapes:MirrorTile.Triggers>
</shapes:MirrorTile>
<shapes:MirrorTile InnerXRadius="5.0"
InnerYRadius="5.0"
OuterXRadius="57.0"
OuterYRadius="57.0"
MirrorTileAngle="45.0"
StrokeThickness="2"
Fill="Green"
CentrePoint="181.0, 181.0"
OffsetAngle="45.0">
<shapes:MirrorTile.Stroke>
<SolidColorBrush x:Name="HighlightAnimatedColorBrush2" Color="{StaticResource DefaultColor}"/>
</shapes:MirrorTile.Stroke>
<shapes:MirrorTile.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00.0000000"
Duration="00:00:00.1000000"
Storyboard.TargetName="HighlightAnimatedColorBrush2"
Storyboard.TargetProperty="Color"
FillBehavior="HoldEnd">
<ColorAnimationUsingKeyFrames.KeyFrames>
<LinearColorKeyFrame Value="{StaticResource HighlightedColor}" KeyTime="00:00:00.5000000"/>
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</shapes:MirrorTile.Triggers>
</shapes:MirrorTile>
I like to move the animation into the resources and just want to bind it to any object (at the end there will be 40 MirrorTile's).

I'm not sure which ResourceDictionary you mean, but you should be able to write something like this. Note that there is no Storyboard.TargetName any more.
<!-- somewhere in Resources -->
<Storyboard x:Key="HighlightedColorStoryboard">
<ColorAnimationUsingKeyFrames Duration="0:0:0.1"
Storyboard.TargetProperty="Stroke.Color">
<ColorAnimationUsingKeyFrames.KeyFrames>
<LinearColorKeyFrame Value="{StaticResource HighlightedColor}"
KeyTime="0:0:0.5"/>
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
</Storyboard>
and then use it like this (without binding):
<shapes:MirrorTile.Stroke>
<SolidColorBrush Color="{StaticResource DefaultColor}"/>
</shapes:MirrorTile.Stroke>
<shapes:MirrorTile.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard
Storyboard="{StaticResource HighlightedColorStoryboard}"/>
</EventTrigger>
...
</shapes:MirrorTile.Triggers>

Template for image with effects and triggers

Hi I have wpf xaml code as shown below
<Image Source="/MyProject;component/Resources/Icons/button_cancel_256.png"
DockPanel.Dock="Right"
Margin="0,1,10,1"
RenderTransformOrigin="0.5,0.5"
>
<Image.RenderTransform>
<ScaleTransform x:Name="ImageScaleTransform"
ScaleX="1" ScaleY="1"
/>
</Image.RenderTransform>
<Image.Effect>
<DropShadowEffect x:Name="ImageGlowEffect"
BlurRadius="20"
ShadowDepth="0"
Color="White">
</DropShadowEffect>
</Image.Effect>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="ImageGlowEffect"
Storyboard.TargetProperty="Color"
From="White"
To="Red"
Duration="0:0:1">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="ImageGlowEffect"
Storyboard.TargetProperty="Color"
From="Red"
To="White"
Duration="0:0:1">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ImageScaleTransform"
Storyboard.TargetProperty="ScaleX"
From="1"
To=".9"
Duration="0:0:0.1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetName="ImageScaleTransform"
Storyboard.TargetProperty="ScaleY"
From="1"
To=".9"
Duration="0:0:0.1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeftButtonUp">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ImageScaleTransform"
Storyboard.TargetProperty="ScaleX"
From=".9"
To="1"
Duration="0:0:0.1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetName="ImageScaleTransform"
Storyboard.TargetProperty="ScaleY"
From=".9"
To="1"
Duration="0:0:0.1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Image.Triggers>
Now i want to create a style or template so that I can apply this to other images where i can specify the color.
Please help i have not been able to do it after various tries.

Adding to what EvAlex posted, you can dynamically change the colors specific to an Image then use DynamicResource and Opacity double animation (in place of ColorAnimation) as below...
<Style TargetType="{x:Type Image}"
x:Key="DropShadowImageStyle">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform
ScaleX="1"
ScaleY="1" />
</Setter.Value>
</Setter>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect
BlurRadius="20"
ShadowDepth="0"
Opacity="0"
Color="{DynamicResource MyToColor}">
</DropShadowEffect>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Effect.Opacity"
From="0"
To="1"
Duration="0:0:1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Effect.Opacity"
From="1"
To="0"
Duration="0:0:1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleX"
From="1"
To=".9"
Duration="0:0:0.1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleY"
From="1"
To=".9"
Duration="0:0:0.1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeftButtonUp">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleX"
From=".9"
To="1"
Duration="0:0:0.1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleY"
From=".9"
To="1"
Duration="0:0:0.1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
<StackPanel Orientation="Horizontal">
<Image Source="MyImage1.JPG"
Width="50" Height="50" Margin="5"
Style="{StaticResource DropShadowImageStyle}">
<Image.Resources>
<Color x:Key="MyToColor">Red</Color>
</Image.Resources>
</Image>
<Image Source="MyImage2.JPG"
Width="50" Height="50" Margin="5"
Style="{StaticResource DropShadowImageStyle}">
<Image.Resources>
<Color x:Key="MyToColor">Blue</Color>
</Image.Resources>
</Image>
<Image Source="MyImage3.JPG"
Width="50" Height="50" Margin="5"
Style="{StaticResource DropShadowImageStyle}">
<Image.Resources>
<Color x:Key="MyToColor">Orange</Color>
</Image.Resources>
</Image>
</StackPanel>

Here's the style - works well. The problem was with Storyboard.TargetName property. I just removed it and modified Storyboard.TargetProperty. That's why I asked you in a comment what was your problem. It would be much easier for me if you specified additional information from the beginning.
<Style TargetType="Image">
<Setter Property="Margin" Value="0,1,10,1"/>
<Setter Property="DockPanel.Dock" Value="Right"/>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="20" ShadowDepth="0" Color="White"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Effect.Color"
From="White"
To="Red"
Duration="0:0:1">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Effect.Color"
From="Red"
To="White"
Duration="0:0:1">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleX"
From="1"
To=".9"
Duration="0:0:0.1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleY"
From="1"
To=".9"
Duration="0:0:0.1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeftButtonUp">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleX"
From=".9"
To="1"
Duration="0:0:0.1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleY"
From=".9"
To="1"
Duration="0:0:0.1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>