Почему не работает вынесение стилей в общую переменную при работе с гридом?

Question

[LaFable]

Добрый день!
Решил позаниматься Xamarin и возник такой вопрос.
На текст внутри ячеек можно не смотреть, там генерируются случайные значения. Интересует border, который я создаю для ячейки (при помощи накладывания BoxView)
Создаю Grid.

Вот в таком виде все работает:

Grid grid = new Grid
		    {
		        RowDefinitions =
		        {
		            new RowDefinition { Height = new GridLength(1, GridUnitType.Star) }
		        },
		        ColumnDefinitions =
		        {
		            new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }		            
		        }
		    };

	    grid.BackgroundColor = Color.White;
		    
            grid.Children.Add(new BoxView { Color = Color.Gray },  0, 0);
	    grid.Children.Add(new BoxView { Color = Color.White, Margin = 1 }, 0, 0);
            grid.Children.Add(Label(ListNationalTeams()[0]), 0, 0);

	    grid.Children.Add(new BoxView { Color = Color.Gray }, 0, 1);
	    grid.Children.Add(new BoxView { Color = Color.White, Margin = 1 }, 0, 1);
            grid.Children.Add(Label(ListNationalTeams()[1]), 0, 1);

	    grid.Children.Add(new BoxView { Color = Color.Gray }, 0, 2);
	    grid.Children.Add(new BoxView { Color = Color.White, Margin = 1 }, 0, 2);
            grid.Children.Add(Label(ListNationalTeams()[2]), 0, 2);

	    grid.Children.Add(new BoxView { Color = Color.Gray }, 0, 3);
	    grid.Children.Add(new BoxView { Color = Color.White, Margin = 1 }, 0, 3);
            grid.Children.Add(Label(ListNationalTeams()[3]), 0, 3);

	    grid.Children.Add(new BoxView { Color = Color.Gray }, 0, 4);
	    grid.Children.Add(new BoxView { Color = Color.White, Margin = 1 }, 0, 4);
            grid.Children.Add(Label(ListNationalTeams()[4]), 0, 4);

	    grid.Children.Add(new BoxView { Color = Color.Gray }, 0, 5);
	    grid.Children.Add(new BoxView { Color = Color.White, Margin = 1 }, 0, 5);
            grid.Children.Add(Label(ListNationalTeams()[5]), 0, 5);

	    grid.Children.Add(new BoxView { Color = Color.Gray }, 0, 6);
	    grid.Children.Add(new BoxView { Color = Color.White, Margin = 1 }, 0, 6);
            grid.Children.Add(Label(ListNationalTeams()[6]), 0, 6);

	    grid.Children.Add(new BoxView { Color = Color.Gray }, 0, 7);
	    grid.Children.Add(new BoxView { Color = Color.White, Margin = 1 }, 0, 7);
            grid.Children.Add(Label(ListNationalTeams()[7]), 0, 7);

Результат:


А если я пытаюсь вынести стили в общие, то результат получается печальный.
Ниже код с вынесенным стилем и результат:

Grid grid = new Grid
		    {
		        RowDefinitions =
		        {
		            new RowDefinition { Height = new GridLength(1, GridUnitType.Star) }	         
		        },
		        ColumnDefinitions =
		        {
		            new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }		            
		        }
		    };

		    grid.BackgroundColor = Color.White;

		    var grayBox = new BoxView {Color = Color.Gray};
		    var whiteBox = new BoxView {Color = Color.White, Margin = 1};

            grid.Children.Add(grayBox,  0, 0);
	    grid.Children.Add(whiteBox, 0, 0);
            grid.Children.Add(Label(ListNationalTeams()[0]), 0, 0);

	    grid.Children.Add(grayBox, 0, 1);
	    grid.Children.Add(whiteBox, 0, 1);
            grid.Children.Add(Label(ListNationalTeams()[1]), 0, 1);

	    grid.Children.Add(grayBox, 0, 2);
	    grid.Children.Add(whiteBox, 0, 2);
            grid.Children.Add(Label(ListNationalTeams()[2]), 0, 2);

	    grid.Children.Add(grayBox, 0, 3);
	    grid.Children.Add(whiteBox, 0, 3);
            grid.Children.Add(Label(ListNationalTeams()[3]), 0, 3);

	    grid.Children.Add(grayBox, 0, 4);
	    grid.Children.Add(whiteBox, 0, 4);
            grid.Children.Add(Label(ListNationalTeams()[4]), 0, 4);

	    grid.Children.Add(grayBox, 0, 5);
	    grid.Children.Add(whiteBox, 0, 5);
            grid.Children.Add(Label(ListNationalTeams()[5]), 0, 5);

	    grid.Children.Add(grayBox, 0, 6);
	    grid.Children.Add(whiteBox, 0, 6);
            grid.Children.Add(Label(ListNationalTeams()[6]), 0, 6);

	    grid.Children.Add(grayBox, 0, 7);
	    grid.Children.Add(whiteBox, 0, 7);
            grid.Children.Add(Label(ListNationalTeams()[7]), 0, 7);

Почему так происходит? И есть ли возможность создать общую переменную?

Answer 1

[Вячеслав Золотов]

Вы немного не то делаете.
1. В вашем случае вместо grid нужно использовать listview
2. Используйте вёрстку в xaml
3. Вместо ручного присваивания значений в UI делайте биндинг
4. Вместо вёрстки "кодом" для ячеек используйте Data Template, почитайте что такое стили в Xamarin forms

А в ответ на ваш вопрос

Почему так происходит?

могу посоветовать посмотреть в исходники Xamarin Forms

И есть ли возможность создать общую переменную?

Изучите xaml, стили, темплейты.

Comments

[LaFable]

1. ListView я так понимаю не подойдет, потому что на самом деле у меня таблица 8х8, просто я лишнее удалил, там тоже самое дублируется примерно.
2. Хотелось попробовать использовать именно c#, тяжело мне дается xaml, да и в принципе ради интереса.
3. Жаль что ответ на мой вопрос не очевиден.

[Евгений Степанов]

LaFable, по пункту 1 - что вам мешает сделать элементом ListView Grid с 8ю столбцами? TableView в конце концов, но я его ни разу за всю практику не использовал, не подскажу. По поводу Binding'а и Template'ов вам правильно сказали, такие задачи правильно решать именно так.
В вашем примере вы указали для грида свойства для одной строки и одной колонки. Но строк и колонок у вас больше, остальным задались размеры по-умолчанию. Добавьте нужное кол-во элементов в RowDefinitions и ColumnDefinitions