WPF Xaml: Skalieren des übergeordneten Bedienfelds unter Beibehaltung der Größe des untergeordneten Bilds

Question

Ich versuche, eine Spezifikation für die Funktionsweise von untergeordneten Elementen einer Arbeitsfläche zu implementieren, wenn auf die Arbeitsfläche eine Skalierungstransformation angewendet wird. Speziell für Bilder muss ich Fälle unterstützen, in denen ein Bild seine Breite und Höhe beibehält, wenn das übergeordnete Element skaliert wird. Wenn ich sowohl die Render- als auch die Layout-Skalierungstransformation untersuche, scheint es, dass ein untergeordnetes Element Transformationen, die auf Vorfahren angewendet werden, nicht automatisch erkennt und daher seiner Dehnungsregel nicht folgt. Hier

ist ein Beispiel, in 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> 

Unabhängig davon, ob die Transformation machen oder das Layout, die Bild Skalen, wenn die übergeordneten Skalen.

Ich frage mich, ob jemand einen Vorschlag für einen Ansatz hat, um das Bild 50x50 während der übergeordneten Skala zu halten. Sollte ich versuchen, eine umgekehrte Skala auf das Bild anzuwenden, indem ich das geänderte Ereignis der übergeordneten Skala abonniere?

Die tatsächlichen Regeln, die dieses System steuern, können komplexer sein, da ich dies mit einem n-tiefen Baum machen muss. Ich versuche hier mit dem einfachsten Beispiel anzufangen.

Answer 1

Platzieren Sie zwei Canvases in einem Raster und platzieren Sie sie überlappend. Platzieren Sie skalierbare Kinder in eine Leinwand und nicht skalierbare Kinder in eine andere. Verwandle dich nur auf die skalierbare Leinwand.