WPF Xaml：在保持 child 图像大小的同时缩放 parent 面板

Question

我正在尝试针对 canvas 的 children 在 canvas 应用了缩放变换时的行为规范。特别是对于图像，我需要支持图像在缩放 parent 时保持其宽度和高度的情况。当我调查渲染和布局比例变换时，似乎 child 不会自动意识到应用于祖先的变换，因此不遵守它的拉伸规则。

下面是 xaml 中的示例：

<Canvas Background="#99000000">
    <Canvas Background="white" Canvas.Left="100"  Canvas.Top="100" Width="400" Height="300">
        <UserControl x:Name="_panelGreen" RenderTransformOrigin=".5 .5">
            <Canvas Background="#FF9ACD32" Width="100" Height="100">
                <TextBlock Text="Green Box"></TextBlock>
            </Canvas>
        </UserControl>
        <UserControl x:Name="_panelRed" RenderTransformOrigin=".5 .5">
            <UserControl.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="{Binding Path=Value, ElementName=xScale}" ScaleY="{Binding Path=Value, ElementName=yScale}" />
                    <RotateTransform Angle="{Binding Path=Value, ElementName=Rotate}"/>
                    <TranslateTransform X="{Binding Path=Value, ElementName=xTranslate}" Y="{Binding Path=Value, ElementName=yTranslate}"/>
                </TransformGroup>
            </UserControl.RenderTransform>
            <Canvas Background="red" Width="100" Height="100">
                <Image Source="Error-50.png" Stretch="None" Width="50" Height="50"></Image>
                <TextBlock Text="Red Box"></TextBlock>
            </Canvas>
        </UserControl>

    </Canvas>
    <StackPanel Canvas.Left="800">
        <Label Content="Rotate"></Label>
        <Slider Name="Rotate" Margin="10,10,10,0" Minimum="0" Maximum="359" Width="100" TickFrequency="1" IsSnapToTickEnabled="True"/>
        <Label Content="X Position"></Label>
        <Slider Name="xTranslate" Margin="10,10,10,0" Minimum="0" Maximum="500" Width="100" TickFrequency="1" IsSnapToTickEnabled="True"/>
        <Label Content="Y Position"></Label>
        <Slider Name="yTranslate" Margin="10,10,10,0" Minimum="0" Maximum="500" Width="100" TickFrequency="1" IsSnapToTickEnabled="True"/>
        <Label Content="X Scale"></Label>
        <Slider Name="xScale" Margin="10,10,10,0" Minimum="1" Maximum="2" Width="100" TickFrequency=".1" IsSnapToTickEnabled="True"/>
        <Label Content="Y Scale"></Label>
        <Slider Name="yScale" Margin="10,10,10,0" Minimum="1" Maximum="2" Width="100" TickFrequency=".1" IsSnapToTickEnabled="True"/>
    </StackPanel>
</Canvas>

无论变换是渲染还是布局，图像都会在 parent 缩放时缩放。

我想知道是否有人建议在 parent 比例期间保持图像 50x50 的方法。我是否应该尝试通过订阅 parent 比例尺的更改事件来对图像应用逆比例尺？

管理这个系统的实际规则可能比这更复杂，因为我必须使用 n-depth 树来实现它。我在这里尝试从最基本的示例开始。

Answer 1

将两个画布放在一个网格中，将它们重叠放置。将可缩放 children 放入一个 canvas，将 non-scaleable 放入另一个。仅在可缩放 canvas.

上进行转换

WPF Xaml：在保持 child 图像大小的同时缩放 parent 面板

WPF Xaml : Scaling parent panel while maintaining child image size

c#

wpf

xaml

transform

scale