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

グリッド内に2つのキャンバスを重ねて配置します。スケーラブルな子供を1つのキャンバスに配置し、スケーラブルな子供を別のキャンバスに配置します。スケーラブルなキャンバス上で変形を行います。