代码之家 › 专栏 › 技术社区 › adinas

Xamarin-当ContentPage中有两个CollectionView时滚动

xamarin.forms xamarin

0

adinas · 技术社区 · 5 年前

在StackLayout中的ContentPage中有两个CollectionView,一个在另一个之上。每个绑定到一个单独的ItemsSource。在每一个上面我都有一个标签。在这一点上,每一个都占据了屏幕的50%,并分别滚动。

我希望所有内容都能滚动,就像是一个长长的列表。

所以我用滚动视图包围了一切。但是,根据你把手指放在哪里,卷轴可能会滚动整个页面(这就是我想要的),或者只滚动当前的CollectionView。

似乎无法取消CollectionView的滚动功能。这是真的吗?如果没有,我应该如何设置我的ContentPage?

在下面的示例中,两个CollectionView具有相同的模型和绑定,但实际上它们是不同的。

以下是xaml:

<RefreshView
        x:DataType="local:AllRestaurantsViewModel"
        Command="{Binding LoadItemsCommand}"
        IsRefreshing="{Binding IsBusy, Mode=TwoWay}">
        <ScrollView>
            <StackLayout>
                <Label
                    FontSize="Large"
                    HorizontalOptions="Center"
                    Text="Suggested Restaurants" />
                <CollectionView
                    x:Name="ItemsListView"
                    ItemsSource="{Binding SuggestedRestsComments}"
                    SelectionMode="None">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <StackLayout Padding="10" x:DataType="model:SuggestedRestsComment">
                                <Label
                                    FontSize="16"
                                    LineBreakMode="NoWrap"
                                    Style="{DynamicResource ListItemTextStyle}"
                                    Text="{Binding restaurantName}" />
                                <Label
                                    FontSize="13"
                                    LineBreakMode="NoWrap"
                                    Style="{DynamicResource ListItemDetailTextStyle}"
                                    Text="{Binding CityName}" />
                                <StackLayout.GestureRecognizers>
                                    <TapGestureRecognizer
                                        Command="{Binding Source={RelativeSource AncestorType={x:Type local:ItemsViewModel}}, Path=ItemTapped}"
                                        CommandParameter="{Binding .}"
                                        NumberOfTapsRequired="1" />
                                </StackLayout.GestureRecognizers>
                            </StackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>


                <Label
                    FontSize="Large"
                    HorizontalOptions="Center"
                    Text="Existing Restaurants" />


                <CollectionView
                    x:Name="ItemsListView2"
                    ItemsSource="{Binding SuggestedRestsComments}"
                    SelectionMode="None">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <StackLayout Padding="10" x:DataType="model:SuggestedRestsComment">
                                <Label
                                    FontSize="16"
                                    LineBreakMode="NoWrap"
                                    Style="{DynamicResource ListItemTextStyle}"
                                    Text="{Binding restaurantName}" />
                                <Label
                                    FontSize="13"
                                    LineBreakMode="NoWrap"
                                    Style="{DynamicResource ListItemDetailTextStyle}"
                                    Text="{Binding CityName}" />
                                <StackLayout.GestureRecognizers>
                                    <TapGestureRecognizer
                                        Command="{Binding Source={RelativeSource AncestorType={x:Type local:ItemsViewModel}}, Path=ItemTapped}"
                                        CommandParameter="{Binding .}"
                                        NumberOfTapsRequired="1" />
                                </StackLayout.GestureRecognizers>
                            </StackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </StackLayout>
        </ScrollView>
    </RefreshView>

0 回复 | 直到 5 年前

1

Junior Jiang 5 年前

你可以试试定制 CollectionViewRenderer 在每个平台上实现这一点。

例如,以以下形式发送mesage:

void OnButtonClicked(object sender, EventArgs e)
{
    MessagingCenter.Send<object>(this, "StopScrollinng");
}

然后进来 网间网操作系统 CustomCollectionViewRenderer 类停止滚动:

public class CustomCollectionViewRenderer: CollectionViewRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<GroupableItemsView> e)
    {
        base.OnElementChanged(e);

        MessagingCenter.Subscribe<object>(this, "StopScrollinng", (sender) =>
        {
            // Do something whenever the "StopScrollinng" message is received
            if (Control != null)
            {
                NSArray s = Control.ValueForKey(new NSString("_subviewCache")) as NSMutableArray;
                UICollectionView c = s.GetItem<UICollectionView>(0);
                c.SetContentOffset(c.ContentOffset, true);
            }
        });
    }
}

而且安卓 CustomCollectionViewRenderer

public class CustomCollectionViewRenderer: CollectionViewRenderer
{
    public CustomCollectionViewRenderer(Context context) : base(context)
    {
       
    }

    protected override void OnElementChanged(ElementChangedEventArgs<ItemsView> elementChangedEvent)
    {
        base.OnElementChanged(elementChangedEvent);
        MessagingCenter.Subscribe<object>(this, "StopScrollinng", (sender) =>
        {
            // Do something whenever the "StopScrollinng" message is received

            this.DispatchTouchEvent(MotionEvent.Obtain(SystemClock.UptimeMillis(), SystemClock.UptimeMillis(), MotionEventActions.Cancel, 0, 0, 0));
        });
    }
}

2

1

HarrySloth 5 年前

这个怎么样?

在scrollview中,设置InputTransparent=“True”允许输入通过下面的层。

<ScrollView InputTransparent="True">

然后在集合视图的右侧留下一些空白(背景)。

现在,当有人在空白处滑动时,整个页面会滚动。当有人在收藏视图中滑动时,收藏视图会滚动。