状態の記録中にwpfウィンドウのサイズを変更すると、wpfコンポーネントが歪みます

Question

Visual Studioのブレンドで状態を記録しますが、状態のウィンドウ（グリッドとタブコントロール）のサイズを変更するとコンテンツ全体が歪んで表示されます。私が録音していない場合、それは正常に動作します。

フォームの基本状態

これは、私がここで

のサイズを変更するときに何が起こるかですXAMLコード

<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> 

が助けてくださいです。どんな助けでも大歓迎です。

Answer 1

私は自分自身で答えを見つけました。

代わりの

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

私はFrameworkElementの代わりにのUIElementで仕事をしていた

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

を使用する必要がありました。