3. 单页App - 码农教程

上一篇文章我们创建了 Xamarin 应用程序，当我们创建完应用程序后 VS 2019 帮我们生成了一个名为 MainPage 的 xaml 文件，这个文件在当前项目中是仅有的页面，我们称这个应用程序称为 单页应用程序 。下面我们就修改一下上一篇文章所创建的应用程序。首先我们打开 MainPage.xaml 文件，将模板中的代码修改为如下形式：

<?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/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="Notes.MainPage">

    <StackLayout Margin="10,35,10,10">
        <Label Text="Notes" HorizontalOptions="Center" FontAttributes="Bold"/>
        <Editor x:Name="editor" Placeholder="输入笔记内容" HeightRequest="100"/>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button Text="保存" x:Name="SaveButton" Clicked="SaveButton_Clicked"/>
            <Button Grid.Column="1" Text="删除" x:Name="DeleteButton" Clicked="DeleteButton_Clicked"/>
        </Grid>
    </StackLayout>
</ContentPage>

上述代码定义了用户界面，界面中包含一个 Label 控件、一个文本输入控件、两个按钮控件。其中两个按钮控件水平放置在了 Grid 中，并且给这两个按钮绑定了保存和删除事件。

Note：上述控件我将在后面进行详细讲解。

打开 MainPage.xaml.cs 文件，我们编写刚才给两个按钮绑定的两个事件，首先我们先编写保存事件 SaveButton_Clicked ，这个事件将会在保存按钮被点击的时候会将文本输入控件中的内容保存到本地文件中。

private void SaveButton_Clicked(object sender, EventArgs e)
{
    File.WriteAllText(filename,editor.Text);
}

接下来我们编写删除事件 DeleteButton_Clicked ，该方法会删除本地文件并清空文本输入控件中的内容。

private void DeleteButton_Clicked(object sender, EventArgs e)
{
    if (File.Exists(filename))
    {
        File.Delete(filename);
    }
    editor.Text = string.Empty;
}

在上述两段代码中我们一直在使用 filename 这个变量，下面我们就将这个变量定义出来。

string filename = Path.Combine(Environment.GetFolderPath(
    Environment.SpecialFolder.LocalApplicationData),"note.nt");
public MainPage()
{
    InitializeComponent();
    if(File.Exists(filename))
    {
        editor.Text = File.ReadAllText(filename);
    }
}

到这里我们已经将 Notes app 的基础代码编写完成，下面我们就运行一下这个 app 看一下效果。

我们填写要保存的内容然后单击保存按钮，我们所填写的内容将会被保存在本地文件 note.nt 中。当我们退出应用程序再次进入后，将会把保存在文件中的内容显示在文本输入控件中。我们点击删除按钮将删除文件并清空文本输入控件。