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
785
Weird behaviour when binding cell colour
posted

Hi,

   I have a grid and I want to have the whole row set to a specific colour depending on the data in it. I managed to do it in SL grid by using a column template and have the display control take all the space of the cell.

   When I tried to do the same in the XamWebGrid the display control doesn't take all the cell space. It does it the first time the grid is displayed and then when I click on the grid all the display components get resized and it doesn't look like the row is coloured anymore.

 

   I attached 2 screenshots. On the top is the SL3 grid (the one I want the XamWebGrid to look like). At the bottom is the XamWebGrid. The first screenshot is just after the grid id displayed and is like I want it to look like. The second one is taken after I clicked on the grid and the colours are all messed up.

 

Here's my template column definition:

 

                        <igGrid:TemplateColumn Key="Name" IsReadOnly="True" IsResizable="True" Width="SizeToCells" >
                            <igGrid:TemplateColumn.ItemTemplate>
                                <DataTemplate>
                                    <Grid Background="{Binding Path=Rendering.BackColor, Mode=OneWay, Converter={StaticResource ColorConverter}}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                        <TextBlock
                                        Padding="2"
                                        HorizontalAlignment="Stretch"
                                        VerticalAlignment="Stretch"
                                        Text="{Binding Path=Name}"
                                        TextWrapping="NoWrap"
                                        Foreground="{Binding Path=Rendering.ForeColor, Mode=OneWay, Converter={StaticResource ColorConverter}}"
                                        />
                                    </Grid>
                                </DataTemplate>
                            </igGrid:TemplateColumn.ItemTemplate>
                            <igGrid:TemplateColumn.HeaderTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Path=Resource.Vehicle, Source={StaticResource LocalizedStrings }}"/>
                                </DataTemplate>
                            </igGrid:TemplateColumn.HeaderTemplate>
                        </igGrid:TemplateColumn>

 

 

Cheers.

PrintScreen Files.zip
  • 40030
    Suggested Answer
    Offline posted

    Hi, 

    So first, you should set the Column's HorizontalContentAlignment property to stretch. 

    Next, create a new CellControl Style and set the background to the color that you'd like. 

    You can then apply them to that to the specific row that you'd like

    Style s = new Style(typeof(CellControl));

    s.Setters.Add(new Setter(CellControl.BackgroundProperty, new SolidColorBrush(Colors.Red)));

    grid.Rows[0].CellStyle = s;

    Hope this helps, 

    -SteveZ