Resizing wpf window, while recording state, distorts the wpf components

Question

I want to record the state in blend for visual studio, but when i resize the window (Grid and Tab Control) for a state, the entire content will be distorted. If i am not recording then it will behave normal.

Base state of form

This is what happens when i resize

Here is the xaml code

 <Window x:Name="window" x:Class="WpfApp2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApp2"
    mc:Ignorable="d"
    Title="MainWindow" Height="208" Width="220">

<Grid x:Name="grid" HorizontalAlignment="Left" Width="213" Margin="0,0,-1,0" RenderTransformOrigin="0.5,0.5">

    <Grid.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </Grid.RenderTransform>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualStateGroup.Transitions>
                <VisualTransition From="big" GeneratedDuration="0:0:1"/>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="big">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="window">
                        <EasingDoubleKeyFrame KeyTime="0" Value="339"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="grid">
                        <EasingDoubleKeyFrame KeyTime="0" Value="1.549"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="grid">
                        <EasingDoubleKeyFrame KeyTime="0" Value="58.5"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="tabControl">
                        <EasingDoubleKeyFrame KeyTime="0" Value="1.33"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="tabControl">
                        <EasingDoubleKeyFrame KeyTime="0" Value="35.184"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <TabControl x:Name="tabControl" SelectionChanged="changes" Height="177" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">

        <TabControl.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </TabControl.RenderTransform>

        <TabItem Header="TabItem" Name="tab1">
            <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center"  Width="163.126" Height="55.88" Text="apple cat bol dog gellephant this is sample only"/>

        </TabItem>
        <TabItem Header="TabItem" Name="tab2">
        </TabItem>
    </TabControl>

</Grid>

Please help. Any help would be much appreciated.

You can use alt+printscreen to take s screenshot of just the focused window, or use or mspaint to crop. Nobody needs two giant screenshots of an IDE with a tiny window in front of it. On my phone I can't even tell the two apart. — 15ee8f99-57ff-4f92-890c-b56153, Sep 26 '17 at 17:38
That was just to give an idea of what is going on.. but i will keep that in mind next time.. sorry about that — Gaurav Raj Ghimire, Sep 26 '17 at 18:01
_"I want to record the state in blend"_ -- please be more specific. How, exactly, are you "recording the state in blend"? What do you do, precisely? — Peter Duniho, Sep 26 '17 at 19:05
I go to the states tab in blend, add states group and add new state. Then when I select the new state the recording is automatic, and any thing I do in the designer will be recorded as a new state, and when I call the state using trigger or c# code, the form will acquire that state. But in this case the resizing I want to do is causing distortion to the content. — Gaurav Raj Ghimire, Sep 26 '17 at 19:14

score 0 · Answer 1 · answered Sep 27 '17 at 06:41

I found the answer myself.

instead of

 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="grid">
                    <EasingDoubleKeyFrame KeyTime="0" Value="1.549"/>
 </DoubleAnimationUsingKeyFrames>

I had to use

 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid">
                        <EasingDoubleKeyFrame KeyTime="0" Value="909"/>
 </DoubleAnimationUsingKeyFrames>

I had to work with FrameworkElement instead of UIElements.

Resizing wpf window, while recording state, distorts the wpf components

1 Answers1