locked
what user control height and row definitions would I define for the following layout? RRS feed

  • Question

  • The first image below is the intended screen design, the second the actual with the following xaml. How would I change height and row definitions to correct my actual display so that it looks like the intended screen design?  Thank you .
      <UserControl x:Class="verticalSpacingQuestion"
      d:DesignHeight="694" d:DesignWidth="1900" >
    
           <Grid >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="200" />
                        <RowDefinition Height="200" />
                    </Grid.RowDefinitions>
    
            <StackPanel Orientation="Vertical" Height="302" >
                <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="0">
                    <sdk:Label Height="24" HorizontalAlignment="Left" Name="label1" VerticalAlignment="Center" Width="294" Content="   Application Module"/>
                </StackPanel>
    
                <telerik:RadComboBox x:Name="cmbappGroups"  Grid.Row="1" Height="22" Width="294" />
                
                <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="0" >
                    <sdk:Label Height="24" Name="labelLanguageItems" Width="640"  Content="Defined Language Items"/>
                <Button Content="New"   />
                </StackPanel>     
                <telerik:RadGridView Grid.Row="2"  Height="150"  >
                </telerik:RadGridView>
    
                <StackPanel Orientation="Horizontal" Grid.Row="3" Grid.Column="0" >
                    <sdk:Label Height="24"   Name="label" Width="640"  Content="   Selected Language Items"/>
                    <Button Content="Save"    />
                </StackPanel>
                <telerik:RadGridView Grid.Row="3" Height="150"  >
               </telerik:RadGridView>
            </StackPanel>
        </Grid>
    </UserControl>
    

    a combo box, two grids and a textblock, all with labels above them _ how do I create row definitions for proper height distribution

    the user control height stops after the header columns of the 2nd datagrid

     

    Monday, September 5, 2011 11:04 PM

Answers

  • Do not use width and height when you need the application to fit the screen width and height (in different resolutions), Avoid using Horizontal and vertical alignments; Use Grid and set the Row/Column Definitions;

     

    Just check the below code... This is similar to your requirement, but the contents are different, but it will solve your issue

    <UserControl x:Class="My.Test.Silverlight.Silverlight.Net.Answer1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data">
    
    
        <Grid >
            <Grid.RowDefinitions>
                <RowDefinition Height="50" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
    
            <StackPanel Grid.Row="0" Orientation="Vertical" Margin="2">
                <TextBlock Text="Application Module" Margin="2,2,0,0"/>
                <ComboBox x:Name="cmbappGroups" Width="200" HorizontalAlignment="Left" Margin="2,2,0,0"/>
            </StackPanel>
    
            <Border Grid.Row="1" BorderBrush="Black" BorderThickness="1" Margin="2">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <!--Width for the button control-->
                        <ColumnDefinition Width="100"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Name="labelLanguageItems" Text="Defined Language Items"/>
                    <Button Grid.Column="1" Content="New"/>
                    <data:DataGrid Grid.Column="0" Grid.ColumnSpan="2"/>
                </Grid>
            </Border>
    
            <Border Grid.Row="2" BorderBrush="Black" BorderThickness="1" Margin="2">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <!--Width for the button control-->
                        <ColumnDefinition Width="100"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Text="Selected Language Items"/>
                    <Button Grid.Column="1" Content="Save"/>
                    <data:DataGrid Grid.Column="0" Grid.ColumnSpan="2"/>
                </Grid>
            </Border>
            <Border Grid.Row="3" BorderBrush="Black" BorderThickness="1" Margin="2">
                <data:DataGrid/>
            </Border>
        </Grid>
    </UserControl>
    
    Monday, September 5, 2011 11:55 PM

All replies

  • Do not use width and height when you need the application to fit the screen width and height (in different resolutions), Avoid using Horizontal and vertical alignments; Use Grid and set the Row/Column Definitions;

     

    Just check the below code... This is similar to your requirement, but the contents are different, but it will solve your issue

    <UserControl x:Class="My.Test.Silverlight.Silverlight.Net.Answer1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data">
    
    
        <Grid >
            <Grid.RowDefinitions>
                <RowDefinition Height="50" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
    
            <StackPanel Grid.Row="0" Orientation="Vertical" Margin="2">
                <TextBlock Text="Application Module" Margin="2,2,0,0"/>
                <ComboBox x:Name="cmbappGroups" Width="200" HorizontalAlignment="Left" Margin="2,2,0,0"/>
            </StackPanel>
    
            <Border Grid.Row="1" BorderBrush="Black" BorderThickness="1" Margin="2">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <!--Width for the button control-->
                        <ColumnDefinition Width="100"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Name="labelLanguageItems" Text="Defined Language Items"/>
                    <Button Grid.Column="1" Content="New"/>
                    <data:DataGrid Grid.Column="0" Grid.ColumnSpan="2"/>
                </Grid>
            </Border>
    
            <Border Grid.Row="2" BorderBrush="Black" BorderThickness="1" Margin="2">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <!--Width for the button control-->
                        <ColumnDefinition Width="100"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Text="Selected Language Items"/>
                    <Button Grid.Column="1" Content="Save"/>
                    <data:DataGrid Grid.Column="0" Grid.ColumnSpan="2"/>
                </Grid>
            </Border>
            <Border Grid.Row="3" BorderBrush="Black" BorderThickness="1" Margin="2">
                <data:DataGrid/>
            </Border>
        </Grid>
    </UserControl>
    
    Monday, September 5, 2011 11:55 PM
  • thank you Neal !  I'm experimenting.  You helped a lot!

    Tuesday, September 6, 2011 9:44 PM