如何使wpf应用程序窗口正确调整大小？

Question

我为某些应用程序创建了固定大小的主屏幕，如下面的代码所示。问题是，当我改变窗口的大小时，或者如果我使用最大化的窗口运行它，一切都会搞砸并重叠。

<Window x:Class="Mastersolution.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="700" Width="1000" WindowStyle="None" WindowStartupLocation="Manual" Left="0" Top="0">


    <Grid Background = "Cyan" >



        <TextBox Name="ButtonDescription" Text="" Margin="329,438,319,163" />



        <!-- import button -->
        <Button Name ="Btn_Import" Margin="120,260,757,330"  Click="Btn_Import_Click" MouseEnter="import_desc" MouseLeave="desc_clear" >
            <Setter Property="Button.IsEnabled" Value="False" />
            <Button.Template>
                <ControlTemplate>
                    <Grid x:Name="bg">
                        <Image Name ="import_image" Source="/Images/Import.png"/>

                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <!-- hover effect -->
                            <Setter TargetName="bg" Property="Background" Value="Gray" />
                        </Trigger>

                        <Trigger Property="Button.IsPressed"  Value ="True">
                            <!-- press effect -->
                            <Setter TargetName="bg" Property="RenderTransform">
                                <Setter.Value>
                                    <ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>

            <Button.Style>
                <!-- initially disabled-->
                <Style TargetType="Button">
                    <Setter Property="IsEnabled" Value="False" />
                </Style>
            </Button.Style>

            <!-- fade effect while disabled-->
            <Button.OpacityMask>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Offset="0.3" Color="Black"></GradientStop>
                    <GradientStop Offset="1" Color="Transparent"></GradientStop>
                </LinearGradientBrush>
            </Button.OpacityMask>

        </Button>

        <Label Name ="ImportLabel" Content="IMPORT" Margin="133,367,757,287" FontSize="20"/>


        <!-- studio button -->
        <Button Name ="Studio" Margin="310,251,535,330" Click="Studio_Click" MouseEnter="studio_desc" MouseLeave="desc_clear">
            <Button.Template>
                <ControlTemplate>
                    <Grid x:Name="bg">
                        <Image Source="/Images/Studio.png"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="bg" Property="Background" Value="Gray" />
                        </Trigger>

                        <Trigger Property="Button.IsPressed"  Value ="True">
                            <Setter TargetName="bg" Property="RenderTransform">
                                <Setter.Value>
                                    <ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>

                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>

            <Button.Style>
                <!-- initially disabled-->
                <Style TargetType="Button">
                    <Setter Property="IsEnabled" Value="False" />
                </Style>
            </Button.Style>

            <!-- fade effect while disabled-->
            <Button.OpacityMask>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Offset="0.3" Color="Black"></GradientStop>
                    <GradientStop Offset="1" Color="Transparent"></GradientStop>
                </LinearGradientBrush>
            </Button.OpacityMask>

        </Button>

        <Label Name ="StudioLabel" Content="STUDIO" Margin="346,367,555,287" FontSize="20"/>

        <!-- animation button -->
        <Button Name ="Animation" Margin="556,260,338,330" Click="Animation_Click" MouseEnter="animation_desc" MouseLeave="desc_clear">
            <Button.Template>
                <ControlTemplate>
                    <Grid x:Name="bg">
                        <Image Source="/Images/Animation.jpg"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="bg" Property="Background" Value="Gray" />
                        </Trigger>

                        <Trigger Property="Button.IsPressed"  Value ="True">
                            <Setter TargetName="bg" Property="RenderTransform">
                                <Setter.Value>
                                    <ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>

            <Button.Style>
                <!-- initially disabled-->
                <Style TargetType="Button">
                    <Setter Property="IsEnabled" Value="False" />
                </Style>
            </Button.Style>

            <!-- fade effect while disabled-->
            <Button.OpacityMask>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Offset="0.3" Color="Black"></GradientStop>
                    <GradientStop Offset="1" Color="Transparent"></GradientStop>
                </LinearGradientBrush>
            </Button.OpacityMask>

        </Button>

        <Label Name ="AnimationLabel" Content="ANIMATION" Margin="544,367,319,287" FontSize="20"/>

        <!-- record button -->
        <Button Name ="Record" Margin="758,251,88,330" Click="Record_Click" MouseEnter="record_desc" MouseLeave="desc_clear">
            <Button.Template>
                <ControlTemplate>
                    <Grid x:Name="bg">
                        <Image Source="/Images/Record.png"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="bg" Property="Background" Value="Gray" />
                        </Trigger>

                        <Trigger Property="Button.IsPressed"  Value ="True">
                            <Setter TargetName="bg" Property="RenderTransform">
                                <Setter.Value>
                                    <ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>

                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>

            <Button.Style>
                <!-- initially disabled-->
                <Style TargetType="Button">
                    <Setter Property="IsEnabled" Value="False" />
                </Style>
            </Button.Style>

            <!-- fade effect while disabled-->
            <Button.OpacityMask>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Offset="0.3" Color="Black"></GradientStop>
                    <GradientStop Offset="1" Color="Transparent"></GradientStop>
                </LinearGradientBrush>
            </Button.OpacityMask>

        </Button>

        <Label Name ="RecordLabel" Content="RECORD" Margin="785,367,112,287" FontSize="20"/>


        <!-- quit button -->
        <Button Name ="Quit" Margin="931,631,10,27" Click="Quit_Click">
            <Button.Template>
                <ControlTemplate>
                    <Image Source="/Images/Quit.png"/>
                </ControlTemplate>
            </Button.Template>
        </Button>

        <Label Name ="QuitLabel" Content="QUIT" Margin="940,661,0,0" FontSize="10"/>

        <!-- info button -->
        <Button Name ="Info" Margin="880,631,61,27" Click="Info_Click">
            <Button.Template>
                <ControlTemplate>
                    <Image Source="Images/Info.png"/>
                </ControlTemplate>
            </Button.Template>
        </Button>

        <Label Name ="InfoLabel" Content="INFO" Margin="889,661,61,0" FontSize="10"/>

        <!-- browse button -->
        <Button Name ="Browse" Margin="829,631,112,27" Click="Browse_Click">
            <Button.Template>
                <ControlTemplate>
                    <Image Source="/Images/Browse.jpg"/>
                </ControlTemplate>
            </Button.Template>
        </Button>

        <Label Name ="BrowseLabel" Content="BROWSE" Margin="828,661,108,0" FontSize="10"/>

        <!-- save button -->
        <Button Name ="Save" Margin="778,631,163,27" Click="Save_Click">
            <Button.Template>
                <ControlTemplate>
                    <Image Source="/Images/Save.png"/>
                </ControlTemplate>
            </Button.Template>
        </Button>

        <Label Name ="SaveLabel" Content="SAVE" Margin="786,661,163,-11" FontSize="10"/>

        <!-- open button -->
        <Button Name ="Open" Margin="727,631,214,27" Click="Open_Click">
            <Button.Template>
                <ControlTemplate>
                    <Image Source="/Images/Open.png"/>
                </ControlTemplate>
            </Button.Template>
        </Button>

        <Label Name ="OpenLabel" Content="OPEN" Margin="731,661,211,0" FontSize="10"/>

        <!-- new button -->
        <Button Name ="New" Margin="676,631,265,27" Click="New_Click">
            <Button.Template>
                <ControlTemplate>
                    <Image Source="/Images/NewProject.jpg"/>
                </ControlTemplate>
            </Button.Template>
        </Button>

        <Label Name ="NewLabel" Content="NEW" Margin="685,661,257,0" FontSize="10"/>



        <!-- hamburger button -->
        <Button Name ="hamburger" Margin="836,501,10,80" MouseEnter="hamburger_Click">
            <Button.Template>
                <ControlTemplate>
                    <Grid x:Name="bg">
                        <Image Source="/Images/Hamburger.png"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="bg" Property="Background" Value="Gray" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>
        </Button>

        <Label Content="MAIN MENU" Margin="836,580,-27,67" FontSize="25"/>

        </Grid>

        <!--************************************************************************* MAIN SCREEN END***************************************************************************************-->



        <!--************************************************************************* IMPORT SCREEN 1st page ***************************************************************************************-->

        <Grid Name="IMPORT_SCREEN_1st_page">

            <Grid.Style>
                <!-- initially hidden-->
                <Style TargetType="Grid">
                    <Setter Property="Visibility"  Value="Hidden" />
                </Style>
            </Grid.Style>

            <!--tree view file selection-->
        <Menu Name ="SelectFileMenu" Margin="310,220,145,287" >

            <!-- file selection box-->
            <ComboBox Width="518" Height="26" />

        </Menu>




        <!-- windows dialog box (temporarily)-->

        <Button Name ="open_file" Margin="140,438,801,220" Click="Open_Win_Dialog">

            <Button.Template>
                <ControlTemplate>
                    <Image Source="/Images/open_temp.jpg"/>
                </ControlTemplate>
            </Button.Template>
        </Button>


        </Grid>

我将不胜感激。

Answer 1

不要使用MARGIN来制作他们应该去的地方！每个控件中的Margin属性都为您的按钮等设置了绝对位置。当您更改窗口大小时，显然不会这样做。你需要相对间距。

由于您使用的是<Grid>，因此请设置一些RowDefinitions和ColumnDefinitions以使控件显示在应有的位置，并相应调整大小。首先看到这个： http://www.wpftutorial.net/LayoutProperties.html

即。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Button Content="OK" Grid.Row="1" />
</Grid>

这将产生3行，底部和顶部的行将按比例填充您的窗口，中间行的自动高度将调整大小以适合按钮的高度。无论窗口大小如何，这都意味着按钮将始终位于屏幕中间。这比尝试使用Margin =＆＃34; 279,345,100,208＆＃34;或者把按钮放在你想要的地方，因为只要窗口发生变化，边距就会迫使它不会在相同的位置。

Answer 2

优良作法是仅在相对定位的上下文中使用Margin。使用此选项可以在窗口改变大小时动态定位控件。

目前，您的边距如下：

Margin="329,438,319,163"

这就像说：＆＃34;把控件放在这里，然后把它放在那里＆＃34; 。

然而，它们应该与父控件相对。而不是直接定义的边际。

更像这样的东西：

Margin="12"

这就像说：＆＃34;在父控件的所有方面设置边距为12，如果父级调整大小，则调整此控件的大小＆＃34; 。

请参阅this和this。