WPFのRenderTransformが予期しないレイアウト変更を引き起こす

Question

私はビジュアルブラシ内のいくつかの図形をアニメーション化しようとしていますが、回転を実行すると図形が「パルス」します。私は、形状が回転するにつれて、境界ボックスがレイアウト・パスを強制していると仮定しています。しかし、私はRenderTransformを使用しているので、私はこれがレイアウトの変更を引き起こすことを期待していませんでした。

このコードは、問題を示しています。

<Window x:Class="WpfApplication1.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Height="200" Width="200"> 
<StackPanel> 
    <Border BorderBrush="Red" BorderThickness="1" 
      Height="100" Width="100"> 
     <Border.Triggers> 
      <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
       <BeginStoryboard> 
        <Storyboard RepeatBehavior="Forever" > 
         <DoubleAnimationUsingKeyFrames Storyboard.TargetName="inner_Ellipse" 
          Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"> 
          <LinearDoubleKeyFrame KeyTime="0:0:3" Value="-360"/> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
       </BeginStoryboard> 
       <BeginStoryboard> 
        <Storyboard RepeatBehavior="Forever" > 
         <DoubleAnimationUsingKeyFrames Storyboard.TargetName="outer_Ellipse" 
          Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)">            
          <LinearDoubleKeyFrame KeyTime="0:0:3" Value="360"/> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
     </Border.Triggers> 
     <Border.Background> 
      <VisualBrush Stretch="Uniform"> 
       <VisualBrush.Visual>      
        <Canvas Width="20" Height="20"> 
         <Ellipse x:Name="outer_Ellipse" 
           Stroke="Blue" StrokeThickness="1" 
           Width="20" Height="20" 
           RenderTransformOrigin="0.5,0.5"> 
          <Ellipse.RenderTransform> 
            <RotateTransform/> 
          </Ellipse.RenderTransform> 
         </Ellipse> 
         <Ellipse x:Name="inner_Ellipse" 
            Stroke="Red" StrokeThickness="1" 
            Width="18" Height="18" 
            Margin="1,1,0,0" 
            RenderTransformOrigin="0.5,0.5"> 
          <Ellipse.RenderTransform> 
            <RotateTransform/> 
          </Ellipse.RenderTransform> 
         </Ellipse> 
        </Canvas> 
       </VisualBrush.Visual> 
      </VisualBrush> 
     </Border.Background> 
    </Border> 
</StackPanel> 

これは私が3dに操作されている2Dの平面を飾るためにビジュアルブラシを使用していますはるかに複雑アプリケーションの簡単なサンプルです。私はブラシを試してアニメーションするまでうまく動作します。私はいくつかの異なるアプローチを試しましたが、このレイアウトの問題に常に遭遇しているようです。

感謝の意を表します。

ロブ

Answer 1

多くの試行錯誤の後、私は実用的な解決策を持っています。たVisualBrushの内容が正しくスケールとバウンディングボックスの問題は発生しません：「秘密」を

<Window x:Class="WpfApplication1.MainWindow" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    SizeToContent="WidthAndHeight" > 
<StackPanel> 
    <Border BorderBrush="Black" BorderThickness="1" 
     Height="400" Width="400"> 
     <Border.Triggers> 
      <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
       <BeginStoryboard> 
        <Storyboard RepeatBehavior="Forever" > 
         <DoubleAnimationUsingKeyFrames Storyboard.TargetName="inner_Ellipse" 
         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"> 
          <LinearDoubleKeyFrame KeyTime="0:0:3" Value="-360"/> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
       </BeginStoryboard> 
       <BeginStoryboard> 
        <Storyboard RepeatBehavior="Forever" > 
         <DoubleAnimationUsingKeyFrames Storyboard.TargetName="outer_Ellipse" 
         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"> 
          <LinearDoubleKeyFrame KeyTime="0:0:3" Value="360"/> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
     </Border.Triggers> 

     <Border.Background> 
      <VisualBrush Stretch="UniformToFill"> 
       <VisualBrush.Visual> 
        <Border BorderBrush="Transparent" BorderThickness="1" 
          Width="200" Height="200"> 
         <StackPanel Width="200" Height="200"> 
          <Canvas> 
           <Rectangle x:Name="outer_Ellipse" 
             Stroke="Blue" StrokeThickness="1" 
             Width="20" Height="200" 
              Canvas.Left="40" 
             RenderTransformOrigin="0.5,0.5"> 
            <Rectangle.RenderTransform> 
             <RotateTransform/> 
            </Rectangle.RenderTransform> 
           </Rectangle> 
           <Ellipse x:Name="inner_Ellipse" 
             Stroke="Red" StrokeThickness="1" 
             StrokeDashArray="2" 
             Canvas.Top="30" 
             Canvas.Left="20" 
             Width="200" Height="200" 
             RenderTransformOrigin="0.5,0.5"> 
            <Ellipse.RenderTransform> 
             <RotateTransform/> 
            </Ellipse.RenderTransform> 
           </Ellipse> 
          </Canvas> 
         </StackPanel> 
        </Border> 
       </VisualBrush.Visual> 
      </VisualBrush> 
     </Border.Background> 
    </Border> 
</StackPanel> 
</Window> 

をキャンバスのStackPanelでブラシの内容を含むとボーダーでこれをラップを包むように見えます。 （StackPanelの代わりにGrid、DockPanel、WrapPanelも機能します）。

     <Border BorderBrush="Transparent" BorderThickness="1" 
          Width="200" Height="200"> 
         <StackPanel Width="200" Height="200"> 

境界線には、BorderBrushセットとBorderThicknessが必要です。また、両方とも明示的な幅と高さを持たなければなりません。ここでは、コンテンツに適切な値を設定して、正しくスケールするようにしました。

これらのコンポーネントの3つがすべてない場合、バウンディングボックスの問題が発生します。コンテナのレイアウトポリシーについては明らかに違いがありますが、何が原因か分かりません。

満足のいく解決策ではありません。誰かがここで起こっていることについて誰かが光を照らすことができれば、私は感謝します。

これまでのデモと私の主なアプリケーションの両方で、これまでどおりに動作します。

ロブ

Answer 2

おかげで私はあなたの問題の原因を突き止めることができました。 VisualBrushのStretch="Uniform"プロパティ設定と関係しています。フレームワークはあなたのVisuaBrush.Visual上で境界の四角形を計算しているように見え、それをBorder.Backgroundに合わせて伸ばしています。次のコードは、動作を説明する必要があります。私はあなたのinner_Ellipseを取り出し、外接矩形が引き伸ばされてシミュレートする必要がありouter_Rectangle追加：

<Window x:Class="WpfApplication1.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Height="200" Width="200"> 
    <StackPanel> 
     <Border BorderBrush="Red" BorderThickness="1" 
      Height="100" Width="100"> 
      <Border.Triggers> 
       <EventTrigger RoutedEvent="FrameworkElement.Loaded">     
        <BeginStoryboard> 
         <Storyboard RepeatBehavior="Forever" > 
          <DoubleAnimationUsingKeyFrames Storyboard.TargetName="outer_Rectangle" 
          Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"> 
           <LinearDoubleKeyFrame KeyTime="0:0:6" Value="360"/> 
          </DoubleAnimationUsingKeyFrames> 
         </Storyboard> 
        </BeginStoryboard> 
        <BeginStoryboard> 
         <Storyboard RepeatBehavior="Forever" > 
          <DoubleAnimationUsingKeyFrames Storyboard.TargetName="outer_Ellipse" 
          Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"> 
           <LinearDoubleKeyFrame KeyTime="0:0:6" Value="360"/> 
          </DoubleAnimationUsingKeyFrames> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger> 
      </Border.Triggers> 
      <Border.Background> 
       <VisualBrush Stretch="Uniform"> 
        <VisualBrush.Visual> 
         <Canvas Width="20" Height="20"> 
          <Ellipse x:Name="outer_Ellipse" 
           Stroke="Blue" StrokeThickness="1" 
           Width="20" Height="20" 
           RenderTransformOrigin="0.5,0.5"> 
           <Ellipse.RenderTransform> 
            <RotateTransform/> 
           </Ellipse.RenderTransform> 
          </Ellipse> 
          <Rectangle x:Name="outer_Rectangle" 
           Stroke="Blue" StrokeThickness="1" 
           Width="20" Height="20" 
           RenderTransformOrigin="0.5,0.5"> 
           <Rectangle.RenderTransform> 
            <RotateTransform/> 
           </Rectangle.RenderTransform> 
          </Rectangle> 
         </Canvas> 
        </VisualBrush.Visual> 
       </VisualBrush> 
      </Border.Background> 
     </Border> 
    </StackPanel> 
</Window> 

問題を解決するためとして、私はわからないが。 VisualBrushにStretch="None"を使用する方法がありますが、それはあなたのVisualBrushのサイズに対処するためには理想的ではないようです.Visualの内容。