Home > English > Problems customizing the layout of a DataForm using a Grid – Part II

Problems customizing the layout of a DataForm using a Grid – Part II

I had a great comment from my good friend Karl Shifflett yesterday pointing out that if I would only put in “Auto” or a fixed size in the Width and Height of my Column and Row definitions, the DataForm would like as expected using the Grid.

Note: We will use the same object model that was presented in the last post.

Let’s review what I originally put and then see how it looks with a little more attention to the Column and Row definitions:

<UserControl x:Class="SilverlightApplication2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
    xmlns:l="clr-namespace:SilverlightApplication2.Models"
    >
    <UserControl.Resources>
		<DataTemplate x:Key="DataFormGridTemplate">
			<Grid>
				<Grid.ColumnDefinitions>
					<ColumnDefinition />
					<ColumnDefinition />
				</Grid.ColumnDefinitions>
				<Grid.RowDefinitions>
					<RowDefinition />
					<RowDefinition />
					<RowDefinition />
				</Grid.RowDefinitions>
				<toolkit:DataField Label="First Name" Grid.Column="0" Grid.Row="0">
					<TextBox Text="{Binding FirstName, Mode=TwoWay}" />
				</toolkit:DataField>
				<toolkit:DataField Label="Last Name" Grid.Column="0" Grid.Row="1">
					<TextBox Text="{Binding LastName, Mode=TwoWay}" />
				</toolkit:DataField>
				<toolkit:DataField Label="Business Name" Grid.Column="1" Grid.Row="0">
					<TextBox Text="{Binding BusinessName, Mode=TwoWay}" />
				</toolkit:DataField>
				<toolkit:DataField Label="Bio of Business" Grid.Column="1" Grid.Row="1">
					<TextBox Text="{Binding BusinessBio, Mode=TwoWay}" />
				</toolkit:DataField>
				<toolkit:DataField Label="Fax" Grid.Column="0" Grid.Row="2">
					<TextBox Text="{Binding Fax, Mode=TwoWay}" />
				</toolkit:DataField>
				<toolkit:DataField Label="Phone" Grid.Column="1" Grid.Row="2">
					<TextBox Text="{Binding Phone, Mode=TwoWay}" />
				</toolkit:DataField>
			</Grid>
		</DataTemplate>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <toolkit:DataForm Header="Data Entry Sample"
			AutoGenerateFields="False"
			ReadOnlyTemplate="{StaticResource DataFormGridTemplate}"
			EditTemplate="{StaticResource DataFormGridTemplate}"
            >
            <toolkit:DataForm.ItemsSource>
                <l:Customers />
            </toolkit:DataForm.ItemsSource>
        </toolkit:DataForm>
	</Grid>
</UserControl>

Like in the last post, my template produces the following output:

DataForm Grid Template

Now let’s just add a little more detail to the Column and Row definitions:

<UserControl x:Class="SilverlightApplication2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
    xmlns:l="clr-namespace:SilverlightApplication2.Models"
    >
    <UserControl.Resources>
		<DataTemplate x:Key="DataFormGridTemplate">
			<Grid>
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="Auto" />
					<ColumnDefinition Width="Auto" />
				</Grid.ColumnDefinitions>
				<Grid.RowDefinitions>
					<RowDefinition Height="Auto"/>
					<RowDefinition Height="Auto"/>
					<RowDefinition Height="Auto" />
				</Grid.RowDefinitions>
				<toolkit:DataField Label="First Name" Grid.Column="0" Grid.Row="0">
					<TextBox Text="{Binding FirstName, Mode=TwoWay}" />
				</toolkit:DataField>
				<toolkit:DataField Label="Last Name" Grid.Column="0" Grid.Row="1">
					<TextBox Text="{Binding LastName, Mode=TwoWay}" />
				</toolkit:DataField>
				<toolkit:DataField Label="Business Name" Grid.Column="1" Grid.Row="0">
					<TextBox Text="{Binding BusinessName, Mode=TwoWay}" />
				</toolkit:DataField>
				<toolkit:DataField Label="Bio of Business" Grid.Column="1" Grid.Row="1">
					<TextBox Text="{Binding BusinessBio, Mode=TwoWay}" />
				</toolkit:DataField>
				<toolkit:DataField Label="Fax" Grid.Column="0" Grid.Row="2">
					<TextBox Text="{Binding Fax, Mode=TwoWay}" />
				</toolkit:DataField>
				<toolkit:DataField Label="Phone" Grid.Column="1" Grid.Row="2">
					<TextBox Text="{Binding Phone, Mode=TwoWay}" />
				</toolkit:DataField>
			</Grid>
		</DataTemplate>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <toolkit:DataForm Header="Data Entry Sample"
			AutoGenerateFields="False"
			ReadOnlyTemplate="{StaticResource DataFormGridTemplate}"
			EditTemplate="{StaticResource DataFormGridTemplate}"
            >
            <toolkit:DataForm.ItemsSource>
                <l:Customers />
            </toolkit:DataForm.ItemsSource>
        </toolkit:DataForm>
	</Grid>
</UserControl>

Now we get the output that we would normally expect:

DataForm using a Grid with Column and Row definitions

So it looks like you can use either a Grid or StackPanel to manage your layout. We shall see….

Stay tuned for the next post and let’s see if we can solve my next opportunity.

Advertisements
  1. September 1, 2011 at 5:50 am

    I liked your article is an interesting technology
    thanks to google I found you

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: