CODEWITHSUNDEEP
wpfxamluser-controlswindow
Brian Var
Brian Var

Reputation: 6227

How to dynamically re-size user control and contents?

I have a user control that is contained in a Window. But I noticed when I maximize and re-size the window, the user control and UI elements don't adjust accordingly as shown here.

What I did try is wrapping the grid in a ViewBox following this tutorial, but the content doesn't re-size accordingly and seems pushed together.

Does anyone know how to resolve this re-sizing issue?

An example of the user control xaml definition:

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

And the Window that holds the 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>

Upvotes: 0

Views: 4262

Answers (2)

StepUp
StepUp

Reputation: 38209

At first, it is not correct to set Height of RowDefinition large numbers cause you want resizable Window and so you need declare Height and Width in proportion. There are no proportion like Height="70*" or 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>

Then, it is not necessary to set size for your UserControl, if you want to be UserControl resizable. So remove this settings:

Width="800"
Height="500"

Good example of Resizable 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>

See this tutorial.

Upvotes: 1

marcinax
marcinax

Reputation: 1195

You've got specified: 

Width="800"
Height="500"

in the UserControl. Maybe it's the reason of such behavior.

Upvotes: 1

Related Questions