跳到主要内容

Xamarin的基本控件及常见用法

· 阅读需 6 分钟
Skyone
Skyone
科技爱好者

Xamarin 是一个开放源代码平台，用于通过 .NET 构建适用于 iOS、Android 和 Windows 的新式高性能应用程序。本文记录了Xamarin框架的基本控件，并给出了相关例子。

提示

2023.01更新：咳，这玩意现在用的人少了，国内用的就更少了，至少我是不推荐再学了。搞跨平台还是Qt、React Native或者Flutter。有选择权的话，试试 渐进式 Web 应用(Progressive Web Apps, WPA) 也不错嘛。

一一介绍​

一些通用的属性​

Margin 边距​

简而言之，就是设置控件距左上右下的边距，注意，不是HTML里的上右下左！

VerticalTextAlignment & HorizontalTextAlignment 垂直/水平居中​

意思很明显，就是定义控件的文本的对齐方式，有 Center , Strat , End 三个选项，分别对应：居中、左对齐、右对齐。

FontSize 字体大小​

不多说，设置文本字体的大小

以Label控件为例​

<Label Margin="8"
       VerticalTextAlignment="center"
       HorizontalTextAlignmant="Center"
       FontSize="24"
       Text="Apple"
       x:Name="AppleLabel"/>

表示一个上下左右边距均为8，垂直/水平居中，字体24号，显示文本"Apple"，名称为"AppleLabel"的Label控件。

提示

加个浏览器窗口是因为图和背景颜色边界不明显，实际运行没有哈。

另外，左上角的黑条条是调试的时候用的，实际运行不会显示。

http://localhost:3000
运行结果-01

Label 文本框​

最简单的控件，用于显示文本，常见属性有：

<Label Text="显示的文本"
       VerticalTextAlignment="center"
       TextColor="Red"
       x:Name="AppleLabel"
       FontSize="24"/>
http://localhost:3000
运行结果-02

Button 按钮​

按钮，按了就可以除非指定事件，比如：

<Button x:Name="MyPopupButton"
        Text="Click me!"
        Margin="8"
        Clicked="MyPopupButton_Clicked"/>

配合如下代码：

<?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="Blog.MainPage">

    <StackLayout>
        <Label Text="显示的文本"
               VerticalTextAlignment="center"
               TextColor="Red"
               x:Name="AppleLabel"
               FontSize="24"/>
        <Button x:Name="MyPopupButton"
                Text="Click me!"
                Margin="8"
                Clicked="MyPopupButton_Clicked"/>
    </StackLayout>

</ContentPage>
using System;
using Xamarin.Forms;

namespace Blog
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void MyPopupButton_Clicked(object sender, EventArgs e)
        {
            AppleLabel.Text = "Apple";
        }
    }
}

效果：

http://localhost:3000
运行结果-03

Grid 表​

一般用于排版，可以把其他控件放入其中，常见用法：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition width="Auto"/>
        <ColumnDefinition width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition width="Auto"/>
        <ColumnDefinition width="Auto"/>
        <ColumnDefinition width="Auto"/>
    </Grid.ColumnDefinitions>

    <!-- Something others -->
</Grid>

这个示例创建了一个3行2列的表，示例在本文末尾

ScrollView 滚动视图​

顾名思义，就是鼠标滚轮可以控制的可滚动视图

<ScrollView HeightRequest="150"/>

最好要定义它的高度

用Label实现的超链接​

通过附加属性使Label可点击，并添加下划线

<?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="Blog.MainPage">
    <Grid>
        <Label Grid.Row="4"
               Grid.Column="1"
               Text="Click me!"
               x:Name="ClickMeButton"
               Margin="8"
               TextDecorations="Underline">
            <Label.GestureRecognizers>
                <TapGestureRecognizer Tapped="ClickMeHyperlinkButton_Tapped"/>
            </Label.GestureRecognizers>
        </Label>
    </Grid>
</ContentPage>

配合C#代码：

using System;
using Xamarin.Essentials;
using Xamarin.Forms;

namespace HelloWorld
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
		//注意要异步打开
        private async void ClickMeHyperlinkButton_Tapped(object sender,
                                                         EventArgs e)
        {
            await Browser.OpenAsync("https://www.bilibili.com");
        }
    }
}

Switch 开关​

没什么好说的

<Switch Margin="8"/>

Entry 输入框​

同样没什么可说的

<Entry Margin="4"/>

完整的例子​

<?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="Blog.MainPage">

    <StackLayout>
        <ScrollView>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <Label Text="Grid:"
                       Grid.Row="0"/>

                <Grid Grid.Row="0"
                      Grid.Column="1"
                      Margin="8">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="2*"/>
                        <ColumnDefinition Width="3*"/>
                        <ColumnDefinition Width="1*"/>
                    </Grid.ColumnDefinitions>
                    <Label Text="hello 1234 5678"
                           Margin="4"
                           FontSize="24"
                           Grid.ColumnSpan="3"/>
                    <Label Text="用户名:"
                           Grid.Row="1"
                           Grid.Column="0"
                           VerticalTextAlignment="Center"/>
                    <Entry Grid.Row="1"
                           Grid.Column="1"
                           Margin="4"/>
                    <Button Text="确定"
                            Grid.Row="2"
                            Grid.Column="1"
                            Margin="4"/>
                </Grid>

                <Label Text="StackLayout:"
                       Grid.Row="1"
                       Grid.Column="0"/>

                <StackLayout Orientation="Horizontal"
                             Grid.Row="1"
                             Grid.Column="1"
                             Margin="8"
                             Spacing="0">
                    <BoxView Color="Blue"
                             WidthRequest="50"
                             HeightRequest="50" />
                    <StackLayout Orientation="Vertical"
                                 Spacing="0">
                        <BoxView Color="Red"
                                 WidthRequest="50"
                                 HeightRequest="25" />
                        <BoxView Color="Yellow"
                                 WidthRequest="50"
                                 HeightRequest="25" />
                    </StackLayout>
                </StackLayout>

                <Label Text="ScrollViewr:"
                       Grid.Row="2"
                       Grid.Column="0"/>

                <ScrollView Grid.Row="2"
                            Grid.Column="1"
                            HeightRequest="150">
                    <StackLayout>
                        <Label Text="123" />
                        <Label Text="123" />
                        <Label Text="123" />
                        <Label Text="123" />
                        <Label Text="123" />
                        <Label Text="123" />
                        <Label Text="123" />
                        <Label Text="123" />
                        <Label Text="123" />
                        <Label Text="123" />
                        <Label Text="123" />
                        <Label Text="123" />
                    </StackLayout>
                </ScrollView>

                <Label Grid.Row="4"
                       Grid.Column="0"
                       Text="超链接"/>

                <Label Grid.Row="4"
                       Grid.Column="1"
                       Text="Click me!"
                       x:Name="ClickMeButton"
                       Margin="8"
                       TextDecorations="Underline">
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer Tapped="ClickMeHyperlinkButton_Tapped"/>
                    </Label.GestureRecognizers>
                </Label>

                <Label Grid.Row="5"
                       Grid.Column="0"
                       Text="弹窗:"/>

                <Button x:Name="MyPopupButton"
                        Text="Click me!"
                        Grid.Row="5"
                        Grid.Column="1"
                        Margin="8"
                        Clicked="MyPopupButton_Clicked"/>

                <Label Grid.Row="6"
                       Grid.Column="0"
                       Text="开关:"/>

                <Switch Grid.Row="6"
                        Grid.Column="1"
                        Margin="8"/>

                <Label Text="滑块"
                       Grid.Row="7"
                       Grid.Column="0"/>

                <StackLayout Orientation="Horizontal"
                             Grid.Row="7"
                             Grid.Column="1"
                             Margin="8">
                    <Slider x:Name="MySlider"
                            WidthRequest="200"
                            Maximum="100"
                            Minimum="0"
                            HorizontalOptions="Start"/>
                    <Label Text="{Binding Value, Source={x:Reference MySlider}}"
                           FontSize="24"
                           Margin="4,0,0,0"/>
                </StackLayout>
            </Grid>
        </ScrollView>
    </StackLayout>

</ContentPage>
using System;
using Xamarin.Essentials;
using Xamarin.Forms;

namespace Blog
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void MyPopupButton_Clicked(object sender, EventArgs e)
        {
            DisplayAlert("提示", "这是一个简单的弹窗", "确定");
        }

        private async void ClickMeHyperlinkButton_Tapped(object sender, EventArgs e)
        {
            await Browser.OpenAsync("https://www.bilibili.com");
        }
    }
}
http://localhost:3000
运行结果-04