如何使用 ListBox 制作自定义控件? [英] How to make custom control with ListBox?

问题描述

我想用自定义的项目模板制作水平列表框，所以我制作了一个基本模板.

I want to make horizontal ListBox with customized item template, so I make a basic template of it.

但是，我找不到将事物"绑定到该 WPF XAML 的示例，尤其是在 ListBox 填充了自定义项的情况下.

However, I couldn't find an example of binding 'things' to that WPF XAML, especially with ListBox filled with customized items.

我只想动态添加/删除 ListBox 中的项目，其中包含图像、标签、组合框，之前填充了数字 1 到 10.

I simply want to dynamically add/remove items in the ListBox with Image, Label, ComboBox with previously filled with number 1 to 10.

添加/删除按钮将放置在 WPF 控件之外，这意味着按钮将位于主窗口窗体上.

the ADD/REMOVE button will be placed outside WPF control, it means that the buttons will be on the Main Window Form.

此外，主窗口窗体中还有 TextBox 和图片选择器，以便我可以更改文本和图像.

Also, there are TextBox and picture selector in the Main Window Form so that I can change the text and image.

以下是 XAML 背后的代码:

Below is code behind XAML :

Public Class listSequence

Public Sub New()

    InitializeComponent()

    listbox.Items.Add("hi")
    listbox.Items.Add("there")

End Sub
End Class

下面是 XAML:

<ListBox Name="listbox" VerticalContentAlignment="Stretch"  ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True" >
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch"  />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Border Padding="10" Margin="5" BorderThickness="1" BorderBrush="Aqua" CornerRadius="0" Width="120" VerticalAlignment="Stretch">
                <StackPanel>
                    <Image />
                    <Label Content="{Binding}" />   
                    <TextBlock Text="hi" />
                    <ComboBox x:Name="cboRepeat" ItemsSource="{Binding}" DisplayMemberPath="RepeatCounter" IsSynchronizedWithCurrentItem="True"/>
                </StackPanel>
            </Border>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

推荐答案

假设我们有一个名为 Item 的基本类:

Let's say we have a basic class named Item:

public class Item : INotifyPropertyChanged
{
    public string Text { get; set; } // Implement INotifyPropertyChanged 
    public string ImagePath { get; set; } // properly on these properties
}

以及这些在视图模型中的集合:

And a collection of these in a view model:

public ObservableCollection<Item> Items { get; set; } 

现在要在 UI 中显示这些项目，我们使用 ListBox 并设置 ItemsSource 属性:

Now to display these items in the UI, we use a ListBox and set the ItemsSource property:

<ListBox ItemsSource="{Binding Items}">
</ListBox>

在定义ListBox.ItemTemplate 时，您需要了解此DataTemplate 将应用于每个项目，并且它可以访问所有Item 类中定义的属性:

When it comes to defining the ListBox.ItemTemplate, you need to understand that this DataTemplate will be applied to each item and that it has access to all of the properties defined in the Item class:

<ListBox ItemsSource="{Binding Items}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <Image ImageSource="{Binding ImagePath}" />
                <TextBlock Text="{Binding Text}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

因此，您可以访问集合类中的属性，如上所示.您可以通过查看 ItemsControl.ItemTemplate 属性 MSDN 页面.

Therefore, you can access the properties in the collection class as shown above. You can find out the full story by looking at the ItemsControl.ItemTemplate Property page on MSDN.

这篇关于如何使用 ListBox 制作自定义控件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！