Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting Grid border in WP7

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?

like image 963
ooxio Avatar asked Sep 25 '11 13:09

ooxio


1 Answers

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>
like image 136
Random Dev Avatar answered Oct 05 '22 08:10

Random Dev