How to: Construct a Data-driven Dynamic Layout

Windows Presentation Foundation (WPF) provides controls that support data-driven dynamic layouts. Using these controls with the WPF Designer makes it easy for you to create these types of layouts. You can use the following controls in your applications:

• ListView

• GridView

The ListView control provides the infrastructure to display a set of data items in different layouts. You typically use a GridView in conjunction with the ListView control to display data in columns. For more information, see ListView Overview and GridView Overview.

Adding and Configuring a ListView

To add and configure a ListView

1. From the Toolbox, in the Controls group, drag a ListView control onto a panel such as a Grid.

2. In the Properties window, set the following properties for the ListView control to maximize the dynamic behavior:

   Property	Suggested Value
   Width	Auto
   Height	Auto
   HorizontalAlignment	Stretch
   VerticalAlignment	Stretch
   Margin	0

3. On the File menu, click Save All.

Adding and Configuring a GridView

To add and configure a GridView

1. In XAML view, locate the ListView element. It looks like the following:

   <ListView <ATTRIBUTES> />
   

2. Replace the ListView element with the following markup. Add names and more columns as necessary.

   Note

   The ListView element and the GridViewColumn elements must have explicit names if you want to refer to them from the code-behind. For example, they must have explicit names if you refer to them from data-binding code.

   <ListView x:Name="LISTVIEWNAME">
       <ListView.View>
           <GridView AllowsColumnReorder="True">
               <GridViewColumn x:Name="<COLUMNNAME>" Header="<COLUMNHEADER>"></GridViewColumn>
               Add more columns as necessary.
           </GridView>
       </ListView.View>
   </ListView>
   

3. On the File menu, click Save All.

Setting the Window to Size Dynamically

The SizeToContent property specifies how the size of a Window changes when the size of its content changes. By default, this property is set to Manual, which means that the user can manually resize the window to fit the content. If you set this property to WidthAndHeight, the window resizes dynamically when its content changes.

To set the Window to size dynamically

1. Open MainWindow.xaml in the designer.

2. In Design view, select the Window.

3. In the Properties window, set the following properties for the Window:

   Property	Value
   SizeToContent	WidthAndHeight
   Width	Auto
   Height	Auto

   Tip

   When set the Width and Height properties to Auto, the window is resized to fit the current controls and content. Therefore, you should set these properties after you have added all your controls and content to your window.

4. On the File menu, click Save All.

See Also

Tasks

Walkthrough: Constructing a Data-driven Dynamic Layout

How to: Display ListView Contents by Using a GridView

Concepts

Layout System

Other Resources

Working with the WPF Designer