當屏幕調整大小時，如何保持橢圓在中心

Question

我得到了以下WPF表單。我是WPF的新成員..即使調整大小，我如何保持橢圓在中心？我包括調整

<Window x:Name="mainWindow" x:Class="SpectrumVisualizer.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" 
     mc:Ignorable="d" 
     Title="MainWindow" Height="369.737" Width="567.487" Loaded="Window_Loaded" SizeChanged="mainWindow_SizeChanged"> 
    <DockPanel> 
     <Canvas x:Name="MyCanvas" Margin="0,-41,-14,0" DockPanel.Dock="Left"> 

      <Viewbox Stretch="Uniform" Height="380"> 
       <Grid Name="MainGrid" Background="Black" Height="339" Width="499" Canvas.Top="41"> 

        <Grid.ColumnDefinitions> 

        </Grid.ColumnDefinitions> 
        <Ellipse x:Name="Bar01" Fill="Red" HorizontalAlignment="Left" Height="300" Stroke="Black" VerticalAlignment="Top" Width="467" Margin="19,32,0,0"/> 
        <Ellipse x:Name="Bar02" Fill="Orange" HorizontalAlignment="Left" Margin="105,32,0,0" Stroke="Black" Width="295" VerticalAlignment="Top" Height="300"/> 
        <Ellipse x:Name="Bar03" Fill="Yellow" HorizontalAlignment="Left" Height="141" Margin="19,107,0,0" Stroke="Black" VerticalAlignment="Top" Width="467"/> 
        <Ellipse x:Name="Bar04" Fill="LimeGreen" HorizontalAlignment="Left" Height="232" Margin="138,64,0,0" Stroke="Black" VerticalAlignment="Top" Width="231"/> 
        <Ellipse x:Name="Bar05" Fill="Green" HorizontalAlignment="Left" Height="280" Margin="194,42,0,0" Stroke="Black" VerticalAlignment="Top" Width="120"/> 
        <Ellipse x:Name="Bar06" Fill="Turquoise" HorizontalAlignment="Left" Height="106" Margin="67,125,0,0" Stroke="Black" VerticalAlignment="Top" Width="363"/> 
        <Ellipse x:Name="Bar07" Fill="Cyan" HorizontalAlignment="Left" Height="183" Margin="167,88,0,0" Stroke="Black" VerticalAlignment="Top" Width="174"/> 
        <Ellipse x:Name="Bar08" Fill="Blue" HorizontalAlignment="Left" Height="232" Margin="204,64,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/> 
        <Ellipse x:Name="Bar09" Fill="Violet" HorizontalAlignment="Left" Height="75" Margin="105,139,0,0" Stroke="Black" VerticalAlignment="Top" Width="295"/> 
        <Ellipse x:Name="Bar10" Fill="Magenta" HorizontalAlignment="Left" Height="129" Margin="194,119,0,0" Stroke="Black" VerticalAlignment="Top" Width="120"/> 

       </Grid> 
      </Viewbox> 
     </Canvas> 
    </DockPanel> 
</Window> 

後面的代碼時，它可以擴展代碼：

private void mainWindow_SizeChanged(object sender, SizeChangedEventArgs e) 
{ 
    MyCanvas.Width = e.NewSize.Width; 
    MyCanvas.Height = e.NewSize.Height; 

    double xChange = 1, yChange = 1; 

    if (e.PreviousSize.Width != 0) 
     xChange = (e.NewSize.Width/e.PreviousSize.Width); 

    if (e.PreviousSize.Height != 0) 
     yChange = (e.NewSize.Height/e.PreviousSize.Height); 



    ScaleTransform scale = new ScaleTransform(MyCanvas.LayoutTransform.Value.M11 * xChange, MyCanvas.LayoutTransform.Value.M22 * yChange); 
    MyCanvas.LayoutTransform = scale; 
    MyCanvas.UpdateLayout(); 
} 

Answer 1

1. 中心在其父母。
2. 擺脫它周圍的所有多餘的東西，抵消它。擺脫你的SizeChanged事件處理程序。使用HoriziontalAlignment和VerticalAlignment進行實際對中。

像這樣：

<Window 
    x:Class="WpfApp4.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:WpfApp4" 
    mc:Ignorable="d" 
    Title="MainWindow" Height="350" Width="525" 
    > 
    <Grid Background="Black"> 
     <Viewbox Stretch="Fill"> 
      <!-- 
      Note added right/bottom margin on this Grid. 
      The ellipses already provided a left/top margin. 
      If it were me, I'd have the ellipses aligned at zero top/left, 
      and do all the margins in the Grid. 
      --> 
      <Grid Name="MyCanvas" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,19,19"> 

       <Ellipse x:Name="Bar01" Fill="Red"  HorizontalAlignment="Left" Height="300" Margin="19,32,0,0" Stroke="Black" VerticalAlignment="Top" Width="467" /> 
       <Ellipse x:Name="Bar02" Fill="Orange" HorizontalAlignment="Left" Height="300" Margin="105,32,0,0" Stroke="Black" VerticalAlignment="Top" Width="295" /> 
       <Ellipse x:Name="Bar03" Fill="Yellow" HorizontalAlignment="Left" Height="141" Margin="19,107,0,0" Stroke="Black" VerticalAlignment="Top" Width="467"/> 
       <Ellipse x:Name="Bar04" Fill="LimeGreen" HorizontalAlignment="Left" Height="232" Margin="138,64,0,0" Stroke="Black" VerticalAlignment="Top" Width="231"/> 
       <Ellipse x:Name="Bar05" Fill="Green"  HorizontalAlignment="Left" Height="280" Margin="194,42,0,0" Stroke="Black" VerticalAlignment="Top" Width="120"/> 
       <Ellipse x:Name="Bar06" Fill="Turquoise" HorizontalAlignment="Left" Height="106" Margin="67,125,0,0" Stroke="Black" VerticalAlignment="Top" Width="363"/> 
       <Ellipse x:Name="Bar07" Fill="Cyan"  HorizontalAlignment="Left" Height="183" Margin="167,88,0,0" Stroke="Black" VerticalAlignment="Top" Width="174"/> 
       <Ellipse x:Name="Bar08" Fill="Blue"  HorizontalAlignment="Left" Height="232" Margin="204,64,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/> 
       <Ellipse x:Name="Bar09" Fill="Violet" HorizontalAlignment="Left" Height="75" Margin="105,139,0,0" Stroke="Black" VerticalAlignment="Top" Width="295"/> 
       <Ellipse x:Name="Bar10" Fill="Magenta" HorizontalAlignment="Left" Height="129" Margin="194,119,0,0" Stroke="Black" VerticalAlignment="Top" Width="120"/> 

      </Grid> 
     </Viewbox> 
    </Grid> 
</Window> 

Answer 2

我用居中對齊中心。嘗試一下。

參見使用例如cannot center align canvas