逐步解說：建構資料驅動的動態配置

發行項
05/28/2012

Windows Presentation Foundation (WPF) 提供的控制項，支援資料驅動的動態配置。使用這些控制項搭配 WPF Designer for Visual Studio，可讓您輕鬆地建立這些配置類型。您可以在應用程式中使用下列控制項：

ListView 控制項可提供基礎結構，以便在不同的配置中顯示一組資料項目。通常要使用 GridView 配合 ListView 控制項，才能在資料行中顯示資料。如需詳細資訊，請參閱 ListView 概觀和 GridView 概觀。

在這個逐步解說中，您會執行下列工作：

準備資料來源。
建立 WPF 應用程式
設定預設的 Grid 面板控制項。
加入並設定 ListView 控制項。
在 XAML 中加入並設定 GridView。
加入並設定 Button 控制項。
加入資料繫結程式碼。
測試應用程式。

下圖顯示應用程式的顯示方式。

資料驅動的動態配置

注意

根據您目前使用的設定或版本，您所看到的對話方塊與功能表指令可能會與 [說明] 中描述的不同。若要變更設定，請從 [工具] 功能表中選擇 [匯入和匯出設定]。如需詳細資訊，請參閱 Visual Studio 設定。

必要條件

您需要下列元件才能完成此逐步解說：

Visual Studio 2012 RC

準備資料來源

針對此逐步解說，您將會需要資料來源範例進行繫結。您會建立簡單的 CSV 檔資料來源。

準備資料來源

建立新資料夾並將它命名為 Data。
在 Data 資料夾中，建立一個新的文字檔並命名為 employees.csv。

注意

您可以使用任何文字編輯器建立檔案，例如 [記事本]。

將下列程式碼加入至此文字檔中：

LastName,FirstName,Title
Davis,Sara,Sales Representative
Funk,Don,Vice President, Sales
Levin,Danny,Sales Representative
Penor,Lori,Sales Representative
Buschmann,Monika,Sales Manager
Suominen,Ari,Sales Representative
King,Russell,Sales Representative
Cameron,Maria,Inside Sales Coordinator
Doyle,Patricia,Sales Representative

儲存並關閉檔案。

提示

您可以在 Excel 中開啟此檔案，並確認以逗號分隔的資料是否出現在個別的欄中。
在 Data 資料夾中，建立新的文字檔並命名為 schema.ini。結構描述檔會描述 Data 資料夾中文字檔的格式。
將下列程式碼加入至此文字檔中：
```
[employees.csv]
Format=CSVDelimited
ColNameHeader=True
```
提示

在本逐步解說中，您的 CSV 檔案有欄位表頭。若要繫結至沒有欄位表頭的 CSV 檔案，請將 ColNameHeader=True 變更為 ColNameHeader=False。
儲存並關閉檔案。

建立專案

下一個程序是要建立應用程式的 Visual Studio 專案。

若要建立專案

在 Visual Basic 或 Visual C# 中，建立名為 DataDrivenLayout 的新 WPF 應用程式專案。如需詳細資訊，請參閱 HOW TO：建立新的 WPF 應用程式專案。

MainWindow.xaml 隨即在 WPF Designer中開啟。
在 [檔案] 功能表上，按一下 [全部儲存]。

設定預設的方格面板控制項

根據預設，新的 WPF 應用程式包含具有 Grid 面板的 Window。在這個程序中，您要將兩個資料列加入至方格中。將一個資料列的高度設定為 Auto，這個資料列就會配合內容調整大小。將另一個資料列的高度設為 *，這樣這個資料列會使用剩餘的可用高度。

若要設定預設的方格面板控制項

在 [設計] 檢視中，選取 Grid。如需詳細資訊，請參閱 HOW TO：在設計介面上選取並移動項目。
在 [屬性] 視窗中，找出 RowDefinitions 屬性，然後按一下屬性值資料行中的省略符號按鈕。

[集合編輯器] 隨即出現。
按兩次 [加入] 加入兩個資料列。
將第 1 個資料列的 [Height] 屬性設為 [*]。
將第 2 個資料列的 Height 屬性設為 Auto。
按一下 [確定] 關閉 [集合編輯器]，並返回 WPF Designer。

現在方格中有 2 個資料列，但只顯示 1 個資料列。 Height 屬性設定為 Auto 的資料列會暫時隱藏，因為該資料列沒有任何內容可顯示。對於這個逐步解說，這是沒問題的。在未來如果要避免這種情況，您可以在工作時使用星號大小，並於完成時變更為 Auto。
在 [檔案] 功能表上，按一下 [全部儲存]。

加入和設定 ListView

在這個程序中，您要加入一個 ListView。請為 ListView 命名，這樣您便能從程式碼後置檔案參考它。您要設定其配置屬性。

若要加入和設定 ListView

在 [設計] 檢視中，選取 Grid。
從 [工具箱] 的 [控制項] 群組中，將 ListView 控制項拖曳到 Grid。

在 [屬性] 視窗中，為 ListView 設定下列屬性：

屬性	值
名稱	lvEmployees
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	0
Grid.RowSpan	1
Width	Auto
Height	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	0

在 [檔案] 功能表上，按一下 [全部儲存]。

加入和設定 GridView

在這項程序中，您要加入具有三個資料行的 GridView，以顯示文字檔中的資料。您要為資料行命名，因為您要從程式碼後置參考這些資料行，將資料個別繫結至資料行。如需詳細資訊，請參閱 HOW TO：使用 GridView 顯示 ListView 內容。

若要加入和設定 GridView

在 XAML 編輯器中，找出 ListView 項目。看起來如下：
```
<ListView <ATTRIBUTES> />
```
提示

在 [設計] 檢視中按一下控制項或使用 [文件大綱] 視窗，即可輕鬆地在 [XAML] 檢視中反白顯示項目。

使用下列程式碼取代 ListView 項目：

<ListView x:Name="lvEmployees">
    <ListView.View>
        <GridView AllowsColumnReorder="True">
            <GridViewColumn x:Name="c1Employees" Header="Last Name"></GridViewColumn>
            <GridViewColumn x:Name="c2Employees" Header="First Name"></GridViewColumn>
            <GridViewColumn x:Name="c3Employees" Header="Title"></GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

在 [檔案] 功能表上，按一下 [全部儲存]。

加入和設定按鈕

在這個程序中，您要加入 Button 並指定其 Click 事件。

若要加入和設定按鈕

在 [設計] 檢視中，選取 Grid。

提示

因為 ListView 覆蓋著 Grid，所以可能很難選取 Grid。您可以使用 TAB 鍵或 [文件大綱] 視窗，選取 Grid。
從 [工具箱] 的 [控制項] 群組中，將 Button 控制項拖曳到 Grid。

在 [屬性] 視窗中，為 Button 設定下列屬性：

屬性	值
名稱	btnGetData
內容	Get Data
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	1
Grid.RowSpan	1
Width	75
Height	23
HorizontalAlignment	Right
VerticalAlignment	Bottom
Margin	5

在 XAML 編輯器中，找出 Button 項目。看起來如下：
```
<Button <ATTRIBUTES>>Button</Button>
```
提示

在 [設計] 檢視中按一下控制項或使用 [文件大綱] 視窗，即可輕鬆地在 [XAML] 檢視中反白顯示項目。
編輯 XAML 以加入 Click 事件屬性。看起來應該像這樣子：
```
<Button Click="btnGetData_Click" <ATTRIBUTES>>Button</Button>
```
在 [檔案] 功能表上，按一下 [全部儲存]。

加入資料繫結程式碼

在這個程序中，您要加入 Button 的 Click 事件之程式碼。在執行階段時，按一下按鈕以取得資料，並將資料繫結至 ListView 和 GridView。

若要加入資料繫結程式碼

開啟程式碼後置檔案。依據您為專案選取的語言而定，這個檔案可能是 MainWindow.xaml.cs 或 MainWindow.xaml.vb。

在程式碼編輯器頂端，加入下列程式碼。若要繫結至資料，您必須存取 System.Data 和 System.Data.OleDb 命名空間。

Imports System.Data              'DataTable
Imports System.Data.OleDb        'OleDbDataAdapter
Imports System.Windows           'RoutedEventArgs
Imports System.Windows.Data      'Binding
Imports System.Windows.Controls  'ListView

using System;                   //Exception
using System.Data;              //DataTable
using System.Data.OleDb;        //OleDbDataAdapter
using System.Windows;           //RoutedEventArgs
using System.Windows.Data;      //Binding
using System.Windows.Controls;  //ListView

在 MainWindow 類別中，加入下列程式碼。使用 DataTable 以儲存資料。
```
Dim dtEmployees As DataTable
```
```
DataTable dtEmployees;
```

在 MainWindow 類別中，加入下列程式碼。當使用者按一下按鈕時，您會取得資料，然後將資料繫結至 ListView。

Private Sub btnGetData_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)

    dtEmployees = GetData()
    BindData()
End Sub

private void btnGetData_Click(object sender, RoutedEventArgs e)
{
    dtEmployees = GetData();
    BindData();
}

在 MainWindow 類別中，加入下列程式碼，並指定 Data 資料夾的路徑。若要取得資料，請使用 OleDbDataAdapter。

Function GetData() As DataTable

    Dim sConnection As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=<Your Path>\Data\;Extended Properties=""text;HDR=yes;FMT=delimited"";"
    Dim sSQL As String = "select * from employees.csv"

    Dim dt As DataTable = New DataTable()
    Dim da As OleDbDataAdapter = New OleDbDataAdapter(sSQL, sConnection)

    Try
        da.Fill(dt)

    Catch ex As Exception
        MessageBox.Show(ex.ToString())

    End Try

    Return dt
End Function

DataTable GetData()
{
    string sConnection = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=<Your Path>\\Data\\;Extended Properties=\"text;HDR=yes;FMT=delimited\";";
    string sSQL = "select * from employees.csv";

    DataTable dt = new DataTable();
    OleDbDataAdapter da = new OleDbDataAdapter(sSQL, sConnection);

    try
    {
        da.Fill(dt);
    }
    catch (Exception e)
    {
        MessageBox.Show(e.ToString());
    }
    return dt;
}

在 MainWindow 類別中，加入下列程式碼。若要將資料繫結至 ListView，要將其 DataContext 設定為 DataTable。將資料行顯示在 GridView 的資料行中。

Sub BindData()
    lvEmployees.DataContext = dtEmployees
    lvEmployees.SetBinding(ListView.ItemsSourceProperty, New Binding())

    c1Employees.DisplayMemberBinding = New Binding("LastName")
    c2Employees.DisplayMemberBinding = New Binding("FirstName")
    c3Employees.DisplayMemberBinding = New Binding("Title")
End Sub

void BindData()
{
    lvEmployees.DataContext = dtEmployees;
    lvEmployees.SetBinding(ListView.ItemsSourceProperty, new Binding());

    c1Employees.DisplayMemberBinding = new Binding("LastName");
    c2Employees.DisplayMemberBinding = new Binding("FirstName");
    c3Employees.DisplayMemberBinding = new Binding("Title");
}

在 [檔案] 功能表上，按一下 [全部儲存]。

設定視窗以便動態調整大小

SizeToContent 屬性會指定當 Window 的內容大小變更時，其大小如何變更。根據預設，這個屬性會設定為 Manual，也就是說，使用者可以手動調整視窗的大小以配合內容。在這個程序中，您要將這個屬性設定為 WidthAndHeight，也就是說，視窗會在內容變更時動態調整大小。

若要設定視窗以便動態調整大小

在設計工具中開啟 MainWindow.xaml。
在 [設計] 檢視中，選取 Window。
在 [屬性] 視窗中，為 Window 設定下列屬性：

屬性

值

SizeToContent

WidthAndHeight

Width

Auto

Height

Auto
在 [檔案] 功能表上，按一下 [全部儲存]。

屬性	值
SizeToContent	WidthAndHeight
Width	Auto
Height	Auto

測試應用程式

若要測試應用程式

按一下 [偵錯] 功能表上的 [開始偵錯]。

應用程式會啟動且視窗會出現。因為您將 SizeToContent 屬性設定為 WidthAndHeight，這個視窗的大小只夠容納 GridView 標頭和 Button。
按一下 [取得資料]。

應用程式會取得資料，並將資料繫結至 GridView。 GridView、ListView 和 Window 都會動態調整大小，以配合新的內容。
關閉視窗。

整合在一起

下面是已完成的 MainWindow.xaml 檔案：

<Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="Auto" Width="Auto" SizeToContent="WidthAndHeight">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ListView x:Name="lvEmployees">
            <ListView.View>
                <GridView AllowsColumnReorder="True">
                    <GridViewColumn x:Name="c1Employees" Header="Last Name"></GridViewColumn>
                    <GridViewColumn x:Name="c2Employees" Header="First Name"></GridViewColumn>
                    <GridViewColumn x:Name="c3Employees" Header="Title"></GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
        <Button Click="btnGetData_Click" Name="btnGetData" Margin="5" Height="23" Width="75" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1">Get Data</Button>
    </Grid>
</Window>

後續步驟

在本逐步解說中，您使用具有三個資料行的 GridView 來顯示資料。將資料直接分別繫結至每個資料行。您也可以使用資料範本，在 ListView 或 GridView 中，排列或設計資料樣式。如需詳細資訊，請參閱資料範本化概觀。

您可以使用本逐步解說中的資料範本自行試驗。例如，您可以建立一個範本如下：

<Window.Resources>
    <DataTemplate x:Key="templateEmployees">
        <Border BorderBrush="Silver" BorderThickness="1" Padding="5" Margin="5">
            <DockPanel>
                <StackPanel DockPanel.Dock="Left">
                    <TextBlock Text="{Binding Path=LastName}" />
                    <TextBlock Text="{Binding Path=FirstName}" />
                </StackPanel>
                <TextBlock Text="{Binding Path=Title}" DockPanel.Dock="Right" />
            </DockPanel>
        </Border>
    </DataTemplate>
</Window.Resources>

然後使用 GridView 中的資料範本搭配程式碼，如下：

<ListView.View>
    <GridView>
        <GridViewColumn CellTemplate="{StaticResource templateEmployees}" />
    </GridView>
</ListView.View>

從程式碼後置中移除或註解下列程式碼：

c1Employees.DisplayMemberBinding = New Binding("LastName")
c2Employees.DisplayMemberBinding = New Binding("FirstName")
c3Employees.DisplayMemberBinding = New Binding("Title")

c1Employees.DisplayMemberBinding = new Binding("LastName");
c2Employees.DisplayMemberBinding = new Binding("FirstName");
c3Employees.DisplayMemberBinding = new Binding("Title");

請參閱

共用方式為

逐步解說：建構資料驅動的動態配置

必要條件

準備資料來源

準備資料來源

建立專案

若要建立專案

設定預設的方格面板控制項

若要設定預設的方格面板控制項

加入和設定 ListView

若要加入和設定 ListView

加入和設定 GridView

若要加入和設定 GridView

加入和設定按鈕

若要加入和設定按鈕

加入資料繫結程式碼

若要加入資料繫結程式碼

設定視窗以便動態調整大小

若要設定視窗以便動態調整大小

測試應用程式

若要測試應用程式

整合在一起

後續步驟

請參閱

工作

概念

其他資源

其他資源