2017-10-25 6 views
1

XAMLコード:列にCellTemplatesがある場合、プログラムでGridViewを作成するにはどうすればよいですか?

<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列のリストビューであり、第1の列は、左の画像を有しています。これまでのところすべてが機能します。私が何をしたいか

は、C#コードにコードの全体

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

一部を変換です。

ように、コードは次のようになります。

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を作成する方法を絶対にないアイデアを持っていません)。

答えて

1

コードビハインドで所望の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); } 
    } 
} 

これは、最初は空ListViewButtonが含まれています。ボタンがクリックされると、CreateViewButtonClickedメソッドが呼び出され、GridViewが作成され、以前に初期化された列がColumnsコレクションに追加され、次にのように設定されます。ListViewView

出力:

enter image description here

2

不可欠CellTemplate(DataTemplate)を作成するためには、FrameworkElementFactoryVisualTreeを設定されています

// 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; 
+0

私はそれがコード内のDataTemplateを作るための良い方法だと思います。 – lindexi

+0

ちょうどこれをテストし、それは魅力のように動作します。 1つの変更点:FrameWorkElement.WidthProperty、FrameWorkElement.HeightPropertyの両方の項目のWidthProperty/HeightPropertyを置き換えました。 Label.FontSizePropertyとLabel.Horizo​​ntalAlignmentPropertyでFontSizePropertyとHorizo​​ntalAlignmentProperty、数値に15.0など – Andrei

関連する問題