<?xml version="1.0" encoding="utf-8" ?> <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:App1;assembly=App1" xmlns:controls="clr-namespace:App1.controls" xmlns:custom="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions" x:Class="App1.MainPage"> <controls:Page1></controls:Page1> <controls:Page2></controls:Page2> <controls:Page3></controls:Page3> </TabbedPage>
在项目中新建一个TabbedPage或者选项卡式页,进入后,加入多个选项卡的Page,注意只能加入Page页面不能至加入控件
如果你要把MainPage修改为Tabbed类型的页面
要把这2个地方改为TabbedPage和TabbedPage的继承,然后你这个页面就变成了TabbedPage页面了
新建3个Page页面,在页面内部设置自己的icon和title,然后在Tabbed页面中加入对应的命名空间后,加入如下代码
<controls:Page1 Title="1" Icon="abc.jpb"></controls:Page1> <controls:Page2 Title="2" Icon="abc.jpb"></controls:Page2> <controls:Page3 Title="3" Icon="abc.jpb"></controls:Page3>
加入完成后就可以运行了,Tabbed控件对于每个平台的实现都是不同的,例如在Android端面板是在上面,在ios端在下面,这个如果要真正使用,需要自己实现
-------------------------------------------------------------------------------------------------------------------------------------------------------------------
鉴于xamarin.form的tabbed跨平台样式不一,所以要自定义一个自己的tabbed,我这里定义了一个乞丐版的tabbed,如果项目使用可以参考修改
<ContentPage.Content> <Grid RowSpacing="0" ColumnSpacing="0"> <Grid.RowDefinitions> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="1"></RowDefinition> <RowDefinition Height="Auto"></RowDefinition> </Grid.RowDefinitions> <ContentView> </ContentView> <BoxView Grid.Row="1" BackgroundColor="Red"></BoxView> <Grid Grid.Row="2" RowSpacing="0" ColumnSpacing="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"></ColumnDefinition> <ColumnDefinition Width="*"></ColumnDefinition> <ColumnDefinition Width="*"></ColumnDefinition> </Grid.ColumnDefinitions> <StackLayout Spacing="0"> <Image Source="{local:ImageResource App1.bd_logo1.png}"></Image> <Label Text="1111" HorizontalOptions="Center"></Label> <StackLayout.GestureRecognizers> <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer> </StackLayout.GestureRecognizers> </StackLayout> <StackLayout Grid.Column="1" Spacing="0"> <Image Source="{local:ImageResource App1.bd_logo1.png}"></Image> <Label Text="1111" HorizontalOptions="Center"></Label> <StackLayout.GestureRecognizers> <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer> </StackLayout.GestureRecognizers> </StackLayout> <StackLayout Grid.Column="2" Spacing="0"> <Image Source="{local:ImageResource App1.bd_logo1.png}"></Image> <Label Text="1111" HorizontalOptions="Center"></Label> <StackLayout.GestureRecognizers> <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer> </StackLayout.GestureRecognizers> </StackLayout> </Grid> </Grid> </ContentPage.Content>
其中重点是添加点击事件,设备一共有3种手势操作,点,捏,拖,这里只用到了点,以下代码是绑定StackLayout的点事件
<StackLayout.GestureRecognizers> <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer> </StackLayout.GestureRecognizers>
原文地址:https://www.cnblogs.com/jiecaoge/p/10034491.html
时间: 2024-10-09 18:23:21