Question

我有像这样的按钮列表视图：

<ListView ItemsSource="{Binding TestList}">
     <ListViewItem >
         <ListView.ItemTemplate>
                <DataTemplate>
                    <Button Name="test" Grid.Row="0" Grid.Column="10" Grid.ColumnSpan="4" Grid.RowSpan="4" VerticalAlignment="Center" Background="Transparent">
                        <Button.Template>
                             <ControlTemplate>
                                  <Grid>
                                      <Image Source="?????????????????????????????????????????????"/>
                                  </Grid>
                               </ControlTemplate>
                       </Button.Template>
                    </Button>
  </ListView.ItemTemplate>

这背后的代码是这样的：

public class CodeBehind
 {

        private ObservableCollection<string> testList;
        public ObservableCollection<string> TestList 
        {
            get { return testList; }
            set 
            { 
                testList = value;
            }
        } 



        public CodeBehind()
        {

            dummyModelList = new ObservableCollection<string>() { "/Assets/Image1", "/Assets/Image2", "/Assets/Image3"};


        }


}

如何将每个按钮的图像源绑定到可观察集合中的单个项目？我想只在XAML中这样做。

Answer 1

您正在寻找的是ItemTemplate（获取或设置用于显示每个项目的DataTemplate。）而不是按钮＆＃39;模板本身。

使用ItemTemplate指定数据对象的可视化。如果您的ItemsControl绑定到集合对象，并且您没有使用DataTemplate提供特定的显示指令，则每个项的结果UI都是基础集合中每个对象的字符串表示形式。

因此，当您将ItemTemplate设置为DataTemplate的实例时，DataTemplate将用于呈现项目。 DataTemplate的DataContext将隐式设置为绑定集合中的各个项，因此您可以使用Image.Source或{Binding .}

将{Binding}绑定到DataContext本身

<ListView ItemsSource="{Binding TestList}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Button Name="test" Grid.Row="0" Grid.Column="10" Grid.ColumnSpan="4" Grid.RowSpan="4" VerticalAlignment="Center" Background="Transparent">
                   <Image Source="{Binding .}" />
              </Button>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Answer 2

您应该创建DataTemplate以显示ItemTemplate ListView中的所有控件：

<ListView Name="listView">
   <ListView.ItemTemplate>
      <DataTemplate>
         <Grid Margin="2">
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto*"/>
              <RowDefinition Height="Auto*"/>
            </Grid.RowDefinitions>
           <Button>           
              <Image Source="{Binding AddressImage}" Width="20" Grid.Row="0" />
           </Button>
           <TextBlock Grid.Row="1" TextAlignment="Left" FontWeight="Light"
                        VerticalAlignment="Center" Text="{Binding UserName}" />
         </Grid>
    </DataTemplate>
</ListView.ItemTemplate>

型号：

public class Person
{
public int IdUser {get; set;}
public string UserName {get; set;}
public string AddressImage {get; set;}
}

代码隐藏：

public MainWindow()
{
   PopulateCollection();
}

private void PopulateCollection()
{
    ObservableCollection<Person> personColl = new ObservableCollection<Person>();
    for (int i = 0; i <= 10; i++)
    {
         //here you can set any image what you want
         personColl.Add(new Person() { IdUser=i, UserName="I am " + i.ToString(), 
                    AddressImage="Assets/1.png"});
         //Assets is a folder with images
    }
    listView.ItemsSource=personColl;
}

如何将ListView中的每个按钮的图像源绑定到可观察集合中的单个项目？

2 个答案: