Xamarin 使用StackLayout时如何显示要显示在页面外的标签

我有一个向左滑动的手势，我希望标签看起来像是从屏幕上滑下的

如何用xamarin形式实现这一点？

例如，在下图中，选择的项目是“检查伦敦-巴黎的列车时刻表”

---

选择项目后，文本将显示在屏幕外。我想实现相同的

创建一个包含两列的可爱网格

编辑此网格将位于水平滚动视图中。这就是让“走出屏幕”成为可能的原因。 现在，如果您想禁止用户手动滚动您的ScrollView，请使用自定义渲染器。但是，如果您希望用户能够左右滑动控件，则不需要这样做，这样它的行为相当自然。因此，在下面的XAML代码中，您只需使用

ScrollView

而不是

controls:DisabledScrollView

第一列是您在屏幕上看到的内容。 第二列是隐藏在屏幕之外的内容。 第一列宽度=屏幕大小。在代码中定义，因为它可以在屏幕旋转时动态更改。 第二列宽度-随意。在你的情况下，它很小，只有这个垃圾桶图标。 我在网格的OnSize changed事件中管理它，从XAML调用的

OnSizeChanged_TitleBarMain

：

            cNavBarSlider.ColumnDefinitions.Clear();    
            cNavBarSlider.ColumnDefinitions.Add(
                new ColumnDefinition { Width = new GridLength(ScreenWidth, GridUnitType.Absolute) }
                );
            cNavBarSlider.ColumnDefinitions.Add(
                new ColumnDefinition { Width = new GridLength(ScreenWidth - popupSearchOffset, GridUnitType.Absolute) }
            );

            //reposition scroll if needed (on screen rotation)
            if (IsPopupSearchVisible)
            {
                await cNavBarSlider.TranslateTo(-ScreenWidth + popupSearchOffset, 0, 0, null);
            }

用TranslateTo将这张桌子左右滑动，在我的例子中，它是：

await cNavBarSlider.TranslateTo(-cTitleBarMain.Width + popupSearchOffset, 0, PopupOptionsTimeIn, Easing.CubicInOut);

IconSearch和Cancel热点（使用热点，我希望更大的区域响应触摸，而不是用户尝试点击一些小图标或小词）调用相同的方法：

private bool _tapped;
    //-------------------------------------------------------------
    private async void OnTapped_SearchIcon(object sender, EventArgs e)
    //-------------------------------------------------------------
    {
        if (_tapped) return;
        _tapped = true;
        if (!IsPopupSearchVisible) await PopupSearchShow();
        else await PopupSearchHide();
        _tapped = false;
    }
//-------------------------------------------------------------------
public async Task PopupSearchShow()
//-------------------------------------------------------------------
{
    await PopupSearchInit();
    await cNavBarSlider.TranslateTo(-cTitleBarMain.Width + popupSearchOffset, 0, PopupOptionsTimeIn, Easing.CubicInOut);
    IsPopupSearchVisible = true;
    ControlSearchEntry.Focus();
}
//-------------------------------------------------------------------
public async Task PopupSearchHide(bool animate = true)
//-------------------------------------------------------------------
{
    uint d = PopupOptionsTimeOut;
    if (!animate) d = 0;
    await cNavBarSlider.TranslateTo(0, 0, d, Easing.CubicInOut);
    IsPopupSearchVisible = false;
}

要使用的XAML方案：

        <!--  SWIPE CONTAINER  -->
        <controls:DisabledScrollView Orientation="Horizontal" VerticalOptions="FillAndExpand">
            <Grid
                x:Name="cNavBarSlider"
                ColumnSpacing="0"
                HorizontalOptions="Fill">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <!--  this in on screen, going to swipe -->
                <Grid
                    x:Name="cTitleBarMain"
                    Grid.Column="0"
                    SizeChanged="OnSizeChanged_TitleBarMain">
                    <!--  put ur stuff here  -->
                </Grid>

                <StackLayout
                    x:Name="cTitleBarSearch"
                    Grid.Column="1"
                    Orientation="Horizontal">
                    <!-- your hidden content to appear put here --!>
                <StackLayout>

            </Grid>
        </controls:DisabledScrollView>

---

你好，尼克，这看起来很有希望-你知道是否可以使用xaml标记吗？那你的巴曼呢？我也很好奇你是怎么回到正常状态的？“取消”按钮的作用是什么？它是否只显示第一列？正如您所看到的，CTITLEBARMAN只是按代码滑动。。。编辑了上面的帖子，使其更加清晰。我的坏这个页面使用了一个禁用的滚动视图，我会尽快编辑上面的帖子。相信还有很多其他的解决方案，特别是使用绝对布局，这只是其中之一。非常感谢提供这个示例。我在这方面遇到了问题。也许问题是这在ViewCell中不起作用？我基本上复制了上面的大部分代码，但它似乎没有按预期工作。只是显示了我在发布xaml后添加的图像，以便我们可以提供帮助

    <ListView
        x:Name="MainList"
        ItemsSource="{Binding Items}"
        BackgroundColor="{StaticResource ColorListView}"
        HasUnevenRows="False"
        RowHeight="40"
        HorizontalOptions="FillAndExpand"
        IsVisible="{Binding IsOffline, Converter={StaticResource not}}"
        ItemSelected="MainList_OnItemSelected"
        RefreshCommand="{Binding ForceRefreshCommand}">
        <ListView.SeparatorColor>
            <OnPlatform
                x:TypeArguments="Color"
                WinPhone="{StaticResource ListSeparator}"
                iOS="{StaticResource ListSeparator}" />
        </ListView.SeparatorColor>

        <ListView.ItemTemplate>
            <DataTemplate>

                <appoMobi:CellJessica/>

            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

<?xml version="1.0" encoding="utf-8" ?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppoMobi.CellJessica"
      x:Name="MyViewCell">
    <!--  SWIPE CONTAINER  -->
    <StackLayout SizeChanged="OnSizeChanged_TitleBarMain" x:Name="cCell" HorizontalOptions="FillAndExpand">

        <ScrollView x:Name="scrollView" 
                        Orientation="Horizontal" 
                        VerticalOptions="FillAndExpand">
            <Grid x:Name="cNavBarSlider"
                      ColumnSpacing="0"
                      HorizontalOptions="Fill">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <!--  this in on screen, going to swipe -->
                <Grid 
                    x:Name="cTitleBarMain"
                    Grid.Column="0">
                    <!--  put ur stuff here  -->
                    <Label x:Name="txtLabel" TextColor="Black" />
                </Grid>

                <StackLayout
                    x:Name="cTitleBarSearch"
                    Grid.Column="1"
                    Orientation="Horizontal">
                    <Image Source="cake" HeightRequest="35" WidthRequest="35"   VerticalOptions="Center" HorizontalOptions="Start" />
                </StackLayout>

            </Grid>
        </ScrollView>

    </StackLayout>
</ViewCell>

   public partial class CellJessica
    {
        public CellJessica()
        {
            InitializeComponent();
        }
        //-------------------------------------------------------------
        protected override void OnBindingContextChanged()
        //-------------------------------------------------------------
        {
            SetupCell();
            base.OnBindingContextChanged();
        }

        private bool first_setup = true;
        //-------------------------------------------------------------
        public void SetupCell()
        //-------------------------------------------------------------
        {

            var item = BindingContext as CSalonListItemEx;
            if (item == null) return;


            txtLabel.Text = item.Name;

        }
        private bool _titlebar_changingsize = false;

        private double popupSearchOffset = 0;
        //-------------------------------------------------------------------
        private async void OnSizeChanged_TitleBarMain(object sender, EventArgs e)
            //-------------------------------------------------------------------
        {
            if (_titlebar_changingsize) return;
            _titlebar_changingsize = true;

            cNavBarSlider.ColumnDefinitions.Clear();
            cNavBarSlider.ColumnDefinitions.Add(
                new ColumnDefinition { Width = new GridLength(cCell.Width, GridUnitType.Absolute) }
            );
            cNavBarSlider.ColumnDefinitions.Add(
            //new ColumnDefinition { Width = new GridLength(cCell.Width - popupSearchOffset, GridUnitType.Absolute) }
                new ColumnDefinition { Width = new GridLength(40, GridUnitType.Absolute) }
            );

            //todo
            //reposition scroll if rotated when hidden barea is shown
            //if (IsPopupSearchVisible)
            //{
            //    await cNavBarSlider.TranslateTo(-cCell.Width + 40, 0, 0, null);
            //}

            _titlebar_changingsize = false;
        }
    }