使用 MVVM 和 WPF 在用户控件内绑定文本块

Question

我对 MVVM 和 WPF 还是新手我看过一些例子，但仍然没有找到我问题的确切答案。

我有一个 ListBox，每个项目都应该使用 ObservableCollection 添加一个新的用户控件。在用户控件中，我有几个文本块，我想将它们的文本绑定到包含数据的相同 ObservableCollection。

但是我不确定如何将文本块绑定到 ObservableCollection

很乐意提供代码示例。

我还要附上我的代码，这是我的用户控件 XAML:

<UserControl x:Class="ProtocolAnalyzerGui.UserControlls.MenuControlls.UCSingleLine"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="100" d:DesignWidth="300">
    <Grid Background="#FF454545">


    <Grid.RowDefinitions>
        <RowDefinition Height="1*"></RowDefinition>
        <RowDefinition Height="1*"></RowDefinition>
    </Grid.RowDefinitions>


    <TextBlock x:Name="TBHeader" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" ></TextBlock>

    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="10"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="10"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="10"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBlock x:Name="TBDatanTime" Grid.Column="0" Foreground="White" Text="{Binding DataAndTime }" ></TextBlock>
        <TextBlock x:Name="TBComPort" Grid.Column="2" Foreground="White"  Text="{Binding ComPort }" ></TextBlock>
        <TextBlock x:Name="TBTranslation" Grid.Column="4" Foreground="White" Text="{Binding Translation }" ></TextBlock>
        <TextBlock x:Name="TBDataBytesArray" Grid.Column="6" Foreground="White" Text="{Binding Header }" ></TextBlock>
    </Grid>
</Grid>
</UserControl>

主要windowXAML:

 <ScrollViewer Grid.Row="3" HorizontalScrollBarVisibility="Auto" 
VerticalScrollBarVisibility="Auto">
        <ListBox x:Name="LBListBox">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <myControlls:UCSingleLine x:Name="DataUserContoll" 
 DataContext="{Binding DataForGui}"></myControlls:UCSingleLine>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>

        </ListBox>
    </ScrollViewer>

列表框 Itemsource 的绑定在此函数内：

        private void MI_SerialPortStart_Click(object sender, RoutedEventArgs e)
        {
            LBListBox.ItemsSource = DataForGui;                
            _SerialPortTakeCare.Start();

        }

同时附上我的数据代码：

public class Data : INotifyPropertyChanged
{   

        private string _DataAndTime;

        public string DataAndTime
        {
            get { return _DataAndTime; }
            set
            {
                _DataAndTime = value;
                OnPropertyChanged("DataAndTime");
            }
        }
        private string _ComPort;

        public string ComPort
        {
            get { return _ComPort; }
            set
            {
                _ComPort = value;
                OnPropertyChanged("ComPort");
            }
        }
        private string _Translation;

        public string Translation
        {
            get { return _Translation; }
            set
            {
                _Translation = value;
                OnPropertyChanged("Translation");
            }
        }
        private string _Header;

        public string Header
        {
            get { return _Header; }
            set
            {
                _Header = value;
                OnPropertyChanged("Header");
            }
        }
        private string _Data_ARR;

        public string Data_ARR
        {
            get { return _Data_ARR; }
            set
            {
                _Data_ARR = value;
                OnPropertyChanged("Data_ARR");

            }
        }

        public Data()
        {
            _ComPort = "";
            _Data_ARR = "";
            _DataAndTime = "";
            _Header = "";
            _Translation = "";
        }





    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
    }
}
}

Answer 1

您只需设置用户控件的数据上下文，然后添加适当的绑定。

在您的主 window 中，这一行应如下所示：

<local:UserControl1 DataContext="{Binding}" x:Name="DataUserContoll"/>

而在用户控件中，代码应该更像这样：

<TextBlock x:Name="TBDatanTime" Grid.Column="0" Foreground="White" Text="{Binding TextField1}" />
<TextBlock x:Name="TBComPort" Grid.Column="2" Foreground="White" Text="{Binding TextField2}"/>
<TextBlock x:Name="TBTranslation" Grid.Column="4" Foreground="White" Text="{Binding TextField3}"/>
<TextBlock x:Name="TBDataBytesArray" Grid.Column="6" Foreground="White" Text="{Binding TextField4}"/>

... 并且您应该将我输入的占位符字段名称（例如 "TextField1"）更改为集合中对象的实际字符串属性 "DataForGui".

使用 MVVM 和 WPF 在用户控件内绑定文本块

Binding text blocks inside a user control using MVVM and WPF

c#

wpf

xaml

observablecollection

mvvm