使用Xamarin開發移動應用示例——數獨遊戲（七）新增新遊戲

專案程式碼可以從Github下載：https://github.com/zhenl/ZL.Shudu 。程式碼隨專案進度更新。

現在我們增加新增新遊戲的功能，建立一個頁面，編輯初始局面，並儲存到資料庫。

我們首先了解一下Xamarin中頁面如何跳轉。首先，需要為跳轉的頁面增加路由，這需要在AppShell中增加下面的程式碼：

        public AppShell()
        {
            InitializeComponent();
            Routing.RegisterRoute(nameof(GameEdit), typeof(GameEdit));
            Routing.RegisterRoute(nameof(GameList), typeof(GameList));
        }

GameEdit和GameList是兩個頁面，GameList中顯示資料庫中現有的遊戲列表，GameEdit用來編輯或新建遊戲。通過GameList中的新建遊戲按鈕或者選擇列表中現有的專案，可以跳轉到GameEdit。在GameEdit中可以返回到GameList。導航的程式碼如下：

GameList中新建遊戲的程式碼如下：

        async void btn_NewGame_Clicked(object sender, EventArgs e)
        {
            await Shell.Current.GoToAsync($"{nameof(GameEdit)}?{nameof(GameEdit.ItemId)}=0");
        }

GameList中選中現有專案，跳轉到GameEdit的程式碼如下：

        async void Handle_ItemTapped(object sender, ItemTappedEventArgs e)
        {
            if (e.Item == null)
                return;
            await Shell.Current.GoToAsync($"{nameof(GameEdit)}?{nameof(GameEdit.ItemId)}={e.Item}");
        }

在GameEdit中，還需要定義接收傳入的引數，這裡傳入的引數是ItemId，在GameEdit的宣告中使用QueryProperty標記宣告傳入引數:

    [QueryProperty(nameof(ItemId), nameof(ItemId))]
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class GameEdit : ContentPage

在接收ItemId時，從資料庫中讀取相應的記錄並初始化頁面:

        public string ItemId
        {
            get
            {
                return currentId.ToString();
            }
            set
            {
                currentId = int.Parse( value);
                if (currentId > 0)
                {
                    var game = App.Database.GetGameAsync(currentId).Result;
                    if(game != null) EditGame(game);
                }
                
            }
        }

下面是GameList和GameEdit的完整程式碼。

GameList頁面程式碼：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d="http://xamarin.com/schemas/2014/forms" xmlns:d1="http://xamarin.com/schemas/2014/forms/design"
             x:Class="ZL.Shudu.Views.GameList">
    <ContentPage.Content>
        <StackLayout>
            <Button Text="新遊戲"  Clicked="btn_NewGame_Clicked"></Button>
            <ListView x:Name="MyListView"
            d1:ItemsSource="{Binding Items}"
            ItemTapped="Handle_ItemTapped"
            CachingStrategy="RecycleElement"
                   IsVisible="True">
                <d:ListView.ItemsSource>
                    <x:Array Type="{x:Type x:String}">
                        
                    </x:Array>
                </d:ListView.ItemsSource>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

GameList後臺程式碼：

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace ZL.Shudu.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class GameList : ContentPage
    {
        public ObservableCollection<string> Items { get; set; }

        public GameList()
        {
            InitializeComponent();
           
        }

        protected override async void OnAppearing()
        {
            await RefreshList();
        }

        public async Task RefreshList()
        {
            Items = await GetItems();
            MyListView.ItemsSource = Items;
            MyListView.IsVisible = true;
        }

        public async Task<ObservableCollection<string>> GetItems()
        {
            var items = new ObservableCollection<string>();

            var lst = await App.Database.GetGamesAsync();

            foreach (var obj in lst)
            {
                items.Add(obj.ID.ToString());
            }
            return items;
        }

        async void Handle_ItemTapped(object sender, ItemTappedEventArgs e)
        {
            if (e.Item == null)
                return;
            await Shell.Current.GoToAsync($"{nameof(GameEdit)}?{nameof(GameEdit.ItemId)}={e.Item}");
        }

        async void btn_NewGame_Clicked(object sender, EventArgs e)
        {
            await Shell.Current.GoToAsync($"{nameof(GameEdit)}?{nameof(GameEdit.ItemId)}=0");
        }
    }
}

GameEdit頁面程式碼：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ZL.Shudu.Views.GameEdit">
    <ContentPage.Content>
        <StackLayout>
            <Grid x:Name="myGrid" IsVisible="True" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>

                    <RowDefinition Height="25"  />
                    <RowDefinition Height="25" />
                    <RowDefinition Height="25" />
                    <RowDefinition Height="25" />
                    <RowDefinition Height="25" />
                    <RowDefinition Height="25" />
                    <RowDefinition Height="25" />
                    <RowDefinition Height="25" />
                    <RowDefinition Height="25" />
                    <RowDefinition Height="40" x:Name="rowButton" />
                    <RowDefinition Height="40" x:Name="rowResult" />
                </Grid.RowDefinitions>
        
                <Button Text="儲存" Grid.Row="9" Grid.Column="2"  Grid.ColumnSpan="2" Clicked="btn_Save_Clicked"></Button>
                <Button Text="刪除" x:Name="btn_Delete" Grid.Row="9" Grid.Column="4"  Grid.ColumnSpan="2" Clicked="btn_Delete_Clicked"></Button>
                <Button Text="返回" Grid.Row="9" Grid.Column="6"  Grid.ColumnSpan="2" Clicked="btn_Back_Clicked"></Button>


                <Label x:Name="lbMessage" Grid.Row="10" Grid.Column="5" Grid.ColumnSpan="4" Text="" IsVisible="False"></Label>
            </Grid>

            <Grid x:Name="grdNumber" IsVisible="false">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />

                </Grid.RowDefinitions>
            </Grid>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

GameEdit後臺程式碼：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using ZL.Shudu.Services;

namespace ZL.Shudu.Views
{
    [QueryProperty(nameof(ItemId), nameof(ItemId))]
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class GameEdit : ContentPage
    {
        private bool IsSaved=false;
        private int currentId = 0;
        private static int[,] chess = new int[9, 9];
        private Button[,] buttons = new Button[9, 9];
        private Button[,] numbuttons = new Button[2, 5];
        private Button currentButton;
        private Button currentNumBtn;

        public string ItemId
        {
            get
            {
                return currentId.ToString();
            }
            set
            {
                currentId = int.Parse( value);
                if (currentId > 0)
                {
                    var game = App.Database.GetGameAsync(currentId).Result;
                    if(game != null) EditGame(game);
                }
                
            }
        }
        public GameEdit()
        {
            InitializeComponent();
            SetLayout();
            SetNumButtons();
        }
        internal void EditGame(InputGameInfo game)
        {
            currentId = game.ID;
            for (var i = 0; i < 9; i++)
                for (var j = 0; j < 9; j++)
                {
                    chess[i, j] = int.Parse(game.Sudoku.Substring(i * 9 + j, 1));
                    buttons[i, j].Text = chess[i, j] > 0 ? chess[i, j].ToString() : "";
                    buttons[i, j].IsEnabled = true;

                }
        }

        private void SetNumButtons()
        {
            var num = 1;
            for (var i = 0; i < 2; i++)
            {
                for (var j = 0; j < 5; j++)
                {
                    var btn = new Button();
                    if (num == 10)
                    {
                        btn.Text = "清除";
                        btn.Clicked += Clear_Clicked;
                        btn.FontSize = 15;
                    }
                    else
                    {
                        btn.Text = num.ToString();
                        btn.Clicked += Num_Clicked;
                        btn.FontSize = 16;
                    }
                    btn.Padding = 0;
                    grdNumber.Children.Add(btn, j, i);
                    numbuttons[i, j] = btn;
                    num++;
                }
            }
        }

        private void SetLayout()
        {
            for (var i = 0; i < 9; i++)
            {
                for (var j = 0; j < 9; j++)
                {
                    int m = i / 3;
                    int n = j / 3;
                    var btn = new Button();
                    var c = new Color(0.9, 0.9, 0.9);
                    if ((m + n) % 2 == 0)
                    {
                        c = new Color(0.7, 0.7, 0.7);
                    }
                    btn.BackgroundColor = c;
                    btn.Padding = 0;
                    btn.Margin = 0;
                    btn.FontSize = 20;
                    myGrid.Children.Add(btn, i, j);
                    btn.Clicked += Btn_Clicked;
                    buttons[i, j] = btn;


                }
            }
        }

        private async void btn_Save_Clicked(object sender, EventArgs e)
        {
            var str = "";
            for (var i = 0; i < 9; i++)
                for (var j = 0; j < 9; j++)
                {
                    if (string.IsNullOrEmpty(buttons[i, j].Text))
                        chess[i, j] = 0;
                    else
                        chess[i, j] = int.Parse(buttons[i, j].Text);
                    str += chess[i, j].ToString();
                }

            var newgame = new InputGameInfo
            {
                Sudoku = str,
                InputDate = DateTime.Now
            };
            if (currentId > 0)
            {
                newgame.ID = currentId;
                await App.Database.UpdateGameAsync(newgame);
            }
            else
            {
                currentId = await App.Database.SaveGameAsync(newgame);
            }
            lbMessage.Text = "儲存成功";
            lbMessage.IsVisible = true;
        }

        private void btn_New_Clicked(object sender, EventArgs e)
        {
            lbMessage.Text = "";
            currentId = 0;
            for (var i = 0; i < 9; i++)
                for (var j = 0; j < 9; j++)
                {
                    buttons[i, j].Text = "";
                    buttons[i, j].IsEnabled = true;
                    chess[i, j] = 0;
                }
        }

        private void Btn_Clicked(object sender, EventArgs e)
        {
            currentButton = sender as Button;
            rowResult.Height = 1;
            rowButton.Height = 1;
            grdNumber.IsVisible = true;
        }
        private async void btn_Delete_Clicked(object sender, EventArgs e)
        {
            if (currentId > 0)
            {
                await App.Database.DeleteGameAsync(new InputGameInfo { ID = currentId });
                await Shell.Current.GoToAsync($"///{nameof(GameList)}");

            }
        }

        private void Num_Clicked(object sender, EventArgs e)
        {

            currentNumBtn = sender as Button;
            int x = -1, y = -1;
            for (var i = 0; i < 9; i++)
            {
                for (var j = 0; j < 9; j++)
                {
                    if (buttons[i, j] == currentButton)
                    {
                        x = i;
                        y = j;
                        break;
                    }

                }
            }
            var num = int.Parse(currentNumBtn.Text);

            currentButton.Text = currentNumBtn.Text;
            myGrid.IsVisible = true;
            grdNumber.IsVisible = false;
            rowResult.Height = 40;
            rowButton.Height = 40;
            
        }

        private void Clear_Clicked(object sender, EventArgs e)
        {
            if (currentButton == null) return;
            currentButton.Text = "";
            grdNumber.IsVisible = false;
            myGrid.IsVisible = true;
            rowResult.Height = 40;
            rowButton.Height = 40;
        }

        private async void btn_Back_Clicked(object sender, EventArgs e)
        {
            
            await Shell.Current.GoToAsync($"///{nameof(GameList)}");
        }
    }
}

編輯功能完成了，但還有一個問題，如果輸入的遊戲無法完成怎麼辦？這需要增加判斷遊戲是否可以完成的邏輯，如果無法完成，需要將UsedInGame屬性設定為false，避免無效遊戲。

在輸入新的遊戲時，我們需要確保輸入的遊戲合法並且能夠完成，在輸入過程中，可能需要隨時檢查合法性，在儲存之前，需要確保遊戲合法且可完成，然後才能儲存。驗證的方法就是使用計算機演算法完成數獨遊戲，如果可以完成，就是合法的，否則就需要修改。相關的演算法已經封裝在程式包中，實現細節在這裡不做討論，將來會作為獨立的文章詳細介紹實現過程。可以使用Nuget程式包管理器進行安裝：ZL.Sudoku.Lib。使用方法如下：

                var comp = new FindOneSolution(cinp);
                var res = comp.Comp();
                var fchess = comp.Matrix;

上面演算法中，cinp是輸入的數獨陣列，使用Comp方法進行計算，如果res=2，說明計算完成，輸出的結果使用Matrix屬性獲得，也是一個二維陣列。如果res=1，說明無法完成，如果是其它值說明輸入有錯誤。

安裝完這個程式包後，我們可以改造GameEdit頁面。首先增加一個按鈕，用來在輸入過程中驗證是否合法和能夠完成。

                <Button Text="檢查" x:Name="btn_Check" Grid.Row="9" Grid.Column="0"  Grid.ColumnSpan="2" Clicked="btn_Check_Clicked"></Button>
                <Button Text="儲存" Grid.Row="9" Grid.Column="2"  Grid.ColumnSpan="2" Clicked="btn_Save_Clicked"></Button>
                <Button Text="刪除" x:Name="btn_Delete" Grid.Row="9" Grid.Column="4"  Grid.ColumnSpan="2" Clicked="btn_Delete_Clicked"></Button>
                <Button Text="返回" Grid.Row="9" Grid.Column="6"  Grid.ColumnSpan="2" Clicked="btn_Back_Clicked"></Button>

後臺程式碼：

      private void btn_Check_Clicked(object sender, EventArgs e)
        {
            if (btn_Check.Text == "檢查")
            {
                var cinp = getChess();
                lastinput = cinp;
                var comp = new FindOneSolution(cinp);
                var res = comp.Comp();
                var fchess = comp.Matrix;

                for (var i = 0; i < 9; i++)
                {
                    for (var j = 0; j < 9; j++)
                    {
                        var btn = buttons[i, j];
                        if (cinp[i, j] > 0)
                        {
                            btn.Text = cinp[i, j].ToString();

                        }
                        else
                        {
                            btn.Text = fchess[i, j] > 0 ? fchess[i, j].ToString() : "";
                        }
                    }
                }
                if (res == 0) lbMessage.Text = "不合法";
                else if (res == 1) lbMessage.Text = "計算不出來";
                else if (res == 2) lbMessage.Text = "計算完成";
                else lbMessage.Text = "其它錯誤";
                btn_Check.Text = "繼續";
            }
            else
            {
                lbMessage.Text = "";
                btn_Check.Text = "檢查";
                for (var i = 0; i < 9; i++)
                {
                    for (var j = 0; j < 9; j++)
                    {
                        var btn = buttons[i, j];
                        if (lastinput[i, j] > 0)
                        {
                            btn.Text = lastinput[i, j].ToString();

                        }
                        else
                        {
                            btn.Text ="";
                        }
                    }
                }
            }
        }

        private int[,] getChess()
        {
            var res = new int[9, 9];
            for (var i = 0; i < 9; i++)
            {
                for (var j = 0; j < 9; j++)
                {
                    var btn = buttons[i, j];
                    if(string.IsNullOrEmpty(btn.Text)) res[i,j]= 0;
                    else res[i, j]=int.Parse(btn.Text);
                }
            }
            return res;
        }

在儲存前，也需要進行檢查，如果不合法或者無法完成，就提示繼續編輯，不能儲存：

       private async void btn_Save_Clicked(object sender, EventArgs e)
        {
            if(btn_Check.Text=="繼續") btn_Check_Clicked(null,null);
            var str = "";
            var chess = getChess();
            for (var i = 0; i < 9; i++)
                for (var j = 0; j < 9; j++)
                {
                  str +=  chess[i, j].ToString();
                }
            var comp = new FindOneSolution(chess);
            var res = comp.Comp();
            if(res != 2)
            {
                lbMessage.Text = "不合法或者無法完成的遊戲，請修改後儲存";
                return;
            }
            var newgame = new InputGameInfo
            {
                Sudoku = str,
                InputDate = DateTime.Now,
                UsedInGame = true
            };
            if (currentId > 0)
            {
                newgame.ID = currentId;
                await App.Database.UpdateGameAsync(newgame);
            }
            else
            {
                currentId = await App.Database.SaveGameAsync(newgame);
            }
            lbMessage.Text = "儲存成功";
        }

到此，我們的數獨遊戲基本完成。下一步的工作是增加完成歷史列表頁面，讓玩家檢視已經完成的歷史，並且能夠覆盤。