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

将其置于其父级中心。
摆脱它周围的所有多余的东西，抵消它。摆脱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

中的使用示例

调整屏幕大小时，如何将椭圆保持在中心位置

2 个答案: