sae201_qwirkle/Qwirkle/QwirkleViews/Pages/Gameboard.xaml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Qwirkle.Pages.Gameboard"
             xmlns:controls="clr-namespace:Qwirkle.Views"
             Title="Gameboard"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Name="root">

    <ContentPage.Resources>
        <x:Double x:Key="CellWidth">75</x:Double>
            <x:Double x:Key="CellHeight">75</x:Double>
            <x:Double x:Key="VerticalSpacing">1</x:Double>
            <x:Double x:Key="HorizontalSpacing">1</x:Double>
        <toolkit:MultiMathExpressionConverter x:Key="multiMathExpressionConverter" />
    </ContentPage.Resources>
    <Grid BackgroundColor="#efca85">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="4*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="10*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>


        <Border WidthRequest="80" HeightRequest="80"
                                BackgroundColor="WhiteSmoke"
                                Margin="0" >
            <Border.GestureRecognizers >
                <DropGestureRecognizer DragOver="OnDragOverBag"
                                                       DropCommand="{Binding OnDropB, Source={x:Reference root}}"
                                                       />
            </Border.GestureRecognizers>
            <Image Source="bag.png"></Image>
        </Border>

        <Button  
            HorizontalOptions="Start"
            Grid.Row="0" Grid.Column="1"
            Text="Swap"
            Clicked="OnButtonSwapClicked"
            Style="{StaticResource GameButton}"/>

        <Button
            HorizontalOptions="End"
            Grid.Row="2" Grid.Column="1"
            Text="Skip / End Turn" WidthRequest="200"
            Clicked="OnButtonSkipClicked"
            Style="{StaticResource GameButton}"/>
        
        <Button  
            HorizontalOptions="Start" 
            Grid.Row="2" Grid.Column="1"
            Text="Settings"
            Style="{StaticResource GameButton}"/>

        <CollectionView Grid.Row="0" Grid.Column="1" ItemsSource="{Binding PlayerList[0].Tiles}"
                        HorizontalOptions="Center"
                        VerticalOptions="Center" >
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Horizontal"/>
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>

                <DataTemplate>
                    <Border WidthRequest="70" HeightRequest="70"
                        BackgroundColor="{Binding ColorBC1, Source={x:Reference root}}"
                        Margin="0"
                           >
                        <Border.GestureRecognizers>
                            <DragGestureRecognizer CanDrag="True" DragStarting="OnDragStarting"/>
                        </Border.GestureRecognizers>
                        <controls:TileView Shape="{Binding GetShape}" Color="{Binding GetColor}"></controls:TileView>
                    </Border>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

        <CollectionView Grid.Row="1" Grid.Column="0" ItemsSource="{Binding PlayerList[2].Tiles}"
                        HorizontalOptions="Center"
                        VerticalOptions="Center" >
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical"/>
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Border WidthRequest="70" HeightRequest="70"
                        BackgroundColor="{Binding ColorBC3, Source={x:Reference root}}"
                        Margin="0">
                        <Border.GestureRecognizers>
                            <DragGestureRecognizer CanDrag="True" DragStarting="OnDragStarting"/>
                        </Border.GestureRecognizers>
                        <controls:TileView Shape="{Binding GetShape}" Color="{Binding GetColor}"></controls:TileView>
                    </Border>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

        <CollectionView Grid.Row="1" Grid.Column="2" ItemsSource="{Binding PlayerList[3].Tiles}"
                        HorizontalOptions="Center"
                        VerticalOptions="Center" >
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical"/>
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Border WidthRequest="70" HeightRequest="70"
                        BackgroundColor="{Binding ColorBC4, Source={x:Reference root}}"
                        Margin="0">
                        <Border.GestureRecognizers>
                            <DragGestureRecognizer CanDrag="True" DragStarting="OnDragStarting"/>
                        </Border.GestureRecognizers>
                        <controls:TileView Shape="{Binding GetShape}" Color="{Binding GetColor}"></controls:TileView>
                    </Border>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

        <CollectionView Grid.Row="2" Grid.Column="1" ItemsSource="{Binding PlayerList[1].Tiles}"
                        HorizontalOptions="Center"
                        VerticalOptions="Start" >
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Horizontal"/>
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Border WidthRequest="70" HeightRequest="70"
                        BackgroundColor="{Binding ColorBC2, Source={x:Reference root}}"
                            Margin="0">
                        <Border.GestureRecognizers>
                            <DragGestureRecognizer CanDrag="True" DragStarting="OnDragStarting"/>
                        </Border.GestureRecognizers>
                        <controls:TileView Shape="{Binding GetShape}" Color="{Binding GetColor}"></controls:TileView>
                    </Border>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

        <ScrollView Grid.Row="1" Grid.Column="1" VerticalOptions="FillAndExpand">
            <CollectionView ItemsSource="{Binding Board.ReadCells}"
                            HorizontalOptions="Center"
                            VerticalOptions="Center" HorizontalScrollBarVisibility="Never" VerticalScrollBarVisibility="Never"
                            >

                <CollectionView.HeightRequest>

                    <MultiBinding Converter="{StaticResource multiMathExpressionConverter}" ConverterParameter="x0 * x1 +(x0 - 1) * x2 ">
                        <Binding Path="Board.Rows" />
                        <Binding Source="{StaticResource CellHeight}" />
                        <Binding Source="{StaticResource VerticalSpacing}" />
                    </MultiBinding>

                </CollectionView.HeightRequest>
                
                
                <CollectionView.WidthRequest>
                    
                    <MultiBinding Converter="{StaticResource multiMathExpressionConverter}" ConverterParameter="x0 * x1 +(x0 - 1) * x2 ">
                        <Binding Path="Board.Columns" />
                        <Binding Source="{StaticResource CellWidth}" />
                        <Binding Source="{StaticResource HorizontalSpacing}" />
                    </MultiBinding>
                    
                </CollectionView.WidthRequest>

                <CollectionView.ItemsLayout>
                    <GridItemsLayout Orientation="Vertical"
                                    Span="{Binding Board.Columns}"
                                    HorizontalItemSpacing="{StaticResource HorizontalSpacing}"
                                    VerticalItemSpacing="{StaticResource VerticalSpacing}"/>
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Border WidthRequest="{StaticResource CellWidth}"
                    HeightRequest="{StaticResource CellHeight}"
                                BackgroundColor="WhiteSmoke">
                            <Border.GestureRecognizers >
                                <DropGestureRecognizer DragOver="OnDragOver"
                                                       DropCommand="{Binding OnDrop, Source={x:Reference root}}"
                                                       DropCommandParameter="{Binding .}"/>
                            </Border.GestureRecognizers>
                            <controls:TileView HorizontalOptions="Center" Shape="{Binding Tile.GetShape}" Color="{Binding Tile.GetColor}"></controls:TileView>
                        </Border>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </ScrollView>

        <controls:Scoreboard InputTransparent="True" HorizontalOptions="End" Grid.Row="1" Grid.Column="1" ></controls:Scoreboard>



    </Grid>
</ContentPage>