none
DataGrid: display icon in front of cell when mouseover

    Question

  • Hi,

    I want that a icon appears in the cell beside my text when the mouse is over that cell.

    For that i already registered mouse events and so on.

    Now i am so far that when the mouse is over the cell it changes the content template and inserts an image. But i dont want that the text inside the cell is replaced by the image. I want that the image is displayed in the cell beside my already existing content which is already in the cell. Or even better the icon is displayed in front of the cell beside the already existeing content.

    here is my code;

    XAML:

            <Style x:Key="dgCellStyleMouseEnter" TargetType="sdk:DataGridCell">
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Grid>
                                <Image Source="xx"></Image>
                            </Grid>
                        </DataTemplate>
                    </Setter.Value>
                </Setter></Style>
    
    

    Code-Behind:

     

          private void DectGrid_LoadingRow(object sender, DataGridRowEventArgs e)
            {
                //Iterate through all columns of the DataGrid
                DataGrid dgProductSales = (DataGrid)sender;
    
                for (int i = 0; i < dgProductSales.Columns.Count; i++)
                {
                    //Get the Cell Index
                    dgProductSales.SelectedIndex = e.Row.GetIndex();
                    //Get the Column Index
                    DataGridColumn dgColumn = dgProductSales.Columns[i];
                    //Read the Cell contents for the row
                    FrameworkElement ele = dgColumn.GetCellContent(e.Row);
                    FrameworkElement eleCell = GetElementParent(ele, typeof(DataGridCell));
                    DataGridCell dgCell = (DataGridCell)eleCell;
                    dgCell.MouseEnter += new MouseEventHandler(dgCell_MouseEnter);
                    dgCell.MouseLeave += new MouseEventHandler(dgCell_MouseLeave);
                }
            }
    
            void dgCell_MouseEnter(object sender, MouseEventArgs e)
            {
                DataGridCell dgCell = sender as DataGridCell;
                dgCell.Style = this.Resources["dgCellStyleMouseEnter"] as Style;
            }
    
    Monday, April 30, 2012 11:05 AM

Answers

  • Hi alex87,

    I suggest you use one Template with Image and TextBox, but only show Image when TextBox's Text property is not null and MouseOver event is invoked.

     

    Best Regards,

    Wednesday, May 02, 2012 11:01 PM

All replies

  • <Style x:Key="dgCellStyleMouseEnter" TargetType="sdk:DataGridCell"> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate> <Grid> <Image Source="xx"></Image> </Grid> </DataTemplate> </Setter.Value> </Setter></Style>
    hi alex87,

        Hi,

         In your Datatemplate, you are not placing any textbox.  You are just placing an image, so it is replacing your content.

         I think you can add a <TextBox> or <TextBlock>  to the definition. Something like this.

                         <DataTemplate>
                            <Grid>
                              <TextBox Text="{Binding myvalue}" > </TextBox>  <Image Source="xx"></Image>
                            </Grid>
                        </DataTemplate>

    Hope it Helps Laughing

    Wednesday, May 02, 2012 12:23 AM
  •             templateColumn.CellTemplate =
                    (DataTemplate)XamlReader.Load(@"<DataTemplate xmlns=""http://schemas.microsoft.com/client/2007"">" + @"<TextBlock Text=""{Binding " + ColName + @"}"" Margin=""4"" />"+ @"</DataTemplate>");

    Hi Phani,

    yeah, i am adding the textbox to a datatemplate previously when i created the datagrid.

    Is it possible to use this dataTemplate which is already existent and to add my image?

     

    Wednesday, May 02, 2012 4:33 AM
  • Hi alex87,

    I suggest you use one Template with Image and TextBox, but only show Image when TextBox's Text property is not null and MouseOver event is invoked.

     

    Best Regards,

    Wednesday, May 02, 2012 11:01 PM
  • Hi Shi Ding,

    Yes ok, i think that would work, i will test it in the next days.

    thanks.

    Thursday, May 03, 2012 2:59 AM