Link to home
Start Free TrialLog in
Avatar of Russ Suter
Russ Suter

asked on

Xaml: How do I create a background that looks like alternating grid rows?

I'm still learning so much about Xaml but one thing I currently need is a background that looks like alternating colors of grid rows like this:
User generated imageI'm reasonably sure I'd use a VisualBrush element to do this but I honestly have no idea how to construct the thing. I need a thin border between each "row" and every alternate "row" needs a different color.
Avatar of gr8gonzo
gr8gonzo
Flag of United States of America image

Is this for a DataGrid? If so, you can use the AlternatingRowBackground property of the DataGrid to specify the alternate-row color:

<DataGrid AlternatingRowBackground="#ffffee">

...and you can use the RowStyle to set a border on each row (placed inside the <DataGrid> element):
    <DataGrid.RowStyle>
        <Style TargetType="DataGridRow">
            <Setter Property="Border.BorderBrush" Value="Gray" />
            <Setter Property="Border.BorderThickness" Value="0,0,0,1" />
        </Style>
    </DataGrid.RowStyle>

Open in new window


Haven't tested it out yet, but should work in theory.

If you're just looking for a plain, repeating background without any ties to data elements or anything, but that scales in height/size with the element, you can definitely use a VisualBrush, like this:

    <Grid>
        <Grid.Background>
            <VisualBrush TileMode="Tile" Viewport="0,0,0.1,0.1">
                <VisualBrush.Visual>
                    <StackPanel>
                        <Rectangle Height="20" Width="1" Fill="White" />
                        <Rectangle Height="1" Width="1" Fill="Gray" />
                        <Rectangle Height="20" Width="1" Fill="#ffffcc" />
                        <Rectangle Height="1" Width="1" Fill="Gray" />
                    </StackPanel>
                </VisualBrush.Visual>
            </VisualBrush>
        </Grid.Background>
    </Grid>

Open in new window


Or if you don't want it to stretch like that:

<Grid.Background>
            <VisualBrush TileMode="Tile" Viewport="0,0,20,42" ViewportUnits="Absolute" Viewbox="0,0,20,42"      
ViewboxUnits="Absolute">
                <VisualBrush.Visual>
                    <StackPanel>
                        <Rectangle Fill="Gray" Width="20" Height="1" />
                        <Rectangle Fill="PaleGoldenrod" Width="20" Height="20" />
                        <Rectangle Fill="Gray" Width="20" Height="1" />
                        <Rectangle Fill="White" Width="20" Height="20" />
                    </StackPanel>
                </VisualBrush.Visual>
            </VisualBrush>
        </Grid.Background>

Open in new window

Avatar of Russ Suter
Russ Suter

ASKER

That wasn't nearly as difficult as I thought it would be. I see now that a visual brush is just basically anything you can draw using Xaml. That last example is pretty much what I need. I just need to tweak the height values to make it work for me. Thanks.
This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.