WPF 使用代碼創建DataTemplate

起因

我們都知道, 在XAML界面當中編寫DataTemplate很簡單, 但是有時候我們需要在代碼當中去設置DataTemplate。
該怎么辦?

比如, 實際需求是DataGrid當中需要創建100個DataTemplate列, 很明顯,這些列不太方便在XAML中編寫。
這個時候,我們就需要在代碼當中動態生成模板列。

答案

如下面所示,我創建了一個DataGridTemplateColumn,其中包含了一個StackPanel里面放了兩個Button按鈕。

                <DataGridTemplateColumn>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Button Content="編輯"/>
                                <Button Content="刪除"/>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>

現在就是, 我們需要把這個過程用代碼去生成, 這個時候我們就可以用到FrameworkElementFactory 類。

步驟分為幾步:

• 創建DataGridTemplateColumn 對象, 設置Header等內容

DataGridTemplateColumn templateColumn = new DataGridTemplateColumn();
templateColumn.Header = "標題";

• 創建 FrameworkElementFactory 對象, 設置Orientation屬性水平排列

 FrameworkElementFactory factory = new FrameworkElementFactory(typeof(StackPanel));
 factory.SetValue(StackPanel.OrientationProperty, Orientation.Horizontal);

• 向 FrameworkElementFactory 對象追加一個factory對象

            FrameworkElementFactory buttonEdit = new FrameworkElementFactory(typeof(Button));
            buttonEdit.SetValue(ContentProperty, "編輯");
            factory.AppendChild(buttonEdit);

            FrameworkElementFactory buttonDel = new FrameworkElementFactory(typeof(Button));
            buttonDel.SetValue(ContentProperty, "刪除");
            factory.AppendChild(buttonDel);

• 創建DataTemplate對象, 設置VisualTree 值為factory

DataTemplate dataTemplate = new DataTemplate();
dataTemplate.VisualTree = factory;

• 最后把DataGridTemplateColumn 的CellTemplate 值設置為dataTemplate

templateColumn.CellTemplate = dataTemplate;

最終效果

關於整個過程梳理

有一點,我們需要清楚, 在XAML界面當中編寫的任何代碼, 其實本質上都是轉化成C#代碼, 既然如此來說, 只要XAML有的對象,
我們都可以用C#代碼編寫, 但是為什么一般我們不這么做, 是因為XAML更加容易去表達界面上的元素, 代碼的可視化以及可維護性。

再回到上面, 我們需要清楚上面的流程, 我們通過FrameworkElementFactory 創建了一個完整的視覺樹的對象,里面包含了一個StackPanel容器,
容器中放置了兩個Button控件,最終把這個 FrameworkElementFactory 對象給了DataTemplate當中的VisualTree, 這里的意思是 我們給DataTemplate
設置了可視化的視覺樹結構, 最終DataTemplate決定了 DataGridTemplateColumn 的視覺呈現。

完整代碼

        DataGridTemplateColumn CreateDataGridTemplateColumn()
        {
            DataGridTemplateColumn templateColumn = new DataGridTemplateColumn();
            templateColumn.Header = "標題";

            FrameworkElementFactory factory = new FrameworkElementFactory(typeof(StackPanel));
            factory.SetValue(StackPanel.OrientationProperty, Orientation.Horizontal);

            FrameworkElementFactory buttonEdit = new FrameworkElementFactory(typeof(Button));
            buttonEdit.SetValue(ContentProperty, "編輯");
            factory.AppendChild(buttonEdit);

            FrameworkElementFactory buttonDel = new FrameworkElementFactory(typeof(Button));
            buttonDel.SetValue(ContentProperty, "刪除");
            factory.AppendChild(buttonDel);

            DataTemplate dataTemplate = new DataTemplate();
            dataTemplate.VisualTree = factory;

            templateColumn.CellTemplate = dataTemplate;

            return templateColumn;
        }