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

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

wpf xaml

Wpf 如何动态调整用户控件和内容的大小？,wpf,xaml,user-controls,window,Wpf,Xaml,User Controls,Window,我有一个包含在窗口中的用户控件。但我注意到，当我最大化并重新调整窗口大小时，用户控件和UI元素并没有相应地调整，如图所示我所做的尝试是在下面的一个视图框中包装网格，但是内容并没有相应地重新调整大小，而且看起来很像有人知道如何解决这个重新调整大小的问题吗用户控件xaml定义的一个示例： <UserControl x:Class="MongoDBApp.Views.CustomerDetailsView" xmlns="http://schemas.micros

我有一个包含在窗口中的用户控件。但我注意到，当我最大化并重新调整窗口大小时，用户控件和UI元素并没有相应地调整，如图所示

我所做的尝试是在下面的一个视图框中包装网格，但是内容并没有相应地重新调整大小，而且看起来很像

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

用户控件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 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>

首先，将

行定义的高度设置为较大的数字是不正确的，因为您需要可调整大小的窗口，因此需要按比例声明高度和宽度。没有像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>

可调整大小窗口的好例子：
<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>



请参见此项。
您已指定：
Width="800"
Height="500"

在用户控件中。也许这就是这种行为的原因
Width="800"
Height="500"