WPF Xaml：在保持子图像大小的同时缩放父面板答案

【问题标题】：WPF Xaml : Scaling parent panel while maintaining child image sizeWPF Xaml：在保持子图像大小的同时缩放父面板
【发布时间】：2016-05-22 14:49:20
【问题描述】：

我正在尝试实现一个规范，说明当画布应用了缩放变换时画布的子项的行为方式。特别是对于图像，我需要支持图像在其父级缩放时保持其宽度和高度的情况。当我研究渲染和布局比例变换时，似乎孩子不会自动意识到应用于祖先的变换，因此不遵守它的拉伸规则。

以下是 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>

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

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

管理这个系统的实际规则可能比这更复杂，因为我必须使用 n 深度树来完成这项工作。我在这里尝试从最基本的示例开始。

【问题讨论】：

标签： c# wpf xaml transform scale

【解决方案1】：

将两个画布放在一个网格内，将它们重叠放置。将可缩放的子元素放入一个画布中，将不可缩放的子元素放入另一个画布中。只在可缩放的画布上进行变换。

【讨论】：