DataGridTemplateColumn 헤더 내부에 이미지 및 텍스트 블록 컨트롤 추가

Question

WPF 응용 프로그램에서 우리는 눈금을 표시하는 화면을 가지며 열의 머리글은 텍스트이고 텍스트 옆에 이미지를 추가해야합니다. 이 EMailIDHeader은 헤더의 텍스트 값을로드

<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 코드, 내가 옆에 이미지를 추가해야합니다. 이것을 어떻게 성취합니까? 나는 here 주어진 해결책을 시도했다. 그러나 이것은 단지 빈 헤더 열을 보여줍니다.

Answer 1

텍스트 블록과 이미지를 원하는대로 구성하고 HeaderTemplate 속성을이 리소스로 설정하는 DataTemplate을 정의하십시오.

헤더의 데이터 템플릿 : 셀에 대한

<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)); 
    } 
} 

하고보기 모델의 두 가지 속성이 있습니다 :

가

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>