如何以编程方式在列具有单元格模板的情况下创建 GridView？

Question

XAML 代码：

<ListView x:Name="ListDisplay"
          Grid.Column="1">
   <ListView.View>
      <GridView>
          <GridViewColumn x:Name="Column_1" 
                          x:FieldModifier="private" 
                          Header="Column1" 
                          Width="200">
               <GridViewColumn.CellTemplate>
                   <DataTemplate>
                       <DockPanel>
                           <Image Width="15" 
                                  Height="15" 
                                  Source="{Binding Icon}"  
                                  DockPanel.Dock="Left"/>
                           <Label Content="{Binding Column1_Content}" 
                                  Width="180" 
                                  FontSize="12" 
                                  HorizontalContentAlignment="Left" 
                                  DockPanel.Dock="Left"/>
                        </DockPanel>
                   </DataTemplate>
               </GridViewColumn.CellTemplate>
           </GridViewColumn>
           <GridViewColumn x:Name="Column_2" x:FieldModifier="private" 
                           Header="Column2" 
                           DisplayMemberBinding="{Binding Column2_Content}" 
                           Width="175"/>
           <GridViewColumn x:Name="Column_3" 
                           x:FieldModifier="private" 
                           Header="Column3" 
                           DisplayMemberBinding="{Binding Column3_Content}" 
                           Width="100"/>
           <GridViewColumn x:Name="Column_4" x:FieldModifier="private" 
                           Header="Column4" 
                           DisplayMemberBinding="{Binding Column4_Content}" 
                           Width="100"/>
       </GridView>
   </ListView.View>
</ListView>

C# 类：

internal class MyDataClass
{
    public BitmapSource Icon { get; set; }
    public string Column1_Content { get; set; }
    public string Column2_Content { get; set; }
    public string Column3_Content { get; set; }
    public string Column4_Content { get; set; }
}

这基本上是一个有 4 列的 ListView，第一列左侧有一个图像。到目前为止一切正常。

我想做的是改变整体

<ListView.View>
...
</ListView.View>

部分代码转换成c#代码。

所以代码将如下所示：

GridView View = new GridView();

GridViewColumn Column_2 = new GridViewColumn()
{
    Header = "Column2",
    DisplayMemberBinding = new Binding("Column2_Content"), 
    Width = 175
};

// Same thing for columns 3 and 4

View.Columns.Add(Column_2);
View.Columns.Add(Column_3);
View.Columns.Add(Column_4);
ListDisplay.View = View;

问题是，我完全不知道如何对图标源和标签内容进行绑定，并以编程方式（在 c# 中）为第 1 列创建 GridViewColumn。

Answer 1

创建CellTemplate(DataTemplate) 的关键是将VisualTree 设置为FrameworkElementFactory：

// Image
var imageFactory = new FrameworkElementFactory(typeof(Image));
imageFactory.SetValue(WidthProperty, 15);
imageFactory.SetValue(HeightProperty, 15);
imageFactory.SetBinding(Image.SourceProperty, new Binding("Icon"));
imageFactory.SetValue(DockPanel.DockProperty, Dock.Left);

// Label
var labelFactory = new FrameworkElementFactory(typeof(Label));
labelFactory.SetBinding(ContentProperty, new Binding("Column1_Content"));
labelFactory.SetValue(WidthProperty, 180);
labelFactory.SetValue(FontSizeProperty, 12);
labelFactory.SetValue(HorizontalContentAlignmentProperty, HorizontalAlignment.Left);
labelFactory.SetValue(DockPanel.DockProperty, Dock.Left);

// DockPanel
var dockPanelFactory = new FrameworkElementFactory(typeof(DockPanel));
dockPanelFactory.AppendChild(imageFactory);
dockPanelFactory.AppendChild(labelFactory);

GridViewColumn Column_1 = new GridViewColumn()
{
    Header = "Column_1",
    Width = 200
};

DataTemplate template = new DataTemplate
{
    VisualTree = dockPanelFactory
};

Column_1.CellTemplate = template;

Answer 2

这是在代码隐藏中创建所需 ListView 的完整示例。

XAML：

<StackPanel>
    <ListView x:Name="MyListView" ItemsSource="{Binding Items}"></ListView>
    <Button Content="Create View" Click="CreateViewButtonClicked"></Button>
</StackPanel>

代码隐藏：

public partial class MainWindow : Window
{
    private GridViewColumn Column_1;
    private GridViewColumn Column_2;
    private GridViewColumn Column_3;
    private GridViewColumn Column_4;

    public MainWindow()
    {
        InitializeComponent();

        DataContext = this;

        InitializeColumn1();
        InitializeColumn2();
        InitializeColumn3();
        InitializeColumn4();

        SetItemsSource();
    }

    private void SetItemsSource()
    {
        Items = new ObservableCollection<MyDataClass>
        {
            new MyDataClass
            {
                Icon = new BitmapImage(new Uri("https://www.gravatar.com/avatar/b6f0ad4cd865587a782bf697d3b18d18?s=32&d=identicon&r=PG&f=1")),
                Column1_Content = "Column1 Content",
                Column2_Content = "Column2 Content",
                Column3_Content = "Column3 Content",
                Column4_Content = "Column4 Content"
            }
        };
    }

    private void InitializeColumn1()
    {
        var column1Template = new FrameworkElementFactory(typeof(DockPanel));
        var column1TemplateImage = new FrameworkElementFactory(typeof(Image));
        column1TemplateImage.SetValue(WidthProperty, 15d);
        column1TemplateImage.SetValue(HeightProperty, 15d);
        column1TemplateImage.SetBinding(Image.SourceProperty, new Binding("Icon"));
        column1TemplateImage.SetValue(DockPanel.DockProperty, Dock.Left);
        var column1TemplateLabel = new FrameworkElementFactory(typeof(Label));
        column1TemplateLabel.SetBinding(ContentProperty, new Binding("Column1_Content"));
        column1TemplateLabel.SetValue(WidthProperty, 180d);
        column1TemplateLabel.SetValue(FontSizeProperty, 12d);
        column1TemplateLabel.SetValue(HorizontalContentAlignmentProperty, HorizontalAlignment.Left);
        column1TemplateLabel.SetValue(DockPanel.DockProperty, Dock.Left);

        column1Template.AppendChild(column1TemplateImage);
        column1Template.AppendChild(column1TemplateLabel);

        Column_1 = new GridViewColumn
        {
            Header = "Column1",
            Width = 200,
            CellTemplate = new DataTemplate { VisualTree = column1Template }
        };
    }

    private void InitializeColumn2()
    {
        Column_2 = new GridViewColumn
        {
            Header = "Column2",
            Width = 175,
            DisplayMemberBinding = new Binding("Column2_Content")
        };
    }

    private void InitializeColumn3()
    {
        Column_3 = new GridViewColumn
        {
            Header = "Column3",
            Width = 100,
            DisplayMemberBinding = new Binding("Column3_Content")
        };
    }

    private void InitializeColumn4()
    {
        Column_4 = new GridViewColumn
        {
            Header = "Column4",
            Width = 100,
            DisplayMemberBinding = new Binding("Column4_Content")
        };
    }

    private void CreateViewButtonClicked(object sender, RoutedEventArgs e)
    {
        var gridView = new GridView();

        gridView.Columns.Add(Column_1);
        gridView.Columns.Add(Column_2);
        gridView.Columns.Add(Column_3);
        gridView.Columns.Add(Column_4);

        MyListView.View = gridView;
    }

    public static readonly DependencyProperty ItemsProperty = DependencyProperty.Register(
        "Items", typeof(ObservableCollection<MyDataClass>), typeof(MainWindow), new PropertyMetadata(default(ObservableCollection<MyDataClass>)));

    public ObservableCollection<MyDataClass> Items
    {
        get { return (ObservableCollection<MyDataClass>) GetValue(ItemsProperty); }
        set { SetValue(ItemsProperty, value); }
    }
}

这最初包含一个空的ListView 和一个Button。单击按钮时，将调用CreateViewButtonClicked 方法并创建GridView 并将先前初始化的列添加到其Columns 集合中，然后将其设置为ListView 的View。

输出：