调整窗口大小时控制随意移动答案

【问题标题】：Controls moving haphazardly when resizing window调整窗口大小时控制随意移动
【发布时间】：2019-03-21 10:17:27
【问题描述】：

我创建了一个 wpf 应用程序。应用程序的 XAML 代码如下。窗口在运行时看起来很棒，但是当我尝试调整窗口大小时，控件会随意移动。我希望控件像适当的 Windows 应用程序一样保持原位。我也是WPF的新手。任何建议将不胜感激。

我插入了一张原始的和调整大小的窗口的图像。

<Window x:Class="demoUI.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:demoUI"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="8*"/>
            <RowDefinition Height="17*"/>
            <RowDefinition Height="397*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="39*"/>
            <ColumnDefinition Width="113*"/>
            <ColumnDefinition Width="46*"/>
            <ColumnDefinition Width="12*"/>
            <ColumnDefinition Width="149*"/>
            <ColumnDefinition Width="38*"/>
            <ColumnDefinition Width="141*"/>
            <ColumnDefinition Width="256*"/>
        </Grid.ColumnDefinitions>
        <!--<Border BorderBrush="Black" BorderThickness="1" Grid.Column="6" Height="100" Margin="9.2,13,21.6,0" Grid.Row="1" Grid.RowSpan="2" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>-->
        <Menu Margin="0,-4,56.2,5.8" Grid.ColumnSpan="2" Grid.RowSpan="2" >
            <MenuItem Header="File">
                <MenuItem Header="Open Log File"/>
                <MenuItem Header="Open Workspace"/>
                <Separator/>
                <MenuItem Header="Save as Workspace"/>
                <MenuItem Header="Set Path host file"/>
                <Border BorderBrush="Black" BorderThickness="1" Margin="-34,-117,-656.4,37.6"/>
            </MenuItem>
            <MenuItem Header="Control" Grid.Row="0" Grid.Column="1" Width="60">
                <MenuItem Header="Open Command Line View"/>
            </MenuItem>
        </Menu>
        <TextBlock Text="Connect To" Width="65" Height="Auto" HorizontalAlignment="Left" Margin="4,16.2,0,360.6" Grid.Row="2" Grid.ColumnSpan="2"/>
        <TextBox TextWrapping="Wrap" Text="IP/HostName" Margin="37.8,14.2,11.4,360.6" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
        <TextBox TextWrapping="Wrap" Text="Line" Margin="100.8,46.2,12.4,328.6" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.ColumnSpan="2"/>

        <TextBlock Text="Protocol" Width="78" Height="Auto" HorizontalAlignment="Left" Margin="111.6,9,0,383.6" Grid.Column="4" Grid.ColumnSpan="3" Grid.RowSpan="2" Grid.Row="1"/>

        <StackPanel VerticalAlignment="Top" Grid.Column="3" Orientation="Horizontal" Grid.ColumnSpan="2" Height="48" Margin="2.6,0.2,0,0" Grid.Row="2" HorizontalAlignment="Left" Width="78">
            <Button Content="Play" HorizontalAlignment="Left" VerticalAlignment="Top" Height="20" Margin="4.5,14.2,0,0" Width="32"/>
            <Button Content="Stop" HorizontalAlignment="Right" VerticalAlignment="Top" Height="20" Margin="4.5,14.2,0,0" Width="32"/>
        </StackPanel>

        <StackPanel Orientation="Vertical" 
                    VerticalAlignment="Top" Grid.Column="4" Grid.ColumnSpan="2" Grid.Row="2"
                    HorizontalAlignment="Center" Width="34" Margin="123.6,6.2,28.8,0" Height="115">
            <TextBlock Text="Rx" Width="20" Height="Auto" HorizontalAlignment="Center"/>
            <CheckBox Margin="5,5,4.6,5" Height="14" />
            <CheckBox Margin="5,5,4.6,5" Height="14" RenderTransformOrigin="0.492,-0.286" />
            <CheckBox Margin="5,5,4.6,5" Height="14" />
            <CheckBox Margin="5,5,4.6,5" Height="14" />
        </StackPanel>
        <StackPanel Orientation="Vertical" 
                    VerticalAlignment="Top" Grid.Column="5" Grid.ColumnSpan="2" Grid.Row="2"
                    HorizontalAlignment="Left" Margin="4.8,6.2,0,0" Height="124" Width="36">
            <TextBlock Text="Tx" Width="20" Height="Auto" HorizontalAlignment="Center" />
            <CheckBox Margin="5,5,4.8,5" Height="14" />
            <CheckBox Margin="5,5,4.8,5" Height="14" />
            <CheckBox Margin="5,5,4.8,5" Height="14" />
            <CheckBox Margin="5,5,4.8,5" Height="14" />
        </StackPanel>


        <TextBlock Text="Log Cmd" Width="65" Height="Auto" HorizontalAlignment="Left" Margin="9,51.2,0,325.6" Grid.Row="2" Grid.ColumnSpan="2"/>
        <TextBlock TextWrapping="Wrap" Text="RSP" Margin="93.6,25.2,15.2,348.6"  Grid.Column="4" Grid.Row="2" />
        <TextBlock TextWrapping="Wrap" Text="RTU" Margin="93.6,49.2,15.2,327.6" Grid.Column="4" Grid.Row="2" />
        <TextBlock TextWrapping="Wrap" Text="Error" Margin="93.6,69.2,15.2,307.6" Grid.Column="4" Grid.Row="2"/>
        <TextBlock TextWrapping="Wrap" Text="Info" Margin="93.6,96.2,15.2,280.6" Grid.Column="4" Grid.Row="2" />

        <ComboBox x:Name="Job"
                  VerticalAlignment="Bottom" Margin="38.8,0,16,324.6"
                  Height="23" Grid.Row="2" Grid.Column="1">
            <ComboBoxItem Content="Trace"/>
            <ComboBoxItem Content="List"/>
            <ComboBoxItem Content="Dump"/>
            <ComboBoxItem Content="Off"/>
        </ComboBox>
        <StackPanel Grid.Column="3" Grid.Row="2" Grid.ColumnSpan="2" Margin="3.6,52.2,82.2,315.6">
            <Button Content="Send" VerticalAlignment="Top" Height="20" Margin="3,0,0,0" HorizontalAlignment="Left" Width="69"/>
        </StackPanel>
    </Grid>
</Window>

【问题讨论】：

我建议尝试在 XAML 中查找有关 WPF 和布局的教程 - 了解 VerticalAlignment 和 HorizontalAlignment 的作用 - 尝试将它们分别设置为“Top”和“Left”，以便在您的 TextBlocks 上开始。匹配应该对齐的元素的边距。
@PaulF 非常感谢。通过设置 VerticalAlignment="Top" 和 HorizontalAlignment="Left" 我的控件不会拉伸。但是，它们仍在滚动。关于如何让它们站在固定位置的任何想法？
“滚动”是什么意思？如果您的意思是当窗口变得太小时它们会消失 - 那么您可以为窗口设置最小高度/宽度。您还可以考虑在 Grid RowDefinitions 中使用固定高度而不是相对高度（删除 *）
要尝试的另一件事是给每个元素一个固定的高度，而不是设置为自动。将所有元素的第三个和第四个边距值设置为 0。确保所有元素都具有 VerticalAlignment="Top"。这可能会解决当您垂直调整大小时元素移动或开始消失的大多数问题。然后，您将需要使用对齐、宽度、删除列相对大小等来调整水平大小。自己尝试是结合 WPF/XAML 布局的书籍/教程学习这一点的最佳方式。

标签： c# wpf wpf-controls window-resize

【解决方案1】：

TextBoxes 和ComboBox 徘徊的直接原因是它们的VerticalAlignment 设置为Center，并且使用巨大的底部边距将它们偏移回行的顶部。

它们也在Grid 的第三行中，并且所有行的Height 的设置方式使它们可以缩放到父容器（窗口）的大小。 Height="8*"、Height="17*" 等中的星号 '*' 会导致行填充其父级中的剩余空间，以达到指定的比例。

所有这一切背后的罪魁祸首很可能是使用设计器将所有内容拖放到其位置，而不是注意使用 WPF 中可用的各种面板/容器。

至少，您应该通过自己编写代码来创建初始面板设置。它将产生更清洁和更可维护的代码。我建议仅在您开始使用 WPF 时将设计器用作反馈工具。

这可能是您正在寻找的布局：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Menu Grid.Row="0">
        <MenuItem Header="File">
            <MenuItem Header="Open Log File" />
            <MenuItem Header="Open Workspace" />
            <Separator />
            <MenuItem Header="Save as Workspace" />
            <MenuItem Header="Set Path host file" />
        </MenuItem>
        <MenuItem Header="Control">
            <MenuItem Header="Open Command Line View" />
        </MenuItem>
    </Menu>
    <WrapPanel Grid.Row="1" Margin="10">
        <WrapPanel.Resources>
            <Style TargetType="Grid">
                <Setter Property="Margin" Value="0,0,20,0" />
            </Style>
        </WrapPanel.Resources>
        <Grid>
            <Grid.Resources>
                <Style TargetType="TextBox">
                    <Setter Property="Margin" Value="3" />
                    <Setter Property="VerticalContentAlignment" Value="Center" />
                </Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Margin" Value="3" />
                    <Setter Property="VerticalAlignment" Value="Center" />
                </Style>
                <Style TargetType="ComboBox">
                    <Setter Property="Margin" Value="3" />
                    <Setter Property="VerticalContentAlignment" Value="Center" />
                </Style>
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <TextBlock VerticalAlignment="Center" Text="Connect To" />
            <TextBox
                Grid.Column="1"
                Grid.ColumnSpan="2"
                Text="IP/HostName" />
            <TextBlock Grid.Row="1" Text="Log Cmd" />
            <ComboBox
                x:Name="Job"
                Grid.Row="1"
                Grid.Column="1">
                <ComboBoxItem Content="Trace" />
                <ComboBoxItem Content="List" />
                <ComboBoxItem Content="Dump" />
                <ComboBoxItem Content="Off" />
            </ComboBox>
            <TextBox
                Grid.Row="1"
                Grid.Column="2"
                VerticalContentAlignment="Center"
                Text="Line" />
        </Grid>
        <Grid>
            <Grid.Resources>
                <Style TargetType="Button">
                    <Setter Property="Margin" Value="3" />
                </Style>
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Button Content="  Play  " />
            <Button Grid.Column="1" Content="  Stop  " />
            <Button
                Grid.Row="1"
                Grid.ColumnSpan="2"
                Content="  Job  " />
        </Grid>
        <Grid>
            <Grid.Resources>
                <Style TargetType="TextBlock">
                    <Setter Property="Margin" Value="3" />
                </Style>
                <Style TargetType="CheckBox">
                    <Setter Property="Margin" Value="3" />
                </Style>
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <TextBlock Grid.ColumnSpan="3" Text="Protocol" />
            <TextBlock
                Grid.Row="1"
                Grid.Column="1"
                Text="Rx" />
            <TextBlock
                Grid.Row="1"
                Grid.Column="2"
                Text="Tx" />
            <TextBlock Grid.Row="2" Text="RSP" />
            <CheckBox Grid.Row="2" Grid.Column="1" />
            <CheckBox Grid.Row="2" Grid.Column="2" />

        </Grid>
    </WrapPanel>
</Grid>

另外，我建议阅读以下有关 WPF 中的面板和容器的文章https://www.codeproject.com/Articles/140613/WPF-Tutorial-Layout-Panels-Containers-Layout-Trans

编辑：除此之外，我建议避免为容器和大多数控件设置硬Width 和Height。也不要害怕将容器相互嵌套以达到预期的效果。与使用大型 Grid 相比，创建和使用嵌套容器要容易得多。

【讨论】：

【解决方案2】：

主要问题在于您的行/列定义。通过使用星号值，您可以指示应用程序相对于其他列/行缩放宽度/高度。

换句话说，要使控件在调整大小时保持原样，请从ColumnDefinitions / RowDefinitions 中删除星号。

【讨论】：