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

Xamarin:向同一页上的多个集合视图添加多个绑定

xamarin xaml c#

bziggy · 技术社区 · 4 年前

我目前正在尝试在Xamarin的同一个页面上构建两个独立的集合视图。我不断得到的错误,内容设置了多次,而且我已经设置了内容绑定多次。如何向同一页上的两个独立集合视图添加不同的绑定?

ConsumerOrders.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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:viewmodels="clr-namespace:Shared.ViewModel"
             mc:Ignorable="d"
             x:Class="Shared.consumerOrders">

    <ContentPage.BindingContext>
        <viewmodels:AddedServicesViewModel />
    </ContentPage.BindingContext>

    <d:ContentPage.BindingContext>
        <viewmodels:PastOrderViewModel />
    </d:ContentPage.BindingContext>

    <ScrollView>

        <CollectionView ItemsSource="{Binding  ViewAddedServices}">
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical"/>
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="4"/>
                            <!--0-->
                            <RowDefinition Height="30"/>
                            <!--1-->
                            <RowDefinition Height="20"/>
                            <!--2-->
                            <RowDefinition Height=".25"/>
                            <!--3-->
                            <RowDefinition Height="4"/>
                            <!--4-->
                            <RowDefinition Height="Auto"/>
                            <!--5-->
                            <RowDefinition Height="Auto"/>
                            <!--6-->
                            <RowDefinition Height=".25"/>
                            <!--7-->
                            <RowDefinition Height="Auto"/>
                            <!--8-->
                            <RowDefinition Height="Auto"/>
                            <!--9-->
                            <RowDefinition Height=".25"/>
                            <!--10-->
                            <RowDefinition Height="Auto"/>
                            <!--11-->

                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="4"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="4"/>
                        </Grid.ColumnDefinitions>
                        <Label Text="Services added" FontAttributes="Bold" TextColor="#F65506" Grid.Row="6" Grid.Column="1" Grid.ColumnSpan="2" VerticalTextAlignment="End" HorizontalTextAlignment="Start" FontSize="18"/>
                        <Label Grid.Column="1" Grid.Row="7" BackgroundColor="#707070" Grid.ColumnSpan="3"/>
                        <!--This is a line-->
                        <BoxView BackgroundColor="#F0F0F0" Grid.Row="9" Grid.Column="1" Grid.ColumnSpan="3" CornerRadius="22"/>
                        <Label Grid.Column="1" Grid.Row="9" Padding="10" TextColor="Black" FontSize="18" Text="{Binding BusinessName}" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Grid.ColumnSpan="2"/>
                        <Label Grid.Column="3" Grid.Row="9" Padding="0,0,20,0" TextColor="#F65506" FontAttributes="Bold" FontSize="18" Text="View" VerticalOptions="CenterAndExpand" HorizontalOptions="EndAndExpand" Grid.ColumnSpan="2"/>

                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>




        <CollectionView ItemsSource="{Binding  ViewQuoteStatus}">
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical"/>
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="4"/>
                            <!--0-->
                            <RowDefinition Height="30"/>
                            <!--1-->
                            <RowDefinition Height="20"/>
                            <!--2-->
                            <RowDefinition Height=".25"/>
                            <!--3-->
                            <RowDefinition Height="4"/>
                            <!--4-->
                            <RowDefinition Height="Auto"/>
                            <!--5-->
                            <RowDefinition Height="Auto"/>
                            <!--6-->
                            <RowDefinition Height=".25"/>
                            <!--7-->
                            <RowDefinition Height="Auto"/>
                            <!--8-->
                            <RowDefinition Height="Auto"/>
                            <!--9-->
                            <RowDefinition Height=".25"/>
                            <!--10-->
                            <RowDefinition Height="Auto"/>
                            <!--11-->

                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="4"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="4"/>
                        </Grid.ColumnDefinitions>
                        <Label Text="Past Orderrs" FontAttributes="Bold" TextColor="#F65506" Grid.Row="6" Grid.Column="1" Grid.ColumnSpan="2" VerticalTextAlignment="End" HorizontalTextAlignment="Start" FontSize="18"/>
                        <Label Grid.Column="1" Grid.Row="7" BackgroundColor="#707070" Grid.ColumnSpan="3"/>
                        <!--This is a line-->
                        <BoxView BackgroundColor="#F0F0F0" Grid.Row="9" Grid.Column="1" Grid.ColumnSpan="3" CornerRadius="22"/>
                        <Label Grid.Column="1" Grid.Row="9" Padding="10" TextColor="Black" FontSize="18" Text="{Binding BusinessName}" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Grid.ColumnSpan="2"/>
                        <Label Grid.Column="3" Grid.Row="9" Padding="0,0,20,0" TextColor="#F65506" FontAttributes="Bold" FontSize="18" Text="View" VerticalOptions="CenterAndExpand" HorizontalOptions="EndAndExpand" Grid.ColumnSpan="2"/>

                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </ScrollView>
</ContentPage>

using Shared.Models;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Text;

namespace Shared.ViewModel
{
    class AddedServicesViewModel
    {
        readonly IList<AddedServiceStatus> source;

        public ObservableCollection<AddedServiceStatus> ViewAddedServices { get; private set; }


        public AddedServicesViewModel()
        {
            source = new List<AddedServiceStatus>();
            CreateAddedServicesCollection();

        }

        void CreateAddedServicesCollection()
        {
            source.Add(new AddedServiceStatus
            {
                BusinessName = "Duck's Duct Cleaning"

            });

            source.Add(new AddedServiceStatus
            {
                BusinessName = "Rodney's Home Repair"

            });




            ViewAddedServices = new ObservableCollection<AddedServiceStatus>(source);
        }
    }
}

using Shared.Models;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Text;

namespace Shared.ViewModel
{
    class PastOrderViewModel
    {

        readonly IList<PastOrderStatus> source;

        public ObservableCollection<PastOrderStatus> ViewPastOrders { get; private set; }


        public PastOrderViewModel()
        {
            source = new List<PastOrderStatus>();
            CreatePastOrderCollection();

        }

        void CreatePastOrderCollection()
        {
            source.Add(new PastOrderStatus
            {
                BusinessName = "Karen's Magnificent Dog Grooming"

            });

            source.Add(new PastOrderStatus
            {
                BusinessName = "Harry's In Home Haircuts"

            });

            source.Add(new PastOrderStatus
            {
                BusinessName = "Shelly's Floral Arrangements"

            });




            ViewPastOrders = new ObservableCollection<PastOrderStatus>(source);
        }
    }
}

0 回复 | 直到 4 年前

Leo Zhu 4 年前

你也可以绑定一个 ViewModel CollectionView

比如:

<CollectionView ItemsSource="{Binding  ViewAddedServices}">
    <CollectionView.BindingContext>
      <viewmodels:AddedServicesViewModel/>
    </CollectionView.BindingContext>
     ...
</CollectionView>

<CollectionView ItemsSource="{Binding  ViewPastOrders}">
    <CollectionView.BindingContext>
      <viewmodels:PastOrderViewModel/>
    </CollectionView.BindingContext>
      ...
</CollectionView>

jjchiw 4 年前

你不能有两个 ViewModels

我看到 DataTemplate 在两个集合中都是相同的。。。。。重构有很多方法。。。。

你可以创造两个 CustomView 一个有 AddedServicesViewModel 另一个是 PastOrderViewModel
可以将两个ViewModels合并为一个,然后创建 自定义视图 这是收藏。

另一件事,我看到它不能工作是,你不能有一个以上 View 嵌套在 ScrollView

<ScrollView>
   <StackLayout> /* Or any other Layout, Grid, Absolute, Flex etc...  */
   </StackLayout>
</ScrollView>

另一件事是 CollectionView 也许它不会像你期望的那样,因为 集合视图 Scroll

两个 CollectionViews 垂直方向相同 Height ,我会这样做

<Grid>
  <Grid.RowDefinitions>
      <RowDefinition Height="1*"/>
      <RowDefinition Height="1*"/>
  </Grid.RowDefinitions>
  <CollectionView Grid.Row="0" ItemsSource="{Binding  ViewQuoteStatus}"> ... </CollectionView>
  <CollectionView Grid.Row="1" ItemsSource="{Binding  ViewAddedServices}"> ... </CollectionView>
</Grid>

或者创建自定义视图(自定义控件)

<Grid>
  <Grid.RowDefinitions>
      <RowDefinition Height="1*"/>
      <RowDefinition Height="1*"/>
  </Grid.RowDefinitions>
  <MyCustomCollectionView Grid.Row="0" ItemsSource="{Binding  ViewQuoteStatus}"> ... </MyCustomCollectionView>
  <MyCustomCollectionView Grid.Row="1" ItemsSource="{Binding  ViewAddedServices}"> ... </MyCustomCollectionView>
</Grid>