当窗口最大化时，如何使所有控件相应地按比例调整大小？ [英] How to make all controls resize accordingly proportionally when window is maximized?

问题描述

当我点击最大化按钮时，窗口最大化，但控件不会按比例调整大小。什么是最好的方法来使控件相应地调整大小？我使用MVVM。
谢谢，

编辑：

这是我的代码。

 < Window x：Class =DataTransfer.View.Window1
 xmlns =http://schemas.microsoft.com/winfx/ 2006 / xaml / presentation
 xmlns：x =http://schemas.microsoft.com/winfx/2006/xaml
 Icon =/ DataTransfer; component / View / Images / ms_msnexplore.gif 
 
 ResizeMode =CanResizeWithGrip
 Title =Window1Height =500Width =600> 
<！ -  Style ={DynamicResource OfficeStyle} - > 
< Window.Resources> 
< ResourceDictionary> 
< ResourceDictionary.MergedDictionaries> 
<！ - < ResourceDictionary Source =/ DataTransfer; component / View / WindowBase.xaml/> 
<！ - < ResourceDictionary Source =/ DataTransfer; component / Themes / WPFThemes / CalendarResource.xaml/> 
< /ResourceDictionary.MergedDictionaries> 
< / ResourceDictionary> 
< /Window.Resources> 
 
< Grid> 
< Grid.RowDefinitions> 
< RowDefinition Height =*/> 
< /Grid.RowDefinitions> 
< Grid.ColumnDefinitions> 
< ColumnDefinition Width =*/> 
< /Grid.ColumnDefinitions> 
< Button Content =ButtonHorizo​​ntalAlignment =LeftMargin =52,28,0,0VerticalAlignment =TopWidth =75Height =22/> 
< DatePicker Name =dpHorizo​​ntalAlignment =LeftMargin =175,25,0,0VerticalAlignment =TopWidth =123Text =aaaGotFocus =DateGotFocusedLostFocus = OnLeaveArchiveDate/> 
< Calendar Horizo​​ntalAlignment =LeftMargin =47,162,0,0VerticalAlignment =Top/> 
&TextBox Name =t1Horizo​​ntalAlignment =LeftHeight =23Margin =337,23,0,0TextWrapping =WrapText =TextBoxVerticalAlignment = 120LostFocus =LeaveField/> 
< RadioButton Content =RadioButtonHorizo​​ntalAlignment =LeftMargin =88,92,0,0VerticalAlignment =Top/> 
< CheckBox Content =CheckBoxHorizo​​ntalAlignment =LeftMargin =252,96,0,0VerticalAlignment =Top/> 
< ComboBox Name =comboIsEditable =FalseText =aaaIsReadOnly =True
 Horizo​​ntalAlignment =LeftMargin =337,89,0,0VerticalAlignment =顶部Width =120
 Focusable =TrueGotFocus =ComboBoxGotFocused> 
< ComboBoxItem>一月< / ComboBoxItem> 
< ComboBoxItem>二月< / ComboBoxItem> 
< / ComboBox> 
< TextBlock Horizo​​ntalAlignment =LeftHeight =40Margin =260,184,0,0TextWrapping =WrapText =Text_BlockVerticalAlignment =TopWidth =257/> 
 
< / Grid> 
< / Window> 
  

解决方案

在WPF中有一些容器

这里有一些操作可以调整他们的内容（我猜你正在使用以下一个或多个）：

  StackPanel 
 WrapPanel 
 Canvas 
 TabControl 
  

这里有一些做调整其内容：

 网格
 UniformGrid 
 DockPanel 
  

因此，几乎总是最好使用 Grid 而不是 StackPanel ，除非您不希望自动调整大小。请注意， Grid 仍然可以不调整其内部控件的大小，这一切取决于您的 Grid.RowDefinition 和 Grid.ColumnDefinition 设置：

 < Grid> 
< Grid.RowDefinitions> 
< RowDefinition Height =100/> <！ - <<<精确高度...不会调整大小 - > 
< RowDefinition Height =Auto/> <！ - <<<将调整大小到内容大小 - > 
< RowDefinition Height =*/> <！ - <<<将调整大小取所有剩余空间 - > 
< /Grid.RowDefinitions> 
< / Grid> 
  

您可以找到有关 Grid 控制 网格类页面。您还可以从 WPF容器控件概述中了解有关这些容器控件的详情页面。

进一步调整大小可以使用 FrameworkElement.Horizo​​ntalAlignment 和 FrameworkElement.VerticalAlignment 属性。这些属性的默认值为 Stretch ，这将拉伸元素以适合其包含控件的大小。

UPDATE >>>

$ b $

b

回应您评论中的问题：

使用 Grid.RowDefinition 和 Grid.ColumnDefinition 设置首先组织一个基本结构...通常将 Grid 控件添加到单元格of outer Grid 控制如果需要。您还可以使用 Grid.ColumnSpan 和 Grid.RowSpan 属性来启用控件以跨多个列和/或行 Grid 。

最常见的是至少有一行/ c> Height / / 宽度的*您可以使用此设置有两个或更多，在这种情况下，剩余空间将在两个（或更多）行/列之间分割。 Auto是用于未设置为*的行/列的一个很好的设置，但它实际上取决于你想要的布局。

没有 Auto 设置，您可以在单元格中的控件使用，但这也是，因为我们想要网格或 code>所有这些控件。

我对 FrameworkElement.Horizo​​ntalAlignment FrameworkElement.VerticalAlignment 属性只是让你知道他们的存在...因为他们的默认值已经 Stretch 您通常不需要明确设置它们。

Margin 属性通常只用于空间控制如果你从Visual Studio工具箱中拖放控件，VS将设置 Margin 属性，将控件放置在你放置的位置，但一般来说，这是不是我们想要的，因为它会搞乱控件的自动调整大小。如果您这样做，那么只需删除或编辑保证金属性以满足您的需要。

When I clicked on the maximize button the window is maximized but the controls are not resized proportionally. What is the best way to make the controls resize accordingly? I am using MVVM. Thanks,

Edit:

Here is my code.

<Window x:Class="DataTransfer.View.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Icon="/DataTransfer;component/View/Images/ms_msnexplore.gif"

        ResizeMode="CanResizeWithGrip"
        Title="Window1" Height="500" Width="600">
    <!--Style="{DynamicResource OfficeStyle}"-->
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <!--<ResourceDictionary Source="/DataTransfer;component/View/WindowBase.xaml" />-->
                <!--<ResourceDictionary Source="/DataTransfer;component/Themes/WPFThemes/CalendarResource.xaml" />-->
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width ="*" />
    </Grid.ColumnDefinitions>
        <Button Content="Button" HorizontalAlignment="Left" Margin="52,28,0,0" VerticalAlignment="Top" Width="75" Height="22" />
        <DatePicker Name="dp" HorizontalAlignment="Left" Margin="175,25,0,0" VerticalAlignment="Top" Width="123" Text="aaa" GotFocus="DateGotFocused" LostFocus="OnLeaveArchiveDate"/>
        <Calendar HorizontalAlignment="Left" Margin="47,162,0,0" VerticalAlignment="Top"/>
        <TextBox Name="t1" HorizontalAlignment="Left" Height="23" Margin="337,23,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120" LostFocus="LeaveField" />
        <RadioButton Content="RadioButton" HorizontalAlignment="Left" Margin="88,92,0,0" VerticalAlignment="Top"/>
        <CheckBox Content="CheckBox" HorizontalAlignment="Left" Margin="252,96,0,0" VerticalAlignment="Top"/>
        <ComboBox Name="combo" IsEditable="False" Text="aaa" IsReadOnly="True"
                  HorizontalAlignment="Left" Margin="337,89,0,0" VerticalAlignment="Top" Width="120" 
                  Focusable="True" GotFocus="ComboBoxGotFocused" >
            <ComboBoxItem>January</ComboBoxItem>
            <ComboBoxItem>February</ComboBoxItem>
        </ComboBox>
        <TextBlock HorizontalAlignment="Left" Height="40" Margin="260,184,0,0" TextWrapping="Wrap" Text="Text_Block" VerticalAlignment="Top" Width="257"/>

    </Grid>
</Window>

解决方案

In WPF there are certain 'container' controls that automatically resize their contents and there are some that don't.

Here are some that do not resize their contents (I'm guessing that you are using one or more of these):

StackPanel
WrapPanel
Canvas
TabControl

Here are some that do resize their contents:

Grid
UniformGrid
DockPanel

Therefore, it is almost always preferable to use a Grid instead of a StackPanel unless you do not want automatic resizing to occur. Please note that it is still possible for a Grid to not size its inner controls... it all depends on your Grid.RowDefinition and Grid.ColumnDefinition settings:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100" /> <!--<<< Exact Height... won't resize -->
        <RowDefinition Height="Auto" /> <!--<<< Will resize to the size of contents -->
        <RowDefinition Height="*" /> <!--<<< Will resize taking all remaining space -->
    </Grid.RowDefinitions>
</Grid>

You can find out more about the Grid control from the Grid Class page on MSDN. You can also find out more about these container controls from the WPF Container Controls Overview page on MSDN.

Further resizing can be achieved using the FrameworkElement.HorizontalAlignment and FrameworkElement.VerticalAlignment properties. The default value of these properties is Stretch which will stretch elements to fit the size of their containing controls. However, when they are set to any other value, the elements will not stretch.

UPDATE >>>

In response to the questions in your comment:

Use the Grid.RowDefinition and Grid.ColumnDefinition settings to organise a basic structure first... it is common to add Grid controls into the cells of outer Grid controls if need be. You can also use the Grid.ColumnSpan and Grid.RowSpan properties to enable controls to span multiple columns and/or rows of a Grid.

It is most common to have at least one row/column with a Height/Width of "*" which will fill all remaining space, but you can have two or more with this setting, in which case the remaining space will be split between the two (or more) rows/columns. 'Auto' is a good setting to use for the rows/columns that are not set to '"*"', but it really depends on how you want the layout to be.

There is no Auto setting that you can use on the controls in the cells, but this is just as well, because we want the Grid to size the controls for us... therefore, we don't want to set the Height or Width of these controls at all.

The point that I made about the FrameworkElement.HorizontalAlignment and FrameworkElement.VerticalAlignment properties was just to let you know of their existence... as their default value is already Stretch, you don't generally need to set them explicitly.

The Margin property is generally just used to space your controls out evenly... if you drag and drop controls from the Visual Studio Toolbox, VS will set the Margin property to place your control exactly where you dropped it but generally, this is not what we want as it will mess with the auto sizing of controls. If you do this, then just delete or edit the Margin property to suit your needs.

这篇关于当窗口最大化时，如何使所有控件相应地按比例调整大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！