How can i flip TextBox in xaml? - xaml

Question

How can i do that by xaml triggers?

Answer 1

If you want to generate graphicaly, open your project in Blend.
Open the Trigger Tab (third tab)
+Event
In the When section , select the textbox you gave a name to, and the event LostFocus (or GotFocus)
Click on the + right of "is raised" to create a storyboard
In the object and timelines windows, select textbox, and select a point at 200ms ( 2 lines right)
Then in the property windows, Transform section, apply the rotation :
For the textbox in the property windows, LayoutTransform section, edit :
-center of rotation in the fifth tab (0;0)
-Angle of rotation in the second tab (-90)
Here is the resulting code :
<Window x:Class="DemoRotateWithTrigger.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">
<Window.Resources>
<Storyboard x:Key="OnLostFocus1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="textboxToBeRotated">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-90"/>
</DoubleAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="textboxToBeRotated">
<EasingPointKeyFrame KeyTime="0:0:0.2" Value="0,0"/>
</PointAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnGotFocus1">
<PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="textboxToBeRotated">
<EasingPointKeyFrame KeyTime="0:0:0.2" Value="0,0"/>
</PointAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="textboxToBeRotated">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="UIElement.LostFocus" SourceName="textboxToBeRotated">
<BeginStoryboard Storyboard="{StaticResource OnLostFocus1}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.GotFocus" SourceName="textboxToBeRotated">
<BeginStoryboard x:Name="OnGotFocus1_BeginStoryboard" Storyboard="{StaticResource OnGotFocus1}"/>
</EventTrigger>
</Window.Triggers>
<Grid>
<TextBox x:Name="textboxToBeRotated" HorizontalAlignment="Left" Height="23" Margin="138,158,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120" RenderTransformOrigin="0,0">
<TextBox.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-90"/>
<TranslateTransform/>
</TransformGroup>
</TextBox.RenderTransform>
</TextBox>
<Button Content="Button" HorizontalAlignment="Left" Margin="75,219,0,0" VerticalAlignment="Top" Width="75"/>
</Grid>
</Window>
Good luck

Answer 2

Set RenderTransformOrigin = new Point(0, 0) and set initial RenderTransform = new RotateTransform(-90) in Loaded event of window, then set it to 0 in GotFocus and again -90 in LostFocus.
private void Window_Loaded(object sender, RoutedEventArgs e)
{
this.TextBox1.RenderTransformOrigin = new Point(0, 0);
this.TextBox1.RenderTransform = new RotateTransform(-90);
}
private void TextBox1_GotFocus(object sender, RoutedEventArgs e)
{
this.TextBox1.RenderTransform = new RotateTransform(0);
}
private void TextBox1_LostFocus(object sender, RoutedEventArgs e)
{
this.TextBox1.RenderTransform = new RotateTransform(-90);
}
Remember to have another control in window to test LostFocus.