xamarin - 如何在 ScrollView 中显示 ListView 和其他控件？

Question

我想在 a 中显示 aListView和其他控件ScrollView。所有都绑定到一个ViewModel. 我的尝试失败了，因为不建议将 aListView放在ScrollView. 由于我使用ViewCell DataTemplate复杂Buttons的ListView.

希望有人可以向我展示 Xaml 或 CS 模式以实现我的目标。

请仅建议适用于 iOS 和 Android 的解决方案！

谢谢

埃里克

Answer 1

解决方案：

正如Rodrigo E建议的那样，我下载了最新的 Xamarin Evolve App 2016。在挖掘代码后，我调整/简化了解决方案中的FeedPage.xaml：

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:XamarinEvolve.Clients.UI;assembly=XamarinEvolve.Clients.UI"
xmlns:pull="clr-namespace:Refractored.XamForms.PullToRefresh;assembly=Refractored.XamForms.PullToRefresh"
x:Class="XamarinEvolve.Clients.UI.FeedPage"
x:Name="FeedPage"
Title="Evolve Feed"
Icon="tab_feed.png"
BackgroundColor="{DynamicResource WindowBackgroundTable}">

<pull:PullToRefreshLayout
    IsPullToRefreshEnabled="True"
    RefreshCommand="{Binding RefreshCommand}"
    IsRefreshing="{Binding IsBusy}">
    <local:AlwaysScrollView
        HorizontalOptions="FillAndExpand"
        VerticalOptions="FillAndExpand">
        <StackLayout>

            <StackLayout Spacing="0">
                <local:NonScrollableListView
                    x:Name="ListViewSessions"
                    ItemsSource="{Binding Sessions}">
                  <local:NonScrollableListView.RowHeight>
                    <OnPlatform x:TypeArguments="x:Int32" Android="50" iOS="50" WinPhone="50"/>
                  </local:NonScrollableListView.RowHeight>
                    <local:NonScrollableListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <Button Text="{Binding Title}" BackgroundColor="Black" TextColor="Green" />
                            </ViewCell>
                        </DataTemplate>
                    </local:NonScrollableListView.ItemTemplate>
                </local:NonScrollableListView>
            </StackLayout>

            <StackLayout Padding="0" Spacing="0" BackgroundColor="Green">
                <Button Text="OTHER" BackgroundColor="Blue" TextColor="White" />
                <Button Text="OTHER" BackgroundColor="Blue" TextColor="White" />
                <Button Text="OTHER" BackgroundColor="Blue" TextColor="White" />
                <Button Text="OTHER" BackgroundColor="Blue" TextColor="White" />
                <Button Text="OTHER" BackgroundColor="Blue" TextColor="White" />
                <Button Text="OTHER" BackgroundColor="Blue" TextColor="White" />
            </StackLayout>

        </StackLayout>
    </local:AlwaysScrollView>
</pull:PullToRefreshLayout>

有几件事要做：

1. 在FeedViewModel.cs中，我添加了该代码以进行快速测试：

      async Task ExecuteLoadSessionsCommandAsync()
   {
       if (LoadingSessions)
           return;
   
       LoadingSessions = true;
   
       try
       {
           NoSessions = false;
           Sessions.Clear();
           OnPropertyChanged("Sessions");
           #if DEBUG
           await Task.Delay(1000);
           #endif
           var sessions = await StoreManager.SessionStore.GetNextSessions();
   
           var testSessions = new List<Session>();
           testSessions.Add(new Session
           {
               Title = "TEST"
           });
   
           testSessions.Add(new Session
           {
               Title = "TEST"
           });
   
           testSessions.Add(new Session
           {
               Title = "TEST"
           });
   
   
           sessions = testSessions;
           if(sessions != null)
               Sessions.AddRange(sessions);
   
           NoSessions = Sessions.Count == 0;
       }
       catch(Exception ex)
       {
           ex.Data["method"] = "ExecuteLoadSessionsCommandAsync";
           Logger.Report(ex);
           NoSessions = true;
       }
       finally
       {
           LoadingSessions = false;
       }
   
   }
   

2. 您必须引用包 Refractored.XamForms.PullToRefresh 才能获得 Pull-to-Refresh 行为。这是在引用的命名空间中： xmlns:pull="clr-namespace:Refractored.XamForms.PullToRefresh;assembly=Refractored.XamForms.PullToRefresh"

3. 您必须将AlwaysScrollView、NonScrollableListView复制到您的 PCL 库中。引用它： xmlns:local="clr-namespace:"

4. 在您的 iOS 项目中添加该自定义 ListView 渲染器：

   公共类 NonScrollableListViewRenderer：ListViewRenderer {

   受保护的覆盖无效 OnElementChanged(ElementChangedEventArgs e) { base.OnElementChanged(e); if (Control != null) Control.ScrollEnabled = false;

   } }

   公共类 AlwaysScrollViewRenderer : ScrollViewRenderer { public static void Initialize() { var test = DateTime.UtcNow; } 受保护的覆盖无效 OnElementChanged(VisualElementChangedEventArgs e) { base.OnElementChanged(e); this.AlwaysBounceVertical = true; } }

见文件：渲染器

5. 将该 CollectionChanged 处理程序放在您的代码隐藏文件中：

   ViewModel.Sessions.CollectionChanged += (sender, e) => { var adjust = Device.OS != TargetPlatform.Android ? 1：-ViewModel.Sessions.Count + 1；ListViewSessions.HeightRequest = (ViewModel.Sessions.Count * ListViewSessions.RowHeight) - 调整；};

请参阅文件 FeedPage.cs.xaml：FeedPage.cs.xaml

Answer 2

这是 XAML 代码

<ScrollView Padding="2">
  <StackLayout HorizontalOptions="FillAndExpand">
    <Grid HorizontalOptions="FillAndExpand">
    <StackLayout>
    <ScrollView Orientation="Horizontal">
      <ListView BackgroundColor="Transparent" ItemsSource="{Binding UsersList}" SeparatorVisibility="None" x:Name="YourListView" RowHeight="50">
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
                <StackLayout  BackgroundColor="Transparent" Padding="5">
                    <Button Text="{Binding UserName}" WidthRequest="115" HorizontalOptions="FillAndExpand" TextColor="White" BackgroundColor="#4b76c4" FontAttributes="Bold" FontSize="20" FontFamily="Avenir Book"/>
                </StackLayout>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>
    </ScrollView>
    </StackLayout>
   </Grid>
  </StackLayout>
</ScrollView>

和 .cs 文件，您需要设置 BindingContext

 BindingContext = new YourViewModel();