点击TabbedPage的SfTabItem时导航到ContentPage的实现方法
SfTabView指定Tab项点击跳转实现方案
你不需要给标题为Déconnecter的SfTabItem设置Content内容,直接通过Tab的选中事件拦截点击动作,执行跳转即可,具体操作如下:
- 修改XAML代码,给SfTabView绑定选中事件,不需要给最后一个Tab项加内容:
<!-- 新增SelectionChanged事件绑定,给控件加x:Name方便后台调用 --> <tabView:SfTabView x:Name="RootTabView" OverflowMode="DropDown" VisibleHeaderCount="3" EnableSwiping="True" BackgroundColor="#583068" SelectionChanged="RootTabView_SelectionChanged"> <tabView:SfTabView.SelectionIndicatorSettings> <tabView:SelectionIndicatorSettings Color="{DynamicResource PrimaryColor}" Position="Bottom" AnimationDuration="500" StrokeThickness="2"/> </tabView:SfTabView.SelectionIndicatorSettings> <tabView:SfTabItem Title="Self Training" TitleFontColor="{DynamicResource PrimaryColor}" SelectionColor="{DynamicResource PrimaryColor}" > <tabView:SfTabItem.Content> <mynamespace:Self_Trainig/> </tabView:SfTabItem.Content> </tabView:SfTabItem> <tabView:SfTabItem Title="Programmes" TitleFontColor="{DynamicResource PrimaryColor}" SelectionColor="{DynamicResource PrimaryColor}"> <tabView:SfTabItem.Content> <mynamespace:Self_Trainig/> </tabView:SfTabItem.Content> </tabView:SfTabItem> <!-- 退出项无需设置Content --> <tabView:SfTabItem Title="Déconnecter" /> </tabView:SfTabView>
- 在对应页面的.xaml.cs后台代码中实现事件逻辑,拦截到点击最后一个Tab时,先重置选中项到正常Tab,再执行导航:
private void RootTabView_SelectionChanged(object sender, Syncfusion.XForms.TabView.SelectionChangedEventArgs e) { // 前两个Tab索引为0、1,第三个Déconnecter索引为2 if (e.Index == 2) { // 立刻切回第一个Tab,避免出现空白内容页 RootTabView.SelectedIndex = 0; // 执行导航逻辑,根据你的需求选对应的方法: // 要返回根主页面就用下面这行 Navigation.PopToRootAsync(); // 要跳转到新的主页面就替换成 Navigation.PushAsync(new 你的主页面类()); // 退出登录需要清缓存、清Token的逻辑也可以写在这里 } }
- 如果你用MVVM模式开发,不想写后台事件,直接给SfTabView的
SelectedIndex绑定ViewModel中的属性,当属性值被赋值为2时,在set逻辑中触发导航命令,再把属性值改回0即可,逻辑和上面的事件处理完全一致。 - 因为你开了
EnableSwiping="True",上述逻辑也会自动拦截滑动切到退出Tab的操作,不需要额外加处理,用户滑动到最后一个Tab时也会直接触发跳转、切回正常Tab,交互和点击普通按钮完全一致。
内容的提问来源于stack exchange,提问作者Gazdallah Amira
相关产品推荐
相关产品推荐

