none
Data Form Layout with Grid RRS feed

  • Question

  • Hi All,

    I am just starting out with a simple WPF application.  I know that I should be using a grid instead of a canvas to layout my data entry forms.  I am just curious to know if I should be creating an individual grid row for each label/textbox combination or is it alright to just place all of the labels in one column and all of the rows in another and just rely on their respective margin settings? 

    Thanks for you help,

    Al 
    Monday, August 11, 2008 3:33 PM

Answers

  • Do your maximum layout job with Grid control. It is really very powerful and that will do most of your layouting job when you run your app on different resolution.
    Try to keep the height and weigth of controls to Auto.
    Use MinHeight and MinWidth to keep your layout in shape.

    Below is the sample code to give you an idea:

     
    <Window x:Class="WpfApplication1.Window1" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Title="Window1" MinWidth="600" MinHeight="400">  
        <Grid> 
            <Border Name="border1" BorderThickness="10" CornerRadius="10" BorderBrush="Black">  
                <Grid> 
                    <Grid.RowDefinitions> 
                        <RowDefinition Height="75"/>  
                        <RowDefinition Height="*" MinHeight="170"/>  
                    </Grid.RowDefinitions> 
                    <Grid Grid.Row="1">  
                        <Grid> 
                            <Grid.RowDefinitions> 
                                <RowDefinition Height="9*"/>  
                                <RowDefinition Height="1.5*" /> 
                            </Grid.RowDefinitions> 
                            <GroupBox Header="Customer Details" Name="groupBox1" Margin="35,35,31,0" Canvas.Left="-11" Canvas.Top="-7" Height="123" VerticalAlignment="Top">  
                                <GroupBox.Style> 
                                    <Style TargetType="GroupBox">  
                                        <Setter Property="FontSize" Value="12"/>  
                                    </Style> 
                                </GroupBox.Style> 
                                <Grid Margin="5">  
                                    <Grid.RowDefinitions> 
                                        <RowDefinition Height="*"/>  
                                        <RowDefinition Height="*"/>  
                                    </Grid.RowDefinitions> 
                                    <Grid.ColumnDefinitions> 
                                        <ColumnDefinition Width="110" /> 
                                        <ColumnDefinition Width="*" MinWidth="120"/>  
                                        <ColumnDefinition Width="*" /> 
                                        <ColumnDefinition Width="110"/>  
                                        <ColumnDefinition Width="*" MinWidth="120"/>  
                                        <ColumnDefinition Width="*" /> 
                                    </Grid.ColumnDefinitions> 
                                    <Label Height="28" Name="label1" Width="75" HorizontalAlignment="Left" Padding="10,5,0,0" >Name</Label> 
                                    <TextBox Grid.Column="1" Height="23" Name="textBox1" Width="120" HorizontalAlignment="Left" /> 
                                    <Label Grid.Column="3" Height="28" Name="label2" Width="75" HorizontalAlignment="Left" Padding="10,5,0,0" >Contact No</Label> 
                                    <TextBox Grid.Column="4" Height="23" Name="textBox2" Width="120" HorizontalAlignment="Left" /> 
                                    <Label Grid.Row="1" Height="28" Name="label3" Width="75" HorizontalAlignment="Left" Padding="10,5,0,0" >Address</Label> 
                                    <Label Grid.Column="3" Grid.Row="1" Height="28" Name="label4" HorizontalAlignment="Left" Padding="10,5,0,0" >Delivery Address</Label> 
                                    <TextBox Grid.Column="4" Grid.Row="1" Grid.ColumnSpan="2" Name="textBox4" MinWidth="100" HorizontalAlignment="Stretch" /> 
                                    <TextBox Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" Name="textBox3" MinWidth="100" HorizontalAlignment="Stretch" /> 
                                </Grid> 
                            </GroupBox> 
                        </Grid> 
     
                    </Grid> 
                    <Label HorizontalAlignment="Right" Margin="0,0,50,0"  Name="label7" VerticalAlignment="Center" FlowDirection="RightToLeft" Content="Cherry Billing System">  
                        <Label.Style> 
                            <Style TargetType="Label">  
                                <Setter Property="FontSize" Value="24"/>  
                            </Style> 
                        </Label.Style> 
                    </Label> 
                </Grid> 
            </Border> 
        </Grid> 
    </Window> 
     
     
    Monday, August 11, 2008 3:46 PM

All replies

  • Do your maximum layout job with Grid control. It is really very powerful and that will do most of your layouting job when you run your app on different resolution.
    Try to keep the height and weigth of controls to Auto.
    Use MinHeight and MinWidth to keep your layout in shape.

    Below is the sample code to give you an idea:

     
    <Window x:Class="WpfApplication1.Window1" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Title="Window1" MinWidth="600" MinHeight="400">  
        <Grid> 
            <Border Name="border1" BorderThickness="10" CornerRadius="10" BorderBrush="Black">  
                <Grid> 
                    <Grid.RowDefinitions> 
                        <RowDefinition Height="75"/>  
                        <RowDefinition Height="*" MinHeight="170"/>  
                    </Grid.RowDefinitions> 
                    <Grid Grid.Row="1">  
                        <Grid> 
                            <Grid.RowDefinitions> 
                                <RowDefinition Height="9*"/>  
                                <RowDefinition Height="1.5*" /> 
                            </Grid.RowDefinitions> 
                            <GroupBox Header="Customer Details" Name="groupBox1" Margin="35,35,31,0" Canvas.Left="-11" Canvas.Top="-7" Height="123" VerticalAlignment="Top">  
                                <GroupBox.Style> 
                                    <Style TargetType="GroupBox">  
                                        <Setter Property="FontSize" Value="12"/>  
                                    </Style> 
                                </GroupBox.Style> 
                                <Grid Margin="5">  
                                    <Grid.RowDefinitions> 
                                        <RowDefinition Height="*"/>  
                                        <RowDefinition Height="*"/>  
                                    </Grid.RowDefinitions> 
                                    <Grid.ColumnDefinitions> 
                                        <ColumnDefinition Width="110" /> 
                                        <ColumnDefinition Width="*" MinWidth="120"/>  
                                        <ColumnDefinition Width="*" /> 
                                        <ColumnDefinition Width="110"/>  
                                        <ColumnDefinition Width="*" MinWidth="120"/>  
                                        <ColumnDefinition Width="*" /> 
                                    </Grid.ColumnDefinitions> 
                                    <Label Height="28" Name="label1" Width="75" HorizontalAlignment="Left" Padding="10,5,0,0" >Name</Label> 
                                    <TextBox Grid.Column="1" Height="23" Name="textBox1" Width="120" HorizontalAlignment="Left" /> 
                                    <Label Grid.Column="3" Height="28" Name="label2" Width="75" HorizontalAlignment="Left" Padding="10,5,0,0" >Contact No</Label> 
                                    <TextBox Grid.Column="4" Height="23" Name="textBox2" Width="120" HorizontalAlignment="Left" /> 
                                    <Label Grid.Row="1" Height="28" Name="label3" Width="75" HorizontalAlignment="Left" Padding="10,5,0,0" >Address</Label> 
                                    <Label Grid.Column="3" Grid.Row="1" Height="28" Name="label4" HorizontalAlignment="Left" Padding="10,5,0,0" >Delivery Address</Label> 
                                    <TextBox Grid.Column="4" Grid.Row="1" Grid.ColumnSpan="2" Name="textBox4" MinWidth="100" HorizontalAlignment="Stretch" /> 
                                    <TextBox Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" Name="textBox3" MinWidth="100" HorizontalAlignment="Stretch" /> 
                                </Grid> 
                            </GroupBox> 
                        </Grid> 
     
                    </Grid> 
                    <Label HorizontalAlignment="Right" Margin="0,0,50,0"  Name="label7" VerticalAlignment="Center" FlowDirection="RightToLeft" Content="Cherry Billing System">  
                        <Label.Style> 
                            <Style TargetType="Label">  
                                <Setter Property="FontSize" Value="24"/>  
                            </Style> 
                        </Label.Style> 
                    </Label> 
                </Grid> 
            </Border> 
        </Grid> 
    </Window> 
     
     
    Monday, August 11, 2008 3:46 PM
  • Hi Lalit,

    Thank you for your help. 

    Al
    Monday, August 11, 2008 7:00 PM