Wie WPF Rechteck Breite und Fill Eigenschaft gleichzeitig animieren

Question

Ich habe ein Rechteck, für das ich die Breite von 0 bis zu einem Offset mit einer Farbe sagen wollen, sagen Rot und die verbleibende Breite mit unterschiedlicher Farbe sagen Grün. Irgendeine Idee, wie man es macht?

Beispiel: Animationsfluss ->

| starten < - Rot -> Stop | start < - Grün -> stop |

Answer 1

Rectangle nicht erlaubt haben Sie Content drin. So können Sie Fill als VisualBrush oder DrawingBrush verwenden.

VisualBrush Ansatz

Diese VisualBrush eine StackPanel mit zwei Rectangle Objekte haben.

Run Code unten, wie es ist:

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

Diese DrawingBrush wird RectangleGeometry haben und wird keine Control verwenden.

<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

Ein wesentlich einfacherer Ansatz wäre ViewPort Eigenschaft zu animieren.

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