如何显示内容查看标签页的标签

Posted 2023-03-31

【中文标题】如何显示内容查看标签页的标签

【英文标题】：How to display content View over the tabs of tabbed page

【发布时间】：2021-03-12 11:08:21

【问题描述】：

我正在处理一个有 4 个标签的标签页。在第二个选项卡中，我有一个显示名称列表。我创建了一个内容视图以将其显示为弹出窗口并将其添加到我的第二个选项卡中。

问题是弹出窗口（内容视图）没有从顶部显示。它显示在选项卡下方。即使我尝试使用布局选项作为开始和展开位置也是一样的。

我必须从顶部（导航栏下方的选项卡上方）显示它，有人可以帮我解决这个问题吗？

编辑： 弹出式设计

调用弹窗：这是标签页的子页面

【问题讨论】：

你是如何创建弹出窗口的？怎么称呼？一些相关的代码会有所帮助。

嗨@Andrew，我已经更新了代码，请你看一遍。

看看RG Plugins Popups。它会为你处理弹出页面的展示。

用导航栏覆盖标签，如modal page?您的选项卡是否在 MainPage 中定义？

没有@Shaw，这些选项卡没有在主页上定义。让我们来看一下，我为 MainPage 提供了视图 1，单击视图 1 上的某个按钮，将出现视图 2。该视图 2 是一个选项卡式页面，我在其中提供了三个其他视图作为子视图，并在其中一个子视图中添加了一个弹出窗口。

【参考方案1】：

问题是弹出窗口（内容视图）没有从顶部显示。

从Rg.plugins.popup文档，可以custom animations如下： https://github.com/rotorgames/Rg.Plugins.Popup/wiki/Animations#custom-animations

创建 UserAnimation 类：

 class UserAnimation : MoveAnimation

    private double _defaultTranslationY;

    public UserAnimation()
    
        DurationIn = DurationOut = 300;
        EasingIn = Easing.SinOut;
        EasingOut = Easing.SinIn;
        PositionIn = MoveAnimationOptions.Top;
        PositionOut = MoveAnimationOptions.Top;
    

    public override void Preparing(View content, PopupPage page)
    
        base.Preparing(content, page);
        page.IsVisible = false;
        if (content == null) return;
        _defaultTranslationY = content.TranslationY;

    

    public override void Disposing(View content, PopupPage page)
    
        base.Disposing(content, page);
        page.IsVisible = true;
        if (content == null) return;
        content.TranslationY = _defaultTranslationY;

    

    public async override Task Appearing(View content, PopupPage page)
    
        var taskList = new List<Task>();
        taskList.Add(base.Appearing(content, page));
        if (content != null)
        
            //top
            var topOffset = GetTopOffset(content, page);
            content.TranslationY = -topOffset;

            taskList.Add(content.TranslateTo(content.TranslationX, _defaultTranslationY, DurationIn, EasingIn));

        ;

        page.IsVisible = true;
        await Task.WhenAll(taskList);
    

    public async override Task Disappearing(View content, PopupPage page)
    
        var taskList = new List<Task>();
        taskList.Add(base.Disappearing(content, page));
        if (content != null)
        
            //top
            _defaultTranslationY = content.TranslationX;

            var topOffset = -GetTopOffset(content, page);

            taskList.Add(content.TranslateTo(content.TranslationX, topOffset, DurationOut, EasingOut));

        ;

        await Task.WhenAll(taskList);
    

用法：

  <pages:PopupPage.Animation>
    <animations:UserAnimation  />
</pages:PopupPage.Animation>

截图：

【讨论】：

谢谢@Wendy Zang - MSFT，这太棒了，但这不是我想要的。但我会尝试它是否以任何方式满足我的要求。

您可以尝试这种方式的弹出窗口。如果您对此有任何问题，请随时告诉我。