如何动态调整用户控件和内容的大小？

Question

我有一个包含在 Window 中的用户控件。但是我注意到，当我最大化 window 并重新调整其大小时，用户控件和 UI 元素不会如图 here.

所示进行相应调整

我尝试的是在这个 tutorial, but the content doesn't re-size accordingly and seems pushed together 之后将网格包裹在 ViewBox 中。

有谁知道如何解决这个重新调整大小的问题？

用户控件示例xaml定义：

<UserControl x:Class="MongoDBApp.Views.CustomerDetailsView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:email_validator="clr-namespace:MongoDBApp.Validator"
             xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
             Width="800"
             Height="500">

   <Viewbox>

    <xctk:BusyIndicator IsBusy="{Binding ButtonEnabled}">


        <Grid>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="70" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="1*" />
                    <RowDefinition Height=".50*" />
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="1*" />
                    <RowDefinition Height=".2*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="17*" />
                    <ColumnDefinition Width="142*" />
                    <ColumnDefinition Width="29*" />
                    <ColumnDefinition Width="171*" />
                    <ColumnDefinition Width="342*" />
                    <ColumnDefinition Width="85*" />
                </Grid.ColumnDefinitions>

                <DockPanel>
                    <ToolBarTray DockPanel.Dock="Top" Orientation="Horizontal">
                        <ToolBar>
                            <Button Command="{Binding RefreshCommand}" ToolTip="Refreshes the customer records.">
                                <Image Width="30"
                                       Height="30"
                                       Source="/MongoDBApp;component/Images/refresh.png" />
                            </Button>
                        </ToolBar>
                    </ToolBarTray>
                </DockPanel>

                <DataGrid x:Name="customersgrid"
                          Grid.Row="0"
                          Grid.RowSpan="3"
                          Grid.Column="1"
                          Grid.ColumnSpan="4"
                          AutoGenerateColumns="False"
                          ItemsSource="{Binding Customers}"
                          SelectedItem="{Binding SelectedCustomer}">
                    <DataGrid.Columns>
                        <DataGridTextColumn Binding="{Binding Id}" Header="ID" />
                        <DataGridTextColumn Binding="{Binding FirstName}" Header="First Name" />
                        <DataGridTextColumn Binding="{Binding LastName}" Header="Last Name" />
                        <DataGridTextColumn Binding="{Binding Email}" Header="Email" />
                        <DataGridTextColumn Binding="{Binding Address}" Header="Address" />
                        <DataGridTextColumn Binding="{Binding Country}" Header="Country" />
                    </DataGrid.Columns>
                </DataGrid>

                <Label Grid.Row="4"
                       Grid.Column="1"
                       Margin="51,0,20.672,0"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Top"
                       Content="First Name:" />
                <TextBox x:Name="fNameTbx"
                         Grid.Row="4"
                         Grid.Column="3"
                         Width="120"
                         Height="23"
                         HorizontalAlignment="Left"
                         VerticalAlignment="Top"
                         Text="{Binding SelectedCustomer.FirstName}"
                         TextWrapping="Wrap" />

                <TextBlock x:Name="iDTbx"
                           Grid.Row="4"
                           Grid.Column="4"
                           Width="180"
                           Height="23"
                           HorizontalAlignment="Right"
                           VerticalAlignment="Top"
                           Text="{Binding SelectedCustomer.Id}"
                           TextWrapping="Wrap" />

                <Label Grid.Row="6"
                       Grid.Column="4"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Top"
                       Content="Country:" />

                <ComboBox Grid.Row="6"
                          Grid.Column="4"
                          Width="180"
                          Height="30"
                          Margin="84,9,84,0"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Top"
                          DisplayMemberPath="Name"
                          ItemsSource="{Binding Countries}"
                          ScrollViewer.VerticalScrollBarVisibility="Visible"
                          Text="{Binding SelectedCustomer.Country}" />



                <Button x:Name="addBtn"
                        Grid.Row="7"
                        Grid.Column="1"
                        Width="75"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        Command="{Binding AddCommand}"
                        Content="Add" />
            </Grid>
        </Grid>
    </xctk:BusyIndicator>
  </Viewbox>
</UserControl>

以及持有 UserControl 的 Window：

<Window x:Class="MongoDBApp.Views.ApplicationView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:views="clr-namespace:MongoDBApp.Views"
        xmlns:vm="clr-namespace:MongoDBApp.ViewModels"
        Title="ApplicationView"
        Width="800"
        Height="500">

    <Window.Resources>
        <DataTemplate DataType="{x:Type vm:CustomerDetailsViewModel}">
            <views:CustomerDetailsView />
        </DataTemplate>
    </Window.Resources>

    <Window.DataContext>
        <vm:ApplicationViewModel />
    </Window.DataContext>


    <TabControl ItemsSource="{Binding PageViewModels}"
                SelectedItem="{Binding CurrentPageViewModel}"
                TabStripPlacement="Top">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Name}" />
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ItemContainerStyle>
            <Style TargetType="{x:Type TabItem}">
                <Setter Property="IsEnabled" Value="{Binding IsEnabled}" />
            </Style>
        </TabControl.ItemContainerStyle>
    </TabControl>
</Window>

Answer 1

起初，设置 Height of RowDefinition 大数字是不正确的，因为你想要调整大小 Window 所以你需要声明 Height 和 Width 按比例。没有 Height="70*" 或 Width=342*.

这样的比例

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="4*" />
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <DockPanel>
            <ToolBarTray DockPanel.Dock="Top" Orientation="Horizontal">
                <ToolBar>
                    <Button Command="{Binding RefreshCommand}" ToolTip="Refreshes the customer records.">
                        <Image Width="30"
                                   Height="30"
                                   />
                    </Button>
                </ToolBar>
            </ToolBarTray>
        </DockPanel>

        <DataGrid x:Name="customersgrid"
                      Grid.Row="0"
                      Grid.RowSpan="3"
                      Grid.Column="1"
                      Grid.ColumnSpan="4"
                      AutoGenerateColumns="False"
                      ItemsSource="{Binding Customers}"
                      SelectedItem="{Binding SelectedCustomer}">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Id}" Header="ID" />
                <DataGridTextColumn Binding="{Binding FirstName}" Header="First Name" />
                <DataGridTextColumn Binding="{Binding LastName}" Header="Last Name" />
                <DataGridTextColumn Binding="{Binding Email}" Header="Email" />
                <DataGridTextColumn Binding="{Binding Address}" Header="Address" />
                <DataGridTextColumn Binding="{Binding Country}" Header="Country" />
            </DataGrid.Columns>
        </DataGrid>

        <Label Grid.Row="4"
                   Grid.Column="1"                       
                   HorizontalAlignment="Center"
                   VerticalAlignment="Top"
                   Content="First Name:" />
        <TextBox x:Name="fNameTbx"
                     Grid.Row="4"
                     Grid.Column="3"
                     MinWidth="20"
                     HorizontalAlignment="Left"
                     VerticalAlignment="Top"
                     Text="{Binding SelectedCustomer.FirstName}"
                     TextWrapping="Wrap" />

        <TextBlock x:Name="iDTbx"
                       Grid.Row="4"
                       Grid.Column="4"                           
                       HorizontalAlignment="Right"
                       VerticalAlignment="Top"
                       Text="{Binding SelectedCustomer.Id}"
                       TextWrapping="Wrap" />

        <Label Grid.Row="6"
                   Grid.Column="4"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Top"
                   Content="Country:" />

        <ComboBox Grid.Row="6"       Grid.Column="4"


                      HorizontalAlignment="Center"
                      VerticalAlignment="Top"
                      DisplayMemberPath="Name"
                      ItemsSource="{Binding Countries}"
                      ScrollViewer.VerticalScrollBarVisibility="Visible"
                      Text="{Binding SelectedCustomer.Country}" />



        <Button x:Name="addBtn"
                    Grid.Row="7"
                    Grid.Column="1"                        
                    HorizontalAlignment="Left"

                    Command="{Binding AddCommand}"
                    Content="Add" />
    </Grid>

那么，如果你想让 UserControl 可以调整大小，就没有必要为你的 UserControl 设置大小。所以删除这个设置：

Width="800"
Height="500"

可调整大小的好例子Window：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="28" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="200" />
    </Grid.ColumnDefinitions>
    <Label Grid.Row="0" Grid.Column="0" Content="Name:"/>
    <Label Grid.Row="1" Grid.Column="0" Content="E-Mail:"/>
    <Label Grid.Row="2" Grid.Column="0" Content="Comment:"/>
    <TextBox Grid.Column="1" Grid.Row="0" Margin="3" />
    <TextBox Grid.Column="1" Grid.Row="1" Margin="3" />
    <TextBox Grid.Column="1" Grid.Row="2" Margin="3" />
    <Button Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right" 
            MinWidth="80" Margin="3" Content="Send"  />
</Grid>

看到这个tutorial。

Answer 2

您已指定：

Width="800"
Height="500"

在用户控件中。也许这就是这种行为的原因。

如何动态调整用户控件和内容的大小？

How to dynamically re-size user control and contents?

wpf

xaml

user-controls

window