CODEWITHSUNDEEP
xaml
Nadir Mezhoudi
Nadir Mezhoudi

Reputation: 155

How can i flip TextBox in xaml?

How can i do that by xaml triggers? enter image description here

Upvotes: 0

Views: 93

Answers (2)

Emmanuel DURIN
Emmanuel DURIN

Reputation: 4913

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

Upvotes: 1

Reza Aghaei
Reza Aghaei

Reputation: 125197

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.

Upvotes: 1

Related Questions