如何在 Xamarin.Forms 中制作带有十字图标而不是返回按钮的页面？

Question

发现我太新了，无法在 Xamarin 社区论坛中提问，希望能从这里得到一些想法。提前致谢。

当我浏览某些应用程序时，某些页面如下所示：

所以对于这种页面，它有一个“十字”图标而不是左箭头，当我点击十字图标，或者在这个页面上操作后点击保存按钮时，页面从顶部淡出到底部。

对于普通的导航页面，它有返回按钮并且通常从左到右淡出。

那么一般什么时候使用这种页面呢？它仍然是导航页面吗？是否可以使用 Xamarin.Forms 实现此目的？任何教程或学习示例？

Answer 1

模态页面可以实现，建议使用Rotorgames Plugins PopUp

通过 Label 或 ImageButton 添加 X 图标到弹出页面的左上角。

如果您使用标签添加 TapGestureRecognizer 否则使用按钮按下事件并关闭弹出窗口，如下所示

await Rg.Plugins.Popup.Contracts.INavigation.Instance.PopAsync()

对于从上到下的淡入淡出，您可以在此 nuget 中使用 Animations。

他们在 github 中有样品，您可以自己看看。

Answer 2

“页面从上到下淡出”听起来像模态页面。

使用TitleView

模式页面：

<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XFormPlayground.CustomPushModelPage">
<NavigationPage.TitleView>
    <Grid>

        <Label
            Text="Add Timesheet"
            FontSize="Title"
            HorizontalOptions="Center"
            VerticalOptions="CenterAndExpand" />
        <Button
            Text="X"
            Command="{Binding PushModelCommand}"
            BackgroundColor="Transparent"
            WidthRequest="40"
            HorizontalOptions="Start" />

    </Grid>

</NavigationPage.TitleView>
<ContentPage.Content>
    <StackLayout>
        <Label
            Text="This is a modal page"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage.Content>

将 ModelPage 包裹在 Navivation 中以便 TitleView 显示，可选的也可以设置栏的颜色。

 [DesignTimeVisible(false)]
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void ViewModelPageButton_OnClicked(object sender, EventArgs e)
    {
        Navigation.PushModalAsync(new NavigationPage(new CustomPushModelPage())
        {
            //Set toolbar color here
            BarBackgroundColor = Color.FromHex("FFFFFF") //White colors
        });
    }
}

主页xaml:

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

<StackLayout>
    <!--  Place new controls here  -->
    <Button
        x:Name="ViewModelPageButton"
        Clicked="ViewModelPageButton_OnClicked"
        VerticalOptions="Center"
        Text="Click" />
</StackLayout>

结果：

如何在 Xamarin.Forms 中制作带有十字图标而不是返回按钮的页面？

How to make a page with cross icon rather than go back button in Xamarin.Forms?

xamarin.ios

xamarin.android

xamarin

xamarin.forms