Hinzufügen eines Bildes und eines Textblock-Steuerelements in einem DataGridTemplateColumn-Header

Question

In unserer WPF-Anwendung haben wir einen Bildschirm, in dem wir ein Raster anzeigen, der Spaltenkopf ist jetzt ein Text, ich soll ein Bild neben dem Text hinzufügen. Dies ist der XAML-Code,

<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> 

EMailIDHeader den Textwert für die Kopfzeile laden, ich habe ein Bild daneben hinzuzufügen. Wie erreiche ich das? Ich habe versucht, die Lösung gegeben here. Aber das zeigt mir nur eine leere Kopfzeile.

Answer 1

Definieren Sie eine DataTemplate, wo Sie Ihren Textblock und Ihr Bild wie gewünscht organisieren, und legen Sie die Eigenschaft HeaderTemplate mit dieser Ressource.

Die Datenvorlage für den Header:

<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> 

Für die Zelle:

<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> 

Ihr Gitter:

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

Answer 2

, dass das Modell Unter der Annahme,

ist

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

und es gibt zwei Eigenschaften im View-Modell:

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

Sie können die folgende Ansicht verwenden:

<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>