CODEWITHSUNDEEP
c#gridwin-universal-appuwp
yuntian liu
yuntian liu

Reputation: 61

How to display gridlines in code behind

Here is my code:

Grid gameboard = new Grid();
gameboard.HorizontalAlignment = HorizontalAlignment.Left;
gameboard.VerticalAlignment = VerticalAlignment.Top; 
gameboard.Width = Window.Current.Bounds.Width;
gameboard.Height = Window.Current.Bounds.Width;
Border border = new Border();
border.BorderThickness = new Thickness(1);
border.BorderBrush = new SolidColorBrush(Colors.Blue);
for (int j=0;j<7;j++)
{
    gameboard.ColumnDefinitions.Add(new ColumnDefinition());          
}
for (int i = 0; i < 7; i++)
{
    gameboard.RowDefinitions.Add(new RowDefinition());                  
}

I am a learner, now i want to show my grid lines, can someone help me? thanks a lot!

Upvotes: 1

Views: 2444

Answers (2)

Kory Gill
Kory Gill

Reputation: 7163

Since you are learning, I will help kick start your efforts with something to get you and others in a similar situation to the next step.

Start with code like the following, and tweak it, learn it, research it, and most of all have fun.

XAML

<Grid Name="LayoutRoot" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="30" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
</Grid>

CODE

public MainPage()
{
    this.InitializeComponent();
    DataContext = this;
    Loaded += MainPage_Loaded;
}

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    Grid gameboard = new Grid();
    gameboard.HorizontalAlignment = HorizontalAlignment.Stretch;
    gameboard.VerticalAlignment = VerticalAlignment.Stretch;
    for (int j = 0; j < 7; j++)
    {
        var cd = new ColumnDefinition();
        cd.Width = new GridLength(1, GridUnitType.Star);
        var rd = new RowDefinition();
        rd.Height = new GridLength(1, GridUnitType.Star);
        gameboard.ColumnDefinitions.Add(cd);
        gameboard.RowDefinitions.Add(rd);
    }

    for (int j = 0; j < 7; j++)
    {
        for (int i = 0; i < 7; i++)
        {
            Border border = new Border();
            border.BorderThickness = new Thickness(1);
            border.BorderBrush = new SolidColorBrush(Colors.Blue);
            border.HorizontalAlignment = HorizontalAlignment.Stretch;
            border.VerticalAlignment = VerticalAlignment.Stretch;

            var tb = new TextBlock();
            tb.Text = string.Format($"i={i}; j={j}");
            tb.Margin = new Thickness(4);

            Grid.SetColumn(border, j);
            Grid.SetRow(border, i);
            border.Child = tb;

            gameboard.Children.Add(border);
        }
    }

    LayoutRoot.Children.Add(gameboard);
}

RESULT

Grid UI with borders

SUMMARY

It's a start. It's not perfect, and to get the inner borders to not be thicker than the edges will take a small amount of effort, but should not be too difficult. Hint: think about how to use border.BorderThickness = new Thickness(l, t, r, b); where l/t/r/b are 1 or 0 depending on i/j. I might even make this an interview question; could be a fun discussion.

Upvotes: 4

Saad
Saad

Reputation: 21

You can use Grid.ShowGridLines Property and add grid lines.

gameboard.ShowGridLines = true;

Upvotes: 1

Related Questions