wpf wrappanel绑定到列表

时间:2016-03-10 10:40:34

标签: wpf binding

在wpf中有一个绑定到类列表

的包装器
    <ScrollViewer Grid.Column="1">
        <ItemsControl ItemsSource="{Binding UserEntryItems}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <local:ItemTextEntry/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
   </ScrollViewer>

对于列表中的每个项目,我想显示一个用户控件。

usercontrol需要知道单个类信息,但我不确定如何绑定它。

所以我的主视图xmal现在看起来像下面的

        <ItemsControl ItemsSource="{Binding UserEntryItems}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <local:ItemTextEntry LocalUserEntry ="{Binding}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

我的用户控件&#34; ItemTextEntry&#34;看起来如下

public partial class ItemTextEntry : UserControl
{
    public UserEntry LocalUserEntry
    {
        get { return (UserEntry)GetValue(LocalUserEntryProperty); }
        set { SetValue(LocalUserEntryProperty, value); }
    }

    public static readonly DependencyProperty LocalUserEntryProperty= DependencyProperty.Register("LocalUserEntry", typeof(UserEntry),
        typeof(ItemTextEntry), new FrameworkPropertyMetadata(new UserEntry()));



    public ItemTextEntry()
    {
        InitializeComponent();
    }
}

如果我在&#34; public ItemTextEntry()&#34;中放置一个断点LocalUserEntry dosnt表示主列表中的值

由于

2 个答案:

答案 0 :(得分:1)

如果您的UserEntryItem类具有名为Name的属性,并且您的usercontrol ItemTextEntry具有名为Text的依赖项属性(您可以将其绑定到..), 你的xaml看起来像:

<ScrollViewer Grid.Column="1">
    <ItemsControl ItemsSource="{Binding UserEntryItems}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                // The DataContext here is at the level of each individual item in the UserEntryItems list
                <local:ItemTextEntry Text="{Binding Name}"/> // This can be used to display the data from the properties in your class
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</ScrollViewer>

答案 1 :(得分:0)

ItemTemplate用于确定传递项目列表数据项的内容的样式。

提供的代码应该有效。不知道你哪里出错了。

让我根据给定的代码发布一个示例供您参考。

MainWindow.xaml(提供)

 <ScrollViewer Grid.Column="1">
        <ItemsControl ItemsSource="{Binding UserEntryItems}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <local:ItemTextEntry/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>

MainWindow.xaml.cs(包括ViewModel)

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        ObservableCollection<MyClass> mc = new ObservableCollection<MyClass>();
        mc.Add(new MyClass() { Text1 = "test1", Text2 = "test2" });
        mc.Add(new MyClass() { Text1 = "test1", Text2 = "test2" });
        mc.Add(new MyClass() { Text1 = "test1", Text2 = "test2" });
        mc.Add(new MyClass() { Text1 = "test1", Text2 = "test2" });
        mc.Add(new MyClass() { Text1 = "test1", Text2 = "test2" });

        MainViewModel mv = new MainViewModel() { UserEntryItems = mc };

        this.DataContext = mv;

    }
}

public class MainViewModel
{
    public ObservableCollection<MyClass> UserEntryItems { get; set; } = new ObservableCollection<MyClass>();
}
public class MyClass
{
    public string Text1 { get; set; }
    public string Text2 { get; set; }
}

ItemTextEntry.xaml(样本一)

<Border BorderBrush="Black" BorderThickness="2">
    <StackPanel>
        <TextBox Text="{Binding Text1}"/>
        <TextBox Text="{Binding Text2}"/>
    </StackPanel>
</Border>