一起制作2个矩形动画

答案是,更多的是面向C#而不是XAML。

为ScaleTransform和Slider提供名称以在代码中处理它们。 没有数据绑定。

<Canvas x:Name="root" Margin="20 20" RenderTransformOrigin="0,0" >
    <Canvas.RenderTransform>
        <TransformGroup>
            <!--ScaleX="{Binding ElementName=sliderScale, Path=Value}" ScaleY="{Binding ElementName=sliderScale, Path=Value}"-->
            <ScaleTransform x:Name="scaleTransform" />
        </TransformGroup>
    </Canvas.RenderTransform>
    <Rectangle Fill="Red" Stroke="Black" Width="200" Height="200"/>
    <Rectangle Canvas.Top="20" Canvas.Left="20" Stroke="Black" Fill="Green"  Width="100" Height="100"/>
</Canvas>
    <Slider x:Name="sliderScale"
        ValueChanged="SliderScaleValueChanged"
        Canvas.Left="35" Canvas.Top="251" Height="25" Width="273" Value="1" Maximum="2" Margin="74,249,170,45"/>  

ValueChanged回调用于更改画布上保存矩形的比例变换:

private void SliderScaleValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    scaleTransform.ScaleX =
    scaleTransform.ScaleY = sliderScale.Value;
}

对于第一个XAML答案和第二个更面向C#的答案,您至少应该有一个满足以下条件的答案:-)

当做

矩形和其他框架元素(如Texblock)都可以使用Panel子类(如Grid、Canvas…)组合。 然后对网格应用缩放变换,缩放两个矩形。

下面是一个代码示例,您可以尝试使用滑块放大/缩小:

<Grid>
    <Canvas x:Name="root" Margin="20 20" RenderTransformOrigin="0,0" >
        <Canvas.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleX="{Binding ElementName=sliderScale, Path=Value}" ScaleY="{Binding ElementName=sliderScale, Path=Value}"/>
            </TransformGroup>
        </Canvas.RenderTransform>
        <Rectangle Fill="Red" Stroke="Black" Width="200" Height="200"/>
        <Rectangle Canvas.Top="20" Canvas.Left="20" Stroke="Black" Fill="Green"  Width="100" Height="100"/>
    </Canvas>
    <Slider x:Name="sliderScale" Canvas.Left="35" Canvas.Top="251" Height="25" Width="273" Value="1" Maximum="2" Margin="74,249,170,45"/>
</Grid>

所有转换都在XAML中进行,但可以在C#/Vb中进行。网络也是如此。

当做