1

CanvasアプリケーションにbackgroundをオーバーレイさせたいImage。には、ドラッグ アンド ドロップで再配置 (設定、 )できるCanvasオブジェクト ( など) が含まれます。TextBlocksTopLeft

アプリケーションには、いくつかのサイズ変更オプションが必要です: None、Fill、Uniform。または、ユーザーは特定のディメンションを設定できます。

これらのサイズ変更オプションを微調整すると、Canvas、Image、およびすべての子オブジェクトのサイズをすべて変更して、すべてが正しく「スケーリング」されるようにする必要があります。つまり、背景のImageスケーリングに加えて、ドラッグ アンド ドロップ項目を正しく再配置する必要があります。

Viewbox を「コンテナ」コントロールとして使用することから始めました。Stretch プロパティを None、Fill、Uniform オプションに設定すると、すべてが「スケーリング」するように見えます。

<Viewbox x:Name="Viewbox">
   <Grid>
      <Image x:Name="Image" Stretch="Fill" Source="Background.bmp" />
      <Canvas x:Name="Canvas" Background="Transparent">
         <TextBlock Text="Test1" Background="Gray" Canvas.Top="170" Canvas.Left="50" />
         <TextBlock Text="Test2" Background="Gray" Canvas.Top="225" Canvas.Left="80" />
         <TextBlock Text="Test3" Background="Gray" Canvas.Top="170" Canvas.Left="150" />
      </Canvas>
   </Grid>
</Viewbox>

private void StretchModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
   this.Viewbox.Stretch = (Stretch)this.StretchModeComboBox.SelectedValue;
}

特定の寸法のサイジングを実現するために、キャンバス、画像、およびビューボックスの寸法を単純に変更しました。ここでの問題は、ドラッグ アンド ドロップ オブジェクトが正しく再配置されないことです。それらは、正しくない元の Top, Left 設定のままです。

private void ResizeButton_Click(object sender, RoutedEventArgs e)
{
   this.Viewbox.Stretch = Stretch.None;

   this.Viewbox.Height = this.Canvas.Height = this.Image.Height = Convert.ToDouble(this.HeightTextBox.Text);
   this.Viewbox.Width = this.Canvas.Width = this.Image.Width = Convert.ToDouble(this.WidthTextBox.Text);
}

特定のディメンション機能を実現するには、ScaleTransform を使用して高さ/幅の変更をシミュレートする必要があると思いますか? これは正しい方法のように聞こえますか? そうすれば、ユーザーが特定の寸法を入れると、すべてがスケーリングされます。

特定の寸法 (高さ/幅) をパラメーターに変換して、スケール変換に渡すにはどうすればよいですか?

デフォルトのサイズ変更オプションを使用したアプリケーションを次に示します (灰色の背景の TextBlocks に注意してください - Test1、Test2、Test3)。

ここに画像の説明を入力

Fill オプションが設定されたアプリケーションを次に示します (ここでも、TextBlocks が残っていることに注意してください)。

ここに画像の説明を入力

最後に、特定のサイズが設定されたアプリケーション (1000 x 1000) を示します (TextBlocks が元の Top および Left 設定のままであることに注意してください)。これは私が望んでいることではありません。それらを原点に対して再配置したい。

ここに画像の説明を入力

4

0 に答える 0