Forums Ultimate UI for WPF
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
choudhary pal
3806
image/icon in the column header
posted

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

  • 6867
    posted

    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