Управляет случайным движением при изменении размера окна

Question

Я создал приложение 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>

Answer 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.

Answer 2

Основная проблема в определениях ваших строк / столбцов. Используя помеченные значения, вы указываете приложению масштабировать ширину / высоту относительно других столбцов / строк.

Другими словами, чтобы элементы управления оставались на своем месте при изменении размера, удалите звезды из ColumnDefinitions / RowDefinitions.