Xamarin Forms 将标签文本绑定到字典的值

Question

我有问题。我正在尝试将我的标签绑定到我的字典的值，所以我会在字典中获得一个标签 foreach 值。现在这是我的代码：

<ScrollView x:Name="categoryScrollView" HeightRequest="40" Orientation="Horizontal"
        VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never" HorizontalOptions="FillAndExpand">
    <Frame CornerRadius="20" BackgroundColor="Black" BorderColor="DarkGray" HeightRequest="40">
        <Label Text="{Binding categoryCollection[Value]}" FontSize="18" HorizontalTextAlignment="Center" 
                                VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" TextColor="White" x:Name="txtCategory" />
    </Frame>
</ScrollView>

如您所见，categoryCollection 是我的字典。

这是视图模型：

private Dictionary<int, string> _categoryCollection;
public Dictionary<int, string> categoryCollection
{
    get
    {
        return _categoryCollection;
    }
    set
    {
        if (_categoryCollection != value)
        {
            _categoryCollection = value;
            OnPropertyChanged();
        }
    }
}

但运行应用程序后，没有显示任何文字！？

我做错了什么？

Answer 1

所以我会在字典中得到一个标签 foreach 值。

也许您可以使用代码从字典中获取每个值，如下所示：

Dictionary<int, string> dict = new Dictionary<int, string>(){{1,"One"},{2, "Two"},{3,"Three"}}; 

for (int i = 0; i < dict.Count; i++)
{
    Console.WriteLine("Key: {0}, Value: {1}", dict.Keys.ElementAt(i), dict[ dict.Keys.ElementAt(i)]);
}

但是这不能直接显示在Label 或ScrollView 中。

我建议使用ListView来显示循环列表，ObservableCollection<Model>可以作为ItemSource用于ListView，这样就很容易在listview的每个单元格中显示了。

你可以创建一个Model类：

public class Employee
{
    public int DisplayID {get; set;}
    public string DisplayName {get; set;}
}

然后在ViewModel中可以设置样本数据：

ObservableCollection<Employee> employees = new ObservableCollection<Employee>();
public ObservableCollection<Employee> Employees { get { return employees; }}

public ViewModel()
{
    // is set and the UI will react to changes
    employees.Add(new Employee{ DisplayID = 1 , DisplayName="Rob Finnerty"});
    employees.Add(new Employee{ DisplayID = 2 , DisplayName="Bill Wrestler"});
    employees.Add(new Employee{ DisplayID = 3 , DisplayName="Dr. Geri-Beth Hooper"});
    employees.Add(new Employee{ DisplayID = 4 , DisplayName="Dr. Keith Joyce-Purdy"});
    employees.Add(new Employee{ DisplayID = 5 , DisplayName="Sheri Spruce"});
    employees.Add(new Employee{ DisplayID = 6 , DisplayName="Burt Indybrick"});
}

现在在 Xaml 中，在 ContentPage 中添加 ListView ：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:constants="clr-namespace:XamarinFormsSample;assembly=XamarinFormsXamlSample"
             x:Class="XamarinFormsXamlSample.Views.EmployeeListPage"
             Title="Employee List">
  <ListView x:Name="EmployeeView"
            ItemsSource="{Binding Employees}">
    <ListView.ItemTemplate>
      <DataTemplate>
        <TextCell Text="{Binding DisplayName}" />
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</ContentPage>

不要忘记在ContenPage.cs中绑定ItemSource：

public MainPage()
{
    ViewModel viewmodel = new ViewModel();
    EmployeeView.ItemsSource = viewmodel.employees ;
}

这里可以考虑ViewModel，因为Dictionary，employees包含每个单元格中的Key-Value数据。此外，您可以在Employee中添加更多属性，然后您的单元格将显示更多样式.关于列表视图中的custom data，您可以查看此文档以了解更多信息。

==================================更新============== ======================

如果需要横向列表视图，可以使用CollectionView实现如下：

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
       <DataTemplate>
           ...
       </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

有a sample供参考。