Question

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

如何用xamarin形式实现这一目标？

例如，在下图中，所选项目为＆＃34;检查列车时刻表伦敦 - 巴黎＆＃34;

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

Answer 1

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

编辑此网格将位于水平滚动视图内。这就是让诡计走出屏幕的原因。现在，如果要禁止用户手动滚动ScrollView，请使用自定义渲染器。但是，如果您希望用户能够左右滑动控件，则不需要这样做，然后它会自然地起作用。因此，在下面的XAML代码中，您只需使用ScrollView代替controls:DisabledScrollView。

第一列是您在屏幕上的内容。第二列是隐藏在屏幕外面的内容。第一个col宽度= ScreenSize。在代码中定义，因为它可以在屏幕旋转时动态更改。第二列宽度 - 随意。在你的情况下，它只是这个TrashCan图标很小。我在网格的OnSize更改事件中管理它，从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>

修改

这是你在列表中的代码（Android模拟器）注意你可以实现滑动以限制滚动坐标，使其粘到边界：

列表视图：

<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>

Cell XAML：

<?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">  <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>  <Grid x:Name="cTitleBarMain" Grid.Column="0">  <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; } }

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

1 个答案: