I want to insert an icon/image in the column header with the header text and want to write code on the icon OnClick event. For more clarification, I want to design my datagrid as shown in the image attached and the Icon is marked in the red box. Please assist for this.
Hi,
It took me a while, but I found a way to do what you asked for. The trick is to set the LabelPresenter's ContentTemplate to a DataTemplate that shows both the Image and the header text. Here's an example:
<igDP:FieldLayout><igDP:FieldLayout.Fields><igDP:Field Name="name"> <igDP:Field.Settings> <igDP:FieldSettings> <igDP:FieldSettings.LabelPresenterStyle> <Style TargetType="{x:Type igDP:LabelPresenter}"> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate> <DockPanel> <Image DockPanel.Dock="Left" Source="icon.png" Margin="2,0,4,0" PreviewMouseDown="Image_PreviewMouseDown" Width="15" Height="15" > <!-- Scale up the image render size because the default layout slot is not too big. --> <Image.RenderTransform> <ScaleTransform CenterX="7" CenterY="7" ScaleX="1.4" ScaleY="1.4" /> </Image.RenderTransform> </Image> <ContentPresenter ContentTemplate="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" /> </DockPanel> </DataTemplate> </Setter.Value> </Setter> </Style> </igDP:FieldSettings.LabelPresenterStyle> </igDP:FieldSettings> </igDP:Field.Settings></igDP:Field>
...In the code-behind...
void Image_PreviewMouseDown(object sender, MouseButtonEventArgs e){ // Handle the event so that the field header does not get clicked. e.Handled = true; Debug.WriteLine("You clicked the icon!");}
Josh
thanks for the reply and i was also able to do it.
But can I add icon/image in the header thru code behind. As I may require to add more than one image depending on the conditions.
Please assist for this also.
You don't need to do that from code. I showed how to do something similar here.
How can I get the column of the clicked image?
Hy Josh.
I have also a question about this sorting header.
I use a simple XamDataGrid in which I have some records and I want to sort them. When I click on the column header they are sorted ascending or descending, but a little arrow appears (to display the sorting order). When I go over that arrow the cursor changes to "hand" cursor and if I click the arrow for a new sorting nothing happens. Is this correct? Can I do something to sort the records even when the "hand" cursor it's displayed?
Thanks very much for help.
Nico
The sample that I linked you to demonstrates how to show/hide icons using data binding. Where those icons appear, whether in a data record or in a column header, is irrelevant. The technique can be used anywhere.
well, I want to insert icon/image in the header at runtime and not in the data rows. I will place different icon/image in the header at runtime and handle their click events. Is there a way, i can create a placeholder in the each field headers in XAML and can add controls in those placeholders at runtime. please assist and thanks for all responses.