ウィンドウを大きくする/小さくすると円が大きくなる/小さくなる

Question

5オリンピックリングを含む学校用にWPFアプリケーションを作成する必要があります。 特定のチェックボックスをオンまたはオフにすると、個別に表示/非表示にする必要があります。 また、ウィンドウを大きく/小さくすると、サイズを大きくしたり小さくしたりする必要があります。

これまでのところ、私はこの

XAMLコードがあります。

<Window x:Class="Labo_uitbereidingsopdracht_1___Olympische_Ringen.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:local="clr-namespace:Labo_uitbereidingsopdracht_1___Olympische_Ringen" 
     mc:Ignorable="d" 
     Title="Olympische Ringen" Height="360" Width="510" SizeChanged="Window_SizeChanged" Name="window"> 
    <Grid> 
     <CheckBox Name="cbRing1" Content="Ring 1" Margin="0,0,300,50" HorizontalAlignment="Center" Width="70" Height="15" VerticalAlignment="Bottom" IsChecked="True" Grid.Row="1"/> 
     <CheckBox Name="cbRing2" Content="Ring 2" Margin="0,0,0,50" HorizontalAlignment="Center" Width="70" Height="15" VerticalAlignment="Bottom" IsChecked="True" Grid.Row="1"/> 
     <CheckBox Name="cbRing3" Content="Ring 3" Margin="0,0,-300,50" HorizontalAlignment="Center" Width="70" Height="15" VerticalAlignment="Bottom" IsChecked="True" Grid.Row="1"/> 
     <CheckBox Name="cbRing4" Content="Ring 4" Margin="0,0,150,20" HorizontalAlignment="Center" Width="70" Height="15" VerticalAlignment="Bottom" IsChecked="True" Grid.Row="1"/> 
     <CheckBox Name="cbRing5" Content="Ring 5" Margin="0,0,-150,20" HorizontalAlignment="Center" Width="70" Height="15" VerticalAlignment="Bottom" IsChecked="True" Grid.Row="1"/> 
     <Label Name="lbl" Content="Instellingen" Margin="37,0,37,75" HorizontalAlignment="Center" Width="430" Height="26" VerticalAlignment="Bottom"/> 

     <Canvas Name="cnvs" Width="464" Height="215" Margin="0,0,20,100" HorizontalAlignment="Right" VerticalAlignment="Bottom"> 
      <Ellipse Name = "Ring1" Width = "133" Height = "133" Stroke = "Blue" Margin="0,0,0,0" HorizontalAlignment = "Left" VerticalAlignment = "Top" Visibility = "Visible" /> 
      <Ellipse Name = "Ring2" Width = "133" Height = "133" Stroke = "Black" Margin="166,0,0,0" HorizontalAlignment = "Left" VerticalAlignment = "Top" Visibility = "Visible"/> 
      <Ellipse Name = "Ring3" Width = "133" Height = "133" Stroke = "Red" Margin = "332,0,0,0" HorizontalAlignment = "Left" VerticalAlignment = "Top" Visibility = "Visible"/> 
      <Ellipse Name = "Ring4" Width = "133" Height = "133" Stroke = "Yellow" Margin="83,83,0,0" HorizontalAlignment = "Left" VerticalAlignment = "Top" Visibility = "Visible"/> 
      <Ellipse Name = "Ring5" Width = "133" Height = "133" Stroke = "Green" Margin="249,83,0,0" HorizontalAlignment = "Left" VerticalAlignment = "Top" Visibility = "Visible"/> 
     </Canvas> 
    </Grid> 
</Window> 

C＃の-code：理論的には

using System; 
using System.Windows; 

namespace Labo_uitbereidingsopdracht_1___Olympische_Ringen 
{ 
    /// <summary> 
    /// Interaction logic for MainWindow.xaml 
    /// </summary> 
    public partial class MainWindow : Window 
    { 
     public MainWindow() 
     { 
      InitializeComponent(); 
      cbRing1.Checked += cbRing1_CheckedChanged; cbRing1.Unchecked += cbRing1_CheckedChanged; 
      cbRing2.Checked += cbRing2_CheckedChanged; cbRing2.Unchecked += cbRing2_CheckedChanged; 
      cbRing3.Checked += cbRing3_CheckedChanged; cbRing3.Unchecked += cbRing3_CheckedChanged; 
      cbRing4.Checked += cbRing4_CheckedChanged; cbRing4.Unchecked += cbRing4_CheckedChanged; 
      cbRing5.Checked += cbRing5_CheckedChanged; cbRing5.Unchecked += cbRing5_CheckedChanged; 
     } 

     private void cbRing1_CheckedChanged(Object sender, EventArgs e) 
     { 
      if (cbRing1.IsChecked == true) 
      { Ring1.Visibility = Visibility.Visible; } 
      else 
      { Ring1.Visibility = Visibility.Hidden; } 
     } 

     private void cbRing2_CheckedChanged(Object sender, EventArgs e) 
     { 
      if (cbRing2.IsChecked == true) 
      { Ring2.Visibility = Visibility.Visible; } 
      else 
      { Ring2.Visibility = Visibility.Hidden; } 
     } 

     private void cbRing3_CheckedChanged(Object sender, EventArgs e) 
     { 
      if (cbRing3.IsChecked == true) 
      { Ring3.Visibility = Visibility.Visible; } 
      else 
      { Ring3.Visibility = Visibility.Hidden; } 
     } 

     private void cbRing4_CheckedChanged(Object sender, EventArgs e) 
     { 
      if (cbRing4.IsChecked == true) 
      { Ring4.Visibility = Visibility.Visible; } 
      else 
      { Ring4.Visibility = Visibility.Hidden; } 
     } 

     private void cbRing5_CheckedChanged(Object sender, EventArgs e) 
     { 
      if (cbRing5.IsChecked == true) 
      { Ring5.Visibility = Visibility.Visible; } 
      else 
      { Ring5.Visibility = Visibility.Hidden; } 
     } 

     private void Window_SizeChanged(object sender, SizeChangedEventArgs e) 
     { 

     } 
    } 
} 

を私のような何かを行うことができれば、私はそれを解決することができるだろうこれは：

Ring1.Width = 80/280 * window.Width

MainWindowの名前は "window"で、 "80/280"はRingが必要とするMainWindowの指定されたスペースです。

しかし、私はこれを行うことはできません。 「500」は、メインウィンドウの固定幅であることを

Ring1.Width = 80/280 * 500

：ちょっと私が試したもののうち、働くん何 唯一のものはこれです。しかしそれで私は私の問題を解決することはできません。

これには論理的なことがあるかもしれませんが、私はまだC＃を学んでいますので、私の基本的な知識はまだまだ貧弱です。 これらの楕円を再スケーリングする方法、または明確に説明されている投稿/サイトにリンクする方法を私に説明することはできますか？

ありがとうございます。

Answer 1

コントロールをViewBoxに配置し、そのストレッチプロパティをUniformに設定します。