前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >3. 单页App

3. 单页App

作者头像
喵叔
发布2020-09-08 17:14:14
1.2K0
发布2020-09-08 17:14:14
举报
文章被收录于专栏:喵叔's 专栏

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

代码语言:javascript
复制
<?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 ,这个事件将会在保存按钮被点击的时候会将文本输入控件中的内容保存到本地文件中。

代码语言:javascript
复制
private void SaveButton_Clicked(object sender, EventArgs e)
{
    File.WriteAllText(filename,editor.Text);
}

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

代码语言:javascript
复制
private void DeleteButton_Clicked(object sender, EventArgs e)
{
    if (File.Exists(filename))
    {
        File.Delete(filename);
    }
    editor.Text = string.Empty;
}

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

代码语言:javascript
复制
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 中。当我们退出应用程序再次进入后,将会把保存在文件中的内容显示在文本输入控件中。我们点击删除按钮将删除文件并清空文本输入控件。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/04/25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档