Question

我有一个矩形，我想要将宽度从0设置为某个偏移，颜色为红色，剩余的宽度为不同颜色，请说为绿色。知道怎么做吗？

实施例：动画流程 - ＆gt;

| start＆lt; - Red - ＆gt;停止|开始＆lt; - 绿色 - ＆gt;停止|

Answer 1

Rectangle不允许您拥有Content。因此，您可以将Fill用作VisualBrush或DrawingBrush。

VisualBrush方法

此VisualBrush将包含StackPanel个Rectangle个对象。

按原样运行以下代码：

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

如何同时为WPF矩形宽度和填充属性设置动画

2 个答案: