DataGridTemplateColumnヘッダー内にイメージとテキストブロックコントロールを追加する

Question

WPFアプリケーションでは、グリッドを表示する画面があり、列のヘッダーは現在Textです。テキストの横にイメージを追加するはずです。これは

<Custom:DataGrid.Columns> 
     <Custom:DataGridTemplateColumn Header="{Binding EmailIDHeader, Source={StaticResource LiteralDictionary}}" Width = "0.1*" CellTemplate="{StaticResource EmailIDTemplate}" SortMemberPath="EmailID"/> 
</Custom:DataGrid.Columns> 

<DataTemplate x:Key="EmailIDTemplate"> 
     <Grid MinWidth="10" Margin="5,0,5,0"> 
      <TextBlock HorizontalAlignment="Left" Text="{Binding customerItem.EmailID}" Margin="0,0,3,0"/> 
     </Grid> 

、XAMLコードでEMailIDHeaderは、私はそれの横に画像を追加する必要があり、ヘッダーのテキスト値をロードします。これをどのように達成するのですか？私はhere与えられた解決策を試みた。しかし、これはちょうど私に空のヘッダー列を示しています。

Answer 1

DataTemplateを定義し、必要に応じてテキストブロックと画像を整理し、このリソースでプロパティーHeaderTemplateを設定します。

ヘッダのデータテンプレート：セルについて

<DataTemplate x:Key="EmailIDHeaderTemplate"> 
     <Grid> 
      <Grid.RowDefinitions> 
       <RowDefinition/> 
       <RowDefinition/> 
      </Grid.RowDefinitions> 
      <Image Source="SPhotoEditor-20170120_075433.jpg" Width="20" Height="20"></Image> 
      <TextBlock HorizontalAlignment="Left" Text="{Binding EmailIDHeader, Source={StaticResource LiteralDictionary}}" Margin="0,0,3,0"/> 

     </Grid> 
</DataTemplate> 

：

<DataTemplate x:Key="EmailIDTemplate"> 
    <Grid MinWidth="10" Margin="5,0,5,0"> 
     <TextBlock HorizontalAlignment="Left" Text="{Binding customerItem.EmailID}" Margin="0,0,3,0"/> 
    </Grid> 
</DataTemplate> 

グリッド：

<Custom:DataGrid.Columns> 
    <Custom:DataGridTemplateColumn HeaderTemplate="{StaticResource EmailIDHeaderTemplate}" CellTemplate="{StaticResource EmailIDTemplate}" Width = "0.1*" SortMemberPath="EmailID"/> 
</Custom:DataGrid.Columns> 

Answer 2

モデルと仮定すると

public class Model : INotifyPropertyChanged 
{ 
    string _value; 
    public string Value{ get { return _value; } set { _value = value; RaisePropertyChanged("Value"); } } 

    public event PropertyChangedEventHandler PropertyChanged; 
    void RaisePropertyChanged(string propname) 
    { 
     PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propname)); 
    } 
} 

で、ビューモデルに2つのプロパティがあります。

string _name; 
    public string Name { get { return _name; } set { _name = value; RaisePropertyChanged("Name"); } } 


    string _imagePath; 
    public string ImagePath { get { return _imagePath; } set { _imagePath = value; RaisePropertyChanged("ImagePath"); } } 

は、あなたは、次のビューを使用することができます。

<DataGrid DataContext="{Binding}" ItemsSource="{Binding Models}" AutoGenerateColumns="False"> 
     <DataGrid.Columns> 
      <DataGridTemplateColumn> 
       <DataGridTemplateColumn.HeaderTemplate> 
        <DataTemplate> 
         <StackPanel> 
          <TextBlock Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}, Path=DataContext.Name}"/> 
          <Image Source="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}, Path=DataContext.ImagePath}"/> 
         </StackPanel> 
        </DataTemplate> 
       </DataGridTemplateColumn.HeaderTemplate> 
       <DataGridTemplateColumn.CellTemplate> 
        <DataTemplate> 
         <TextBlock Text="{Binding Value}"/> 
        </DataTemplate> 
       </DataGridTemplateColumn.CellTemplate> 
      </DataGridTemplateColumn> 
     </DataGrid.Columns> 
    </DataGrid>