将用户控制堆栈面板绑定到 WPF 中的可观察集合

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11675511/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-13 04:44:38  来源:igfitidea点击:

Bind a user control stack panel to an observable collection in WPF

c#wpfxaml

提问by Julien

I am trying to create a contact list user control with a stack panel bound to an ObservableCollectionof LoggedInUser

我试图创建绑定到一个堆叠面板联系人列表的用户控制ObservableCollectionLoggedInUser

User Control:

用户控制:

<UserControl.Content>
    <Grid>
        <Border BorderBrush="LightBlue" BorderThickness="1,1,1,1" CornerRadius="8,8,8,8" Height="350" HorizontalAlignment="Left" VerticalAlignment="Top" Width="290">
            <ItemsControl x:Name="tStack" Grid.Column="0">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Button Height="30" Content="{Binding Username}"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Border>
    </Grid>
</UserControl.Content>

User Control Code Behind

背后的用户控制代码

public partial class ContactList : UserControl
{
    public ContactList()
    {
        InitializeComponent();

        ContactListViewModel clvm = ContactListViewModel.GetInstance();

        clvm.Contacts.Add(new LoggedInUser("test", "123"));

        this.DataContext = clvm.Contacts;
    }
}

And my ContactListViewModel

还有我的 ContactListViewModel

class ContactListViewModel
{
    private static ContactListViewModel instance;

    public ObservableCollection<LoggedInUser> Contacts = new ObservableCollection<LoggedInUser>();

    public static ContactListViewModel GetInstance() 
    {
        if (instance == null)
            instance = new ContactListViewModel();

        return instance;
    }
}

LoggedInUserclass, just in case

LoggedInUser班级,以防万一

public class LoggedInUser
{
    private string username;
    public string Username
    {
        get { return username; }
        set { username = value; }
    }
}

My stack panel remains empty! Help!

我的堆栈面板仍然是空的!帮助!

回答by Kent Boogaart

You have not bound the ItemsSourceof your ItemsControl, so it effectively has no data. Your data context is the collection, so you need only do this:

您还没有约束ItemsSource你的ItemsControl,所以它实际上没有数据。您的数据上下文是集合,因此您只需执行以下操作:

<ItemsControl ItemsSource="{Binding}" ...

Alternatively, if you instead set your data context to the view model instance (as is customary for MVVM), you would do this:

或者,如果您改为将数据上下文设置为视图模型实例(按照 MVVM 的惯例),您可以这样做:

<ItemsControl ItemsSource="{Binding Contacts}" ...