Как я могу связать поля класса с элементами внутри пользовательских шаблонов? (WPF)

Question

Как я могу связать поля класса с элементами внутри пользовательского шаблона ListBoxItem ??В этом примере кода отсутствуют некоторые аспекты, такие как определение класса, имя ListBox и т. Д. Я просто борюсь с процессом привязки.

<ListBox>
    <ListBox.Resources>
        <Style TargetType="ListBoxItem">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>

                       <!-- how to bind class fields to these elements -->

                        <StackPanel Orientation="Horizontal">
                            <Label></Label>
                            <Image></Image>
                        </StackPanel>

                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.Resources>

    <!-- adding items dynamically -->

</ListBox>

Код C # должен выглядеть следующим образом:

ListBoxItem listBoxItem = new ListBoxItem();
listBoxItem.Content = new MyClass(){ Name="MyName", Image="ImagePath"}
... append to ListBox ... 

Answer 1

При разработке в WPF MvvM рекомендуется поощрять разделение интересов.Для этого можно реализовать модель представления со свойствами, которые затем будут привязаны к представлению.Если вы хотите, чтобы пользовательский интерфейс (представление) знал об изменениях данных, предоставляемых View Model, необходимо реализовать интерфейс INotifyPropertyChanged, например, так:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;
using System.Windows.Threading;    

namespace ViewModels
{
    public class BaseViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public BaseViewModel()
        {
             //ctor
        }

        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            UIThread( () =>
            {
                //make sure the event is raised on the main thread
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
            });
        }

        Dispatcher _dispacther;

        protected void UIThread(Action action)
        {
            if (_dispacther == null)
            {
                _dispacther = Dispatcher.CurrentDispatcher;
            }
            _dispacther.Invoke(action);
        }
    }
}  

Ваш класс Hello выведетиз BaseViewModel и предоставить OnPropertyChanged ();в этом свойстве:

    private string name;

    public string Name
    {
        get { return name; }
        set { name= value; OnPropertyChanged(); }
    }

Теперь при изменении имени выбранного элемента в ListBox оно будет отражено в пользовательском интерфейсе.Попытайся!Эта реализация гарантирует, что событие вызывается в главном потоке, поэтому вам не нужно делать это при вызове события.Также [CallerMemberName] заполняет имя свойства, которое вы вызываете!

Answer 2

Разобрался. C # класс:

        public class Hello
    {
        public string Name { get; set; }
        public string Description { get; set; }
        public string ImagePath { get; set; }
    }

C # динамическое добавление:

ListBoxItem lbi = new ListBoxItem();
lbi.Content = new Hello() { Name = "hello man", Description="I am superman.", ImagePath="Images/myimage.png"};
menu.Items.Add(lbi);

XAML:

            <ListBox Name="menu" ItemsSource="{Binding}">

                <ListBox.Resources>

                    <Style TargetType="ListBoxItem">
                        <Setter Property="ContentTemplate">
                            <Setter.Value>

                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal">
                                        <Label FontWeight="Bold" Content="{Binding Name}"></Label>
                                        <Label Content="{Binding Description}"></Label>
                                        <Image Source="{Binding ImagePath}" Width="30" Height="30"></Image>
                                    </StackPanel>

                                </DataTemplate>

                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListBox.Resources>


            </ListBox>