5

I'm trying to create grid with borders but with this code, only the first cell has border:

<Grid Margin="24,96,24,288" d:LayoutOverrides="GridBox">
    <Grid.RowDefinitions>
        <RowDefinition Height="0.150*"/>
        <RowDefinition Height="0.150*"/>
        <RowDefinition Height="0.150*"/>
        <RowDefinition Height="0.150*"/>
        <RowDefinition Height="0.150*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.150*"/>
        <ColumnDefinition Width="0.150*"/>
        <ColumnDefinition Width="0.150*"/>
        <ColumnDefinition Width="0.150*"/>
        <ColumnDefinition Width="0.150*"/>
        <ColumnDefinition Width="0.150*"/>
        <ColumnDefinition Width="0.150*"/>
    </Grid.ColumnDefinitions>
    <Border BorderBrush="#FFFFFF" BorderThickness="1"/>
</Grid>

How do I create solid border for all the cells?

Triad sou.
  • 2,969
  • 3
  • 23
  • 27
ooxio
  • 806
  • 1
  • 10
  • 13

1 Answers1

28

Wrap the Grid into a Border :

<Border  BorderBrush="#FF0000" BorderThickness="5" Margin="24,96,24,288">
    <Grid>
       ....
    </Grid>
</Border>

The way you did was adding a Border-element into the Grid-Control - so of course the first cell (if you don't set Grid.Row/Grid.Column both will default to 0) was drawn with one ;)

If you want to create a border for each cell then you have to wrap each content into a Border-element or you have to edit the template for the grid. As another alternative you could try to style the Grid (here is a nice article) Here is another question from this site concerning a similar thing: Styling a WPF layout grid background

To make this a bit clearer the easiest (if not most refined) way to get a (even) border for each cell is to really set the boarder for each cell AND for the grid yourself (either in markup or code) - here is a simplified example:

<Border BorderBrush="#FF0000" BorderThickness="2" Grid.Row="0" Grid.Column="0" Margin="24,96,24,288" >
    <Grid>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <Border BorderBrush="#FF0000" BorderThickness="2" Grid.Row="0" Grid.Column="0"/>
            <Border BorderBrush="#FF0000" BorderThickness="2" Grid.Row="0" Grid.Column="1"/>
            <Border BorderBrush="#FF0000" BorderThickness="2" Grid.Row="1" Grid.Column="0"/>
            <Border BorderBrush="#FF0000" BorderThickness="2" Grid.Row="1" Grid.Column="1"/>
    </Grid>
</Border>
Community
  • 1
  • 1
Random Dev
  • 51,810
  • 9
  • 92
  • 119
  • Well I actually tried this as well but it doesn't work either. – ooxio Sep 25 '11 at 13:31
  • what the boarder around the grid? ... sure this didn't give you a border around your grid? – Random Dev Sep 25 '11 at 13:33
  • sorry I don't get your question, however this way it draws nothing. No borders around grid or cells. – ooxio Sep 25 '11 at 13:36
  • might be the example was ill choosen (copied your markup for the color and thickness ;)) - I will change it a bit so you should see the effect because I guess you don't see a small white line in this case... – Random Dev Sep 25 '11 at 14:34
  • So basically you need to add million border definitions by hand to get this work, great... Thanks for the clarification! However, decided to go with canvas. – ooxio Sep 25 '11 at 17:55
  • No you don't need to - you have several options. You could set all the borders with two simple for-loops in the code-behind. Or you could change the template of the grid. But this one is the simplest one and the template option can be found by a simple google search or a question here *after* you tried yourself. This is a FAQ site not a "do my job" site. And if you are talking about a million grid cells (so basically each cell < 10pixels on your average monitor) go figure another layout.... – Random Dev Sep 25 '11 at 20:47