Replace 81 buttons for a CollectionView for Wordgame or Sudoku

Question

I am trying to make a Wordpuzzle game .

Have 81 Buttons that make a 9X9 layout , i fill the buttons with a Letter or a Number from a database online.

When a Buttonclicked the background is changing Color .

All is working but it is a lot of Buttons and code , can i make this in a CollectionView ?

I think in one row the 9 letters or numbers in 9 labels in 9 Colums ???
And then load everything from the database with data for 9 rows ??

Don't know how to make this , as in the picture.

The picture is what i have now with 81 Buttons

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

Do you want to achieve the result like following screenshot with CollectionView

Here is my layout.

   <CollectionView ItemsSource="{Binding Monkeys}"  
                  >  
               <CollectionView.ItemsLayout>  
                   <GridItemsLayout Orientation="Vertical"  
                           Span="9">  
                         
                   </GridItemsLayout>  
               </CollectionView.ItemsLayout>  
               <CollectionView.ItemTemplate>  
                   <DataTemplate>  
                        
                       <StackLayout>  
                           <Button Text="{Binding Name}"></Button>  
                             
                       </StackLayout>  
                   </DataTemplate>  
               </CollectionView.ItemTemplate>  
           </CollectionView>  

layout background code.

   public partial class MainPage : ContentPage  
       {  
           public MainPage()  
           {  
               InitializeComponent();  
               this.BindingContext = new MyViewModel();  
           }  
       }  

Here is my MyViewModel.cs

   public class MyViewModel  
       {  
           public ObservableCollection<Monkey> Monkeys { get; set; }  
           public MyViewModel()  
           {  
               Monkeys = new ObservableCollection<Monkey>();  
     
               for (int i = 1; i < 82; i++)  
               {  
                   Monkeys.Add(new Monkey { Name=i.ToString() });  
               }  
                
           }  
       }  
     
       public class Monkey  
       {  
           public string Name { get; set; }  
       }  

Best Regards,

Leon Lu

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.