XAML for VS2019之跨平台APP入门基础

程序员文章站 2022-06-22 18:47:52

第一章：HelloWord一、基础知识：1、主程序前台文件：App.xaml2、主程序后台文件：App.xaml.cs3、主程序入口方法：App()4、主程序入口主页面：MainPage主程序前台文件：

第一章：HelloWord
一、基础知识：1、主程序前台文件：App.xaml
2、主程序后台文件：App.xaml.cs
3、主程序入口方法：App()
4、主程序入口主页面：MainPage
主程序前台文件：

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App4.App">
    <Application.Resources>

    </Application.Resources>
</Application>

主程序后台文件

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

namespace App4
{
    public partial class App : Application
    {
        public App()
        {
          InitializeComponent();
          MainPage = new ContentPage
           {
                Content = new Label
               {
                    Text = "您好!",
                   FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
                   VerticalOptions = LayoutOptions.CenterAndExpand,
                   HorizontalOptions = LayoutOptions.CenterAndExpand,
                },
           };
    }
}

第二章：布局
一、内容视图：ContentView，只能放一个控件

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

        <Grid.RowDefinitions>

            <RowDefinition Height="*">


            </RowDefinition>


        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>


            <ColumnDefinition Width="*">

            </ColumnDefinition>
        </Grid.ColumnDefinitions>
        <BoxView Color="Red" Grid.Row="0" Grid.Column="0"></BoxView>
        <BoxView Color="Blue" Grid.Row="0" Grid.Column="1"></BoxView>
        <BoxView Color="Yellow" Grid.Row="1" Grid.Column="0"></BoxView>
        <BoxView Color="Green" Grid.Row="1" Grid.Column="1"></BoxView>
    </Grid>

</ContentPage>

二、框架：Frame
Frame被称为框架，是最简单的一种布局方式，它被定制为屏幕上的一个空白备用区域，之后开发者可以在其中填充一个单一元素，属性Padding默认为20，四个角带弧度。

<?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="App4.MainPage">
   <Frame>
      <Image x:Name="Myimage">
      </Image>
   </Frame>
</ContentPage>

三、滚动视图：ScrollView
ScrollView滚动视图，用于显示多于一个屏幕的内容，超出屏幕范围的内容可以通过滚动查看。

<?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="App4.MainPage">
   <ScrollView>
      <Label>
        世界你好
      </Label>
   </ScrollView>
</ContentPage>

四、堆栈布局：StackLayout
StackLayout堆栈布局，非常常用的布局方式，可以极大的简化跨平台用户界面的搭建，堆栈布局的子元素按照添加到界面中的顺序一个接一个的摆放，XF中堆栈布局分为两种：垂直布局和水平布局。

<?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="App4.MainPage">
   <StackLayout VericalOptions="Center" Orientation="Horizontal">
      <Label TextColor="Red">第一个标签</Label>
      <Label TextColor="Black">第二个标签</Label>
      <Label TextColor="Yellow">第三个标签</Label>
   </StackLayout>
</ContentPage>

五、相对布局：RelativeLayout
RelativeLayout相对布局，可以将其理解成以某一个元素为参照物来定位的布局方式，根据参照物不同，相对布局可以分为两种：一种是相对于父元素的布局，一种是控件之间的相对布局。

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

namespace App4
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
            //相对于父控件的布局
            RelativeLayout rl = new RelativeLayout();
            rl.Children.Add(new BoxView { Color = Color.Accent, WidthRequest = 150, HeightRequest = 150, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.CenterAndExpand }, Constraint.Constant(0), Constraint.Constant(0));
            rl.Children.Add(new BoxView { Color = Color.Red, WidthRequest = 150, HeightRequest = 150, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.CenterAndExpand }, Constraint.RelativeToParent(Parent => { return Parent.Width - 150; }), Constraint.Constant(0));
            rl.Children.Add(new BoxView { Color = Color.Blue, WidthRequest = 150, HeightRequest = 150, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.CenterAndExpand }, Constraint.Constant(0),Constraint.RelativeToParent(Parent => { return Parent.Height - 150; }));
            rl.Children.Add(new BoxView { Color = Color.Yellow, WidthRequest = 150, HeightRequest = 150, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.CenterAndExpand }, Constraint.RelativeToParent(Parent => { return Parent.Width - 150; }), Constraint.RelativeToParent(Parent => { return Parent.Height - 150; }));
            //相对于父窗口控件的布局
            RelativeLayout rl = new RelativeLayout();
            rl.Children.Add(new BoxView { Color = Color.Accent, WidthRequest = 150, HeightRequest = 150, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.CenterAndExpand }, Constraint.RelativeToParent(Parent=> { return Parent.Width / 2-75; }), Constraint.RelativeToParent(Parent => { return Parent.Height / 2-75; }));
            //相对于控件的布局
            Label lb = new Label { Text = "这是一个方块", FontSize=50,};
            BoxView bv = new BoxView { Color = Color.Accent, WidthRequest = 150, HeightRequest = 150, };
            RelativeLayout rl = new RelativeLayout();
            rl.Children.Add(bv, Constraint.RelativeToParent(Parent => { return Parent.Width / 2 - 75; }), Constraint.RelativeToParent(Parent => { return Parent.Height / 2 - 75; }));
            rl.Children.Add(lb, Constraint.RelativeToView(bv,(Parent,sibling) => { return sibling.X-sibling.Width; }), Constraint.RelativeToView(bv, (Parent, sibling) => { return sibling.Y-Device.GetNamedSize(NamedSize.Large,typeof(Label)); }));
            MainPage = new ContentPage
            {
                Content = rl,
            };
        }
    }
}

六、绝对布局：AbsoluteLayout

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

namespace App4
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
              //绝对布局
            var green = new Label {Text="Green Color",FontSize=20,TextColor=Color.Black,BackgroundColor=Color.Green,WidthRequest=200,HeightRequest=50 };
            var pink = new Label { Text = "Pick Color", FontSize = 20, TextColor = Color.Black, BackgroundColor = Color.Pink, WidthRequest = 200, HeightRequest = 200 };
            var yellow= new Label { Text = "Yellow Color", FontSize = 20, TextColor = Color.Black, BackgroundColor = Color.Yellow, WidthRequest =100, HeightRequest = 50 };
            AbsoluteLayout rl = new AbsoluteLayout();
            rl.Children.Add(green,new Point(50,100));
            rl.Children.Add(pink, new Point(80, 150));
            rl.Children.Add(yellow, new Point(100, 370));
            MainPage = new ContentPage
            {
                Content = rl,
            };
        }
    }
}

七、网格布局：Grid
Grid网格布局，最*的布局方式，开发者可以在网格中指定网格数，还可以设置行、列之间的分割线，网格中可以实现跨行、跨列，相当于WebForm中的Table布局。

<?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="App5.MainPage">
   <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*">
            </RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*">
            </ColumnDefinition>
        </Grid.ColumnDefinitions>
        <BoxView Color="Red" Grid.Row="0" Grid.Column="0"></BoxView>
        <BoxView Color="Blue" Grid.Row="0" Grid.Column="1"></BoxView>
        <BoxView Color="Yellow" Grid.Row="1" Grid.Column="0"></BoxView>
        <BoxView Color="Green" Grid.Row="1" Grid.Column="1"></BoxView>
    </Grid>
</ContentPage>

第三章：页面
一、内容页面：ContentPage
二、导航页面：NavigationPage
用来管理页面之间的导航和页面堆栈的页面，会在IOS和ANDROID屏幕的顶部添加导航条，除了显示当前标题外，还有一个返回按钮，windows phone的外观和内容页面没有什么区别，点击windows phone下方的上一步按钮，会返回到调用页面。

前台文件

<?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="App5.MainPage">
     <StackLayout>
        <Button Text="打开新页面" HeightRequest="100" Clicked="Button_Clicked">
        </Button>
    </StackLayout>

</ContentPage>

后台文件

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace App5
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
        private void Button_Clicked(object sender,EventArgs e)
        {
            Navigation.PushAsync(new MainPage());
        }
        
    }
}

主程序调用方法：

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

namespace App5
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
            MainPage =new NavigationPage(new MainPage());//重要，不加new NavigationPage会出错
        }
    }
}

三、主从页面：MasterDetailPage
用来管理Master和Detail页面的页面，一般用在新闻类应用中，阅读新闻时，一开始只有一个标题，当点击标题后才会有详细部分。
创建MasterDetailPage.xaml文件，系统会生成四个文件：
MasterDetailPage1.xaml
MasterDetailPage1Detail.xaml
MasterDetailPage1Master.xaml
MasterDetailPage1MasterMenuItem.cs
在MasterDetailPage1.xaml 文件中文件头加上：MasterBehavior=“Popover”，意思是在手机端运行

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App6.MasterDetailPage1" MasterBehavior="Popover"//重要
             xmlns:pages="clr-namespace:App6">
  <MasterDetailPage.Master>
    <pages:MasterDetailPage1Master x:Name="MasterPage" />
  </MasterDetailPage.Master>
  <MasterDetailPage.Detail>
    <NavigationPage>
      <x:Arguments>
        <pages:MasterDetailPage1Detail />
      </x:Arguments>
    </NavigationPage>
  </MasterDetailPage.Detail>
</MasterDetailPage>

四、标签页面：TabbedPage
TabbedPage被称为标签页面，可以在切换屏幕的情况下，通过Tab进行子页面的导航，它是在三个平台中显示出来效果差别最大的一种页面，IOS的Tab在下方，ANDROID的在上方，windows phone的是在pivot。

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App6.TabbedPage1">
  <!--Pages can be added as references or inline-->
    <ContentPage Title="Tab 1">
        <ContentPage.Content>
            <BoxView Color="Red">
                
            </BoxView>
        </ContentPage.Content>
    </ContentPage>



    <ContentPage Title="Tab 2">
        <ContentPage.Content>
            <BoxView Color="Green">

            </BoxView>
        </ContentPage.Content>
    </ContentPage>
    <ContentPage Title="Tab 3">
        <ContentPage.Content>
            <BoxView Color="Yellow">

            </BoxView>
        </ContentPage.Content>
    </ContentPage>
</TabbedPage>

五、滑动页面：CarouselPage（已取消）
第四章：通用界面元素（通用控件）
一、显示图像：
1、显示本地图像
开发者在开发应用时，经常会使用到网络的图像资源，这样可以大大减少应用程序安装包的大小，显示网络图像首先需要使用到ImageSource的FromUri()静态方法获得一个图像来源，然后需要使用Image的Source属性对图像控件的来源进行设置，即对图像控件显示的地址内容进行设置，从而实现对图像的显示。

2、显示网络图像
Image控件除了可以显示网络图像外，还可以显示本地图像，在三个平台的应用程序中显示本地图像时需要分为两种:一种是显示相同的图像，另一种是显示不相同的图像。显示相同的图像可以使用ImageSource的FromResource()方法显示不相同的图像使用ImageSource的FromFile()方法，注意此方法在Android环境下运行不成功！原因等查！

二、定制显示的图像
1、缩放图像：Scale
2、设置图像的缩放模式：Aspect:分为三种：FIll、AspectFill、AspectFit。
Fill：图像全部显示，但是会导致图像变形
AspectFill:裁剪图像使其填满显示区域
AspectFit：保证图像比例不变，且全部显示在显示区域中，会有部分空白。
3、旋转图像：Rotation
前台文件：在前端创建一个图像控件

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

    <Image x:Name="myimage">

    </Image>

</ContentPage>

后台文件：在后端设置图像属性

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace App9
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            //显示网络图像：
            //第一种方法：
            //myimage.Source = ImageSource.FromUri(new Uri("https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"));
            //第二种方法：
            //myimage.Source = "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png";

            //显示本地图像
            //一、显示相同图像（即IOS、Android、windows phone都显示一个图像）
            //myimage.Source = ImageSource.FromResource("App9.images.bd.png");
            
            //二、显示不相同的图像（即IOS、Android、windows phone分别显示不同的图像）
            //在uwf上运行成功！在android模拟器上运行不成功
            //myimage.Source = ImageSource.FromFile("bd1.png");
            
           //根据不同平台显示不同的图像，包含了缩放、填充、旋转的方法
           switch(Device.RuntimePlatform)
            {
                case "Android":
                    {
                        myimage.Source = ImageSource.FromResource("App9.images.android.jpg");
                        //myimage.Scale = 1.5;//图像放大1.5倍
                        //myimage.Aspect = Aspect.AspectFill;//裁剪图像使其填满显示区域
                        //myimage.Aspect = Aspect.Fill;//图像全部显示，但是会导致图像变形
                        //myimage.Aspect = Aspect.AspectFit;//保证图像比例不变且全部显示在显示区域中，会有部分空白
                        myimage.Rotation = 45;//旋转45度
                        break;
                    }
                case "iOS":
                    {
                        myimage.Source = ImageSource.FromResource("App9.images.ios.jpg");
                        break;
                    }
                case "UWP":
                    {
                        myimage.Source = ImageSource.FromResource("App9.images.uwp.jpg");
                        break;
                    }
                case "macOS":
                    {
                        myimage.Source = ImageSource.FromResource("App9.images.macos.jpg");
                        break;
                    }
                case "GTK":
                    {
                        myimage.Source = ImageSource.FromResource("App9.images.gtk.jpg");
                        break;
                    }
                case "Tizen":
                    {
                        myimage.Source = ImageSource.FromResource("App9.images.tizen.jpg");
                        break;
                    }
                case "WPF":
                    {
                        myimage.Source = ImageSource.FromResource("App9.images.wpf.jpg");
                        break;
                    }

                    
            }
        }
    }
}

三、显示彩色的矩形方块
BoxView用来绘制一个具有颜色的矩形块，可以用在内置的图像或者自定义控件中，BoxVIew默认尺寸：40X40，可以使用VisualElement中的WidthRequest属性和HeightRequest。Xamarin.Forms中跨平台的颜色类Color提供了多种建立色彩实例的方法：Named Colors,FromHex,FromHsla,FromRgb,FromRgba,FromUint。

前台文件：可以直接在前端设置颜色

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

    <BoxView x:Name="mybv" Color="Red" WidthRequest="150" HeightRequest="150" HorizontalOptions="Center" VerticalOptions="Center">
        
    </BoxView>
</ContentPage>

后台文件：也可以通过后台对前端的控件设置颜色

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace App11
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            mybv.Color = Color.Red;//后台设置颜色
            mybv.Color = Color.FromRgb(255, 255, 0);//后台设置颜色
        }
    }
}

四、标签控件和文本框控件
Label用来在应用程序中显示少量的文本信息，它是一个只读的文本控件，其常用属性：
Font：设置或获取标签的字体
FontAttributes：设置或获取标签是否为粗体、斜体或两者都不是
FontSize:设置或获取标签字体大小
HorizontalTextAlignment:设置或获取水平对齐方式
LineBreakMode:设置或获取内容显示的格式
Text:获取或设置文本
TextColor:获取或设置文本颜色
VerticalTextAlignment:获取或设置垂直对齐方式
XAlign:设置或获取水平对齐方式线束标签内的文本
YAlign:设置或获取垂直对齐方式约束标签内的文本

Entry控件：输入文本
Entry是一种常见的单行读写文本控件，简单说就是输入控件，最常用的莫过于登陆界面中的输入用户名和密码功能。
常用的属性：
IsPassword:设置并获取文本框中的文本是否为密码形式
Plactholder:设置并获取文本框的占位符，输入前的提示文本内容
PlaceHolderColor:设置并获取文本框的点位符颜色
Text:设置并获取文本框的文本
TextColor:设置并获取文本框中的文本颜色
常用方法：
Completed事件：用户完成输入或者按下return键后触发
TextChanged事件：在文本框中的文本发生变化时触发

前台文件：

<?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="App11.MainPage">
    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Label x:Name="mylb" Text="我是一个标签"></Label>
        <Entry x:Name="myey" Placeholder="请输入内容" PlaceholderColor="Red" IsPassword="True" WidthRequest="150"></Entry>
    </StackLayout>
    
</ContentPage>

后台文件：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace App11
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            myey.Completed += (s, e) => { mylb.Text=((Entry)s).Text; };
            myey.TextChanged += (s, e) => { mylb.Text = ((Entry)s).Text; };
        }
    }
}

五、文本框视图Editor与键盘
文本视图Editor和文本框一样，也是输入控件，但它可以让用户输入多行，其属性与方法和文本框几乎相同，相当于WebForm中的MemoEidt控件。
键盘：
轻捭文本框或者文本视图后，弹出的就是键盘（或是虚拟键盘），它呆以实现用户输入，我们可以制定键盘类型，当要输入联系人电话号码时，键盘就应该变为数字键盘，要输入英文时键盘应该变为英文键盘，需要指定键盘的类型时，需要使用Keyboard属性，它是InputView类的属性。
键盘类型：
Default：默认键盘
Chat：可以用于短信和表情
Email：输入邮件地址的使用
Numeric：输入数字时使用。
Telephone：输入电话号码时使用
Url：输入文件客户擦头网址时使用
我们还可以制定额外的键盘选项，拼写检查、大小写、单词补全等，此时需要使用Keyboard类的Create()方法，此方法接受一个KeyboardFlags枚举，此枚举存放的就是键盘的额外选项，CapitalizeSentence：句子的第一个单词首字母大写。
Spellcheck：拼写检查。
Suggestions：单词补全
All：提供所有额外功能

键盘的用法：前台的写法,注意Keyboard。

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

    <StackLayout>
        <Editor  x:Name="myeditor"  Keyboard="Default"  ></Editor>
    </StackLayout>

</ContentPage>

后台的写法：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace App12
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            myeditor.Keyboard = Keyboard.Numeric;//重要
        }
    }
}

六、按钮控件
Button控件大家都很熟悉了，设置其外观：
BorderColor:设置或获取边框的颜色
BorderRadius:设置或获取圆角
BorderWidth:设置或获取边框宽度
ImageSource:设置或获取显示的图像，作为按钮的显示内容
Text:设置或获取按钮显示的文本
TextColor:设置或获取按钮的文本颜色
Button交互：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="App13.MainPage">

    <StackLayout>
        <--注意：在试验过程中，前台对ImageSource属性的设置，直接引用文件名，但是要将图片放在App13.Android.Resource.drawable中才可以的哦！否则不显示图片，如：<Button x:Name="mybt" Text="点击我" ImageSource="bd.png"></Button>，后台设置见下面的代码 -->
        <Button x:Name="mybt" Text="点击我" VerticalOptions="Center" HorizontalOptions="Center" WidthRequest="150" CornerRadius="20" HeightRequest="50" Clicked="mybt_Clicked">
        </Button>
    </StackLayout>

</ContentPage>

后台文件：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

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

        private void mybt_Clicked(object sender, EventArgs e)
        {
           Button bt=((Button)sender);
            bt.WidthRequest = 200;
            bt.HeightRequest = 231;
            bt.ImageSource = ImageSource.FromResource("App13.bd.png");
           

        }
    }
}

七、开关控件
Switch开关控件常用来控制某个功能的开关状态，如蓝牙、GPS、WiFi信号等，Switch属性IsToggled用来设置或获取开关的状态，Toggled事件用来实现开关控件的交互，此事件在开关事件被触发时调用。
前台文件：

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

    <StackLayout x:Name="st">
       
        <Switch x:Name="mysw" Toggled="mysw_Toggled">
        </Switch>
    </StackLayout>

</ContentPage>

后台文件：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

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

       

        private void mysw_Toggled(object sender, ToggledEventArgs e)
        {
            if(mysw.IsToggled)
            {
                st.BackgroundColor = Color.Red;
            }
            else
            {
                st.BackgroundColor = Color.Yellow;
            }
        }
    }
}

八、滑块控件
Slider滑块控件可以从一个连续的区间中选择一个值，例如：可以用来控制设备的当前音量、亮度等等，开发者使用Slider控件的3个属性来对slider进行设置。

前台文件：

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

    <StackLayout x:Name="st">
        <Label x:Name="mylbl"></Label>
        <Slider x:Name="sd" Maximum="100" Minimum="0" Value="0" ValueChanged="sd_ValueChanged"></Slider>
    </StackLayout>

</ContentPage>

后台文件：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

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

      

        private void sd_ValueChanged(object sender, ValueChangedEventArgs e)
        {
            var sl = (Slider)sender;
            mylbl.Text = sl.Value.ToString();
        }
    }
}

九、步进控件
Stepper步进控件是一个用来输入数字的控件，它类似于开关控件，但它有“+”和“-”两个按钮，这两个按钮共同控制同一个Value的增减，Stepper常用属性如下：
Increment：设置或获取步进制件的步长
Maximun：设置或获取步进控件的最大边界值
Mininum：设置或获取步进控件的最小边界值
Value：设置或获取步进控件的当前值
Stepper的交互通过其事件，ValueChanged来实现，此事件在步进控件当前的值发生改变时触发。

后台文件：

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

    <StackLayout x:Name="st">
        <Label x:Name="mylbl"></Label>
        <Stepper x:Name="sd" Maximum="100" Minimum="0" Value="50" Increment="1" ValueChanged="sd_ValueChanged"></Stepper>
    </StackLayout>

</ContentPage>

前台文件：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

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

      

        private void sd_ValueChanged(object sender, ValueChangedEventArgs e)
        {
            var sl = (Stepper)sender;
            mylbl.Text = sl.Value.ToString();
        }
    }
}

本文地址：https://blog.csdn.net/hmwz0001/article/details/110240180