WPF Xaml: масштабирование родительской панели при сохранении размера дочернего изображения

Question

Я пытаюсь реализовать спецификацию поведения дочерних элементов холста, когда к нему применено масштабируемое масштабирование. В частности, для изображений мне необходимо поддерживать случаи, когда изображение поддерживает ширину и высоту изображения при масштабировании родителя. Когда я исследую как масштабные преобразования Render, так и Layout, кажется, что ребенок не осознает автоматически преобразования, применяемые к предкам, и поэтому не подчиняется его правилу растяжения.

Ниже приведен пример в 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 глубины. Я пытаюсь начать с самого элементарного примера.

Answer 1

Поместите два холста внутри сетки, разместив их наложенными. Поместите масштабируемых детей в один холст, а не масштабируемые в другой. Преобразуйте только масштабируемое полотно.