Partilhar via


Como: Criar um layout dinâmico - controlado por data

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:

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 Visão geral de ListView 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.

    ObservaçãoObservação

    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. Abra MainWindow. XAML no 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

    Dica

    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.

Consulte também

Tarefas

Walkthrough: Construindo um layout dinâmico - controlado por data

Como: Exibir conteúdo de um ListView usando um GridView

Conceitos

Sistema de layout

Outros recursos

Trabalhando com o designer WPF