1

ビジュアルブラシ内で多数の形状をアニメーション化しようとしていますが、回転を実行すると形状が「パルス」します。形状が回転すると、バウンディング ボックスがレイアウト パスを強制していると想定しています。ただし、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 平面を装飾する、はるかに複雑なアプリケーションの単純なサンプルです。ブラシをアニメーション化するまでは、すべてうまく機能します。私はいくつかの異なるアプローチを試みましたが、常にこのレイアウトの問題に遭遇しているようです。

任意の提案をいただければ幸いです。

ありがとう

ロブ

4

2 に答える 2

2

問題の原因を突き止めることができました。のStretch="Uniform"プロパティ設定に関係していますVisualBrush。フレームワークが 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>

問題の解決に関しては、よくわかりません。1 つの方法はStretch="None"、VisualBrush で使用することですが、VisualBrush.Visual コンテンツのサイズを処理する必要があるため、理想的ではないようです。

于 2012-03-15T20:34:33.620 に答える
0

かなりの試行錯誤の末、私は実用的な解決策を見つけました。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 でラップし、これを Border でラップしているようです。(Grid、DockPanel、および WrapPanel も StackPanel の代わりに機能します)。

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

Border には、BorderBrush セットと BorderThickness が必要です。また、両方とも明示的な幅と高さが必要です。ここでは、コンテンツに適切な値を設定して、正しくスケーリングします。

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

満足のいく解決策ではありません。ここで何が起こっているのか、誰かが光を当てることができれば幸いです。

少なくとも、上記のデモと私のメイン アプリケーションの両方で動作します。

ロブ

于 2012-03-16T20:32:34.320 に答える