时间戳

首页 > 解决方案 > Xamarin Forms 在 CollectionView 中设置特定值

c# - Xamarin Forms 在 CollectionView 中设置特定值

问题描述

我有个问题。我创建了一个 CollectionView，其中包含一个带有图像的列表。myImage 类如下所示：

public class myImage
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
    public string Type { get; set; }
    [XmlIgnore]
    public ImageSource imageSource { get; set; }
}

现在在 CollectionView 中，我还有一个带有大小列表的选择器。该类如下所示：

public class Format
{
    public int Id { get; set; }
    public string Size{ get; set; }
    public float Price { get; set; }
    public string Type { get; set; }
}

我想要的是，当 myImage.Type 具有特定值（例如“type1”）时，选择器中的唯一选项将是 Size where Format.Type="type1"。其余的，除了 Format where 之外，整个 List 都可以显示在选择器中Format.Type = "type1"。

所以我想要一个带有图像的 CollectionView，在图像旁边有一个选择器。如果 myImage.Type="type1" 选择器将填充 Type="type1" 的格式。图像的其余部分获取 Format.Type="Normal" 的格式。

这是我的xml：

<DataTemplate>
    <Grid HeightRequest="100" VerticalOptions="Center">
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="40"/>
            <RowDefinition Height="10"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="3"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="3"/>
        </Grid.ColumnDefinitions>

        <ff:CachedImage  Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" Aspect="AspectFill" Source="{Binding imageSource}" />

        <Picker Grid.Row="0" Grid.RowSpan="2" Grid.Column="3" Title="Formaat" HorizontalOptions="FillAndExpand"
                ItemsSource="{Binding Source={RelativeSource AncestorType={x:Type vm:VM_FotoLijst}}, Path=formaatList}"
                ItemDisplayBinding="{Binding Size}" PropertyChanged="FormaatPicker_PropertyChanged"/>
    </Grid>
</DataTemplate>

我怎样才能做到这一点？

标签： c#xamarinxamarin.formsxamarin.androidxamarin.ios

解决方案

我会根据您的类型的值使用两个不同的项目模板。在这些模板中的每一个中，您都可以将选择器的 itemsource 指向单个源。

自定义DataTemplateSelector将允许您根据项目的属性切换项目的 DataTemplate。以下自定义 DataTemplateSelector 代码应该适用于您的用例。我还添加了一些 XAML，概述了如何定义要在其之间切换的两个数据模板。最后有一个示例，说明如何在 CollectionView 上设置此数据模板选择器。

代码

public class ImageTemplateSelector : DataTemplateSelector
{
    public DataTemplate NormalTemplate { get; set; }
    public DataTemplate SpecialTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        if (item is null) return NormalTemplate;

        if (item is myImage image)
        {
            if (image.Type == "type1")
                return SpecialTemplate;
            else
                return NormalTemplate;
        }
        else
            throw new ArgumentException(nameof(ImageTemplateSelector));
    }
}

XAML

<ResourceDictionary>
    <DataTemplate x:Key="normalImageTemplate">
        <!--all the image related controls-->
        <Picker ItemsSource="{Binding NormalPickerSource}"/>
    </DataTemplate>

    <DataTemplate x:Key="specialImageTemplate">
        <!--all the image related controls-->
        <Picker ItemsSource="{Binding SpecialPickerSource}"/>
    </DataTemplate>

    <local:ImageTemplateSelector x:Key="imageTemplateSelector"
        NormalTemplate="{StaticResource normalImageTemplate}"
        SpecialTemplate="{StaticResource specialImageTemplate}" />
</ResourceDictionary>

<CollectionView ItemSource="{Binding YourItems}"
                ItemTemplate="{StaticResource imageTemplateSelector}">
</CollectionView>

推荐阅读