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.
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.
You don't need to do that from code. I showed how to do something similar here.