Xamarin 中的 ListView 备用行颜色

Question

在我的 Xamarin 应用程序中，我使用 foreach 循环来获取可用凭据的 name 和 value，然后使用 ListView 在屏幕上打印。

例如

名称 1
值 1

名称 2
价值 2

它工作正常。我现在想要的是改变 Name (_attributes.Add(item.Name.ToString());) 的样式。

例如

姓名 1
价值

名字 2
价值

View.xml

<ListView
    SeparatorVisibility="None"
    BackgroundColor="#FFFFFF"
    ItemsSource="{Binding Attributes}"
    HasUnevenRows="true">

    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Label
                    Text="{Binding .}" 
                    TextColor="#000000"
                    FontSize="18"
                    Padding="10" >
                </Label>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

ViewModel.cs

foreach (var item in _credential.CredentialAttributesValues)
{
    _attributes.Add(item.Name.ToString());
    _attributes.Add(item.Value.ToString());
}

private ObservableCollection<string> _attributes = new ObservableCollection<string>();
public ObservableCollection<string> Attributes
{
    get
    {
        return _attributes;
    }
    set
    {
        this.RaiseAndSetIfChanged(ref _attributes, value);
    }
}

更新

<ViewCell>
    <StackLayout>
        <Label
        Text="{Binding Name}" 
        TextColor="#000000"
        FontSize="18"
        Padding="10"
        Margin="10,0,0,0">
        </Label>

        <Label
        Text="{Binding Value}" 
        TextColor="#000000"
        FontSize="18"
        Padding="10"
        Margin="10,0,0,0">
        </Label>
    </StackLayout>
</ViewCell>

private ObservableCollection<CredentialPreviewAttribute> _attributes = new ObservableCollection<CredentialPreviewAttribute>();
public ObservableCollection<CredentialPreviewAttribute> Attributes
{
    get
    {
        return _attributes;
    }
    set
    {
        this.RaiseAndSetIfChanged(ref _attributes, value);
    }
}

Answer 1

由于您使用了字符串数据类型，因此很难理解集合中的哪个字符串将是名称，但是如果您想根据索引给出样式，您可以点击以下链接：

https://blog.verslu.is/stackoverflow-answers/alternate-row-color-listview/

或

假设您有名为 Credential 的模型

public class Credential
{
    public string Name { get; set; }
    public string Value { get; set; }
}

在你的 ViewModel 中

private ObservableCollection<Credential> _attributes = new ObservableCollection<Credential>();
public ObservableCollection<Credential> Attributes
{
   get
   {
       return _attributes;
   }    
   set
   {
       this.RaiseAndSetIfChanged(ref _attributes, value);
   }
}

在 .xaml 中

<ListView
    SeparatorVisibility="None"
    BackgroundColor="#FFFFFF"
    ItemsSource="{Binding Attributes}"
    HasUnevenRows="true">

    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout>
                    <Label
                        Text="{Binding Name}" 
                        TextColor="#000000"
                        Style="[Whatever you want...]"
                        FontSize="18"
                        Padding="10" >
                    </Label>
                    <Label
                        Text="{Binding Value}" 
                        TextColor="#000000"
                        FontSize="18"
                        Padding="10" >
                    </Label>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

您还可以使用单个标签来实现问题中请求的视图要求。

<Label>
   <Label.FormattedText>
      <FormattedString>
         <Span Text="{Binding Name}" TextColor="Black" />
         <Span Text="&#10;" />
         <Span Text="{Binding Value}" TextColor="Gray" />
      </FormattedString>
   </Label.FormattedText>
</Label>

Answer 2

View.xml

<ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell>
            <Label
                Text="{Binding .}" 
                TextColor="#000000"
                Style="{StaticResource LabelStyle}"
                FontSize="18"
                Padding="10" >
            </Label>
        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>

Style.xaml

<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms" 
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="NameProject.Style.GeneralStyle">

<Style TargetType="Label" x:Key="LabelStyle1">
    <Setter Property="Padding">
        <Setter.Value>
            <OnIdiom x:TypeArguments="Thickness" Phone="10" Tablet="50"/>
        </Setter.Value>
    </Setter>
    <Setter Property="FontSize">
        <Setter.Value>
            <OnIdiom x:TypeArguments="x:Double" Phone="18" Tablet="24"/>
        </Setter.Value>
    </Setter>
    <Setter Property="TextColor" Value="red"/>
</Style>

<Style TargetType="Label" x:Key="LabelStyle2">
    <Setter Property="Padding">
        <Setter.Value>
            <OnIdiom x:TypeArguments="Thickness" Phone="12" Tablet="50"/>
        </Setter.Value>
    </Setter>
    <Setter Property="FontSize">
        <Setter.Value>
            <OnIdiom x:TypeArguments="x:Double" Phone="20" Tablet="24"/>
        </Setter.Value>
    </Setter>
    <Setter Property="TextColor" Value="Blue"/>
</Style>

</ResourceDictionary>

Style.cs

public static General SharedInstance { get; } = new General();

App.cs

dictionary.MergedDictionaries.Add(Style.General.SharedInstance);