WPFの矩形を同時にアニメーション化する方法

Question

幅を0からあるオフセットまで色を赤で、残りの幅を異なる色でアニメーションする矩形があります。 どのようにすればいいですか？

例： アニメーションの流れ - >

| <を開始 - 赤 - >ストップ|開始< - グリーン - >停止|

Answer 1

RectangleあなたはContentを許可していません。したがって、FillをVisualBrushまたはDrawingBrushとして使用することができます。このVisualBrushは2つのRectangleオブジェクトとStackPanelを持つことになります

たVisualBrushアプローチ。そのままコードの下

ラン：

<Rectangle Height="100" Stroke="Black"> 
    <Rectangle.Triggers> 
     <EventTrigger RoutedEvent="Loaded"> 
      <BeginStoryboard> 
       <Storyboard> 
        <DoubleAnimation Storyboard.TargetProperty="Width" From="0" To="200" Duration="0:0:10"/> 
        <DoubleAnimation Storyboard.TargetName="LeftRect" Storyboard.TargetProperty="Width" From="0" To="100" Duration="0:0:5"/> 
        <DoubleAnimation Storyboard.TargetName="RightRect" Storyboard.TargetProperty="Width" From="0" To="100" Duration="0:0:5" BeginTime="0:0:5"/> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
    </Rectangle.Triggers> 
    <Rectangle.Fill> 
     <VisualBrush Stretch="None" AlignmentX="Left"> 
      <VisualBrush.Visual> 
       <StackPanel Orientation="Horizontal"> 
        <Rectangle x:Name="LeftRect" Height="100"> 
         <Rectangle.Style> 
          <Style TargetType="Rectangle"> 
           <Setter Property="Fill" Value="Red"/> 
           <Setter Property="Width" Value="0"/> 
          </Style> 
         </Rectangle.Style> 
        </Rectangle> 
        <Rectangle x:Name="RightRect" Height="100"> 
         <Rectangle.Style> 
          <Style TargetType="Rectangle"> 
           <Setter Property="Fill" Value="Green"/> 
           <Setter Property="Width" Value="0"/> 
          </Style> 
         </Rectangle.Style> 
        </Rectangle> 
       </StackPanel> 
      </VisualBrush.Visual> 
     </VisualBrush> 
    </Rectangle.Fill>   
</Rectangle> 

DrawingBrushアプローチ

このDrawingBrushはRectangleGeometryを持つことになりますし、任意のControlを使用しません。

<Rectangle Height="100" Width="300" Stroke="Black" StrokeThickness="2" RenderTransformOrigin="0,0.5"> 

    <Rectangle.Triggers> 
     <EventTrigger RoutedEvent="Loaded"> 
      <BeginStoryboard> 
       <Storyboard> 
        <DoubleAnimation Storyboard.TargetName="LeftScaleX" Storyboard.TargetProperty="ScaleX" From="0" To="1" Duration="0:0:1"/> 
        <DoubleAnimation Storyboard.TargetName="RightScaleX" Storyboard.TargetProperty="ScaleX" From="0" To="1" Duration="0:0:1" BeginTime="0:0:1"/> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
    </Rectangle.Triggers> 

    <Rectangle.Fill> 
     <DrawingBrush AlignmentX="Left" Stretch="None"> 
      <DrawingBrush.Drawing> 
       <DrawingGroup> 
        <GeometryDrawing Brush="Red">         
         <GeometryDrawing.Geometry> 
          <RectangleGeometry x:Name="LeftRect" Rect="0 0 200 100"> 
           <RectangleGeometry.Transform> 
            <TransformGroup> 
             <ScaleTransform x:Name="LeftScaleX" ScaleX="0" CenterY="50"/> 
            </TransformGroup> 
           </RectangleGeometry.Transform> 
          </RectangleGeometry> 
         </GeometryDrawing.Geometry> 
        </GeometryDrawing> 
        <GeometryDrawing Brush="Green"> 
         <GeometryDrawing.Geometry> 
          <RectangleGeometry Rect="200 0 300 100"> 
           <RectangleGeometry.Transform> 
            <TransformGroup> 
             <ScaleTransform x:Name="RightScaleX" ScaleX="0" CenterX="200"/> 
            </TransformGroup> 
           </RectangleGeometry.Transform> 
          </RectangleGeometry> 
         </GeometryDrawing.Geometry> 
        </GeometryDrawing> 
       </DrawingGroup> 
      </DrawingBrush.Drawing> 
     </DrawingBrush> 
    </Rectangle.Fill> 

</Rectangle> 

Answer 2

もっと簡単な方法は、ViewPortプロパティをアニメートすることです。

<Rectangle Stroke="Black" Margin="44,67,44,0" Width="0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="100"> 
     <Rectangle.Triggers> 
      <EventTrigger RoutedEvent="Loaded"> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetProperty="Width" To="300" Duration="0:0:1"/> 
         <RectAnimation Storyboard.TargetName="Brush1" Storyboard.TargetProperty="(DrawingBrush.Viewport)" To="0,0, 300,100" Duration="0:0:1"/> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
     </Rectangle.Triggers> 
     <Rectangle.Fill> 
      <DrawingBrush x:Name="Brush1" Viewport="0,0,0,100" AlignmentX="Left" Stretch="None" ViewportUnits="Absolute"> 
       <DrawingBrush.Drawing> 
        <DrawingGroup> 
         <GeometryDrawing Brush="Red"> 
          <GeometryDrawing.Geometry> 
           <RectangleGeometry Rect="0,0, 200, 100"/> 
          </GeometryDrawing.Geometry> 
         </GeometryDrawing> 
         <GeometryDrawing Brush="Green"> 
          <GeometryDrawing.Geometry> 
           <RectangleGeometry Rect="200,0, 100, 100"/> 
          </GeometryDrawing.Geometry> 
         </GeometryDrawing> 
        </DrawingGroup> 
       </DrawingBrush.Drawing> 
      </DrawingBrush> 
     </Rectangle.Fill> 
    </Rectangle>