数据绑定 DataTemplate 中的 ItemsControl

Question

我似乎有一个简单的 data-binding 问题，但想不出正确的方法。有一个 TabControl 定义了两个 DataTemplate，一个用于选项卡 header，一个用于选项卡内容。

内容模板包含 ItemsControl。 ItemsControl 尝试绑定到动态创建的 ViewModel (ConnectionInfoVM)。

当我显示 UI 时，绑定就失败了，但输出中没有关于它的 error-message。

我必须如何设置 DataContext 和绑定才能使绑定有效并实际显示 DataBuffer？非常感谢任何帮助。

连接控制：

<UserControl x:Class="XXXViewer.Views.ConnectionsControl"
             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"
             xmlns:viewModels="clr-namespace:XXXViewer.ViewModels"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid> 
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TabControl Grid.Row="0" Name="TabDynamic" SelectionChanged="tabDynamic_SelectionChanged">
            <TabControl.Resources>
                <DataTemplate x:Key="TabHeader" DataType="TabItem">
                    <DockPanel>
                        <TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Header}" />
                        <Button Name="btnDelete" DockPanel.Dock="Right" Margin="5,0,0,0" Padding="0" Click="btnTabDelete_Click" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Name}">
                            <Image Source="{DynamicResource DeleteImg}" Height="11" Width="11"></Image>
                        </Button>
                    </DockPanel>
                </DataTemplate>

                <DataTemplate x:Key="TabContent" DataType="viewModels:ConnectionInfoVM">
                    <StackPanel>
                        <ScrollViewer Name="Scroller" Background="Black">
                            <StackPanel>
                                <TextBlock Text="This line gets printed" Foreground="White" FontFamily="Consolas"/>
                                <ItemsControl Name="ItemCtrl" ItemsSource="{Binding DataBuffer}">
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding Path=.}" Foreground="White" FontFamily="Consolas"/>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                            </StackPanel>
                        </ScrollViewer>
                    </StackPanel>
                </DataTemplate>

            </TabControl.Resources>
        </TabControl>
    </Grid>
</UserControl>

后面的ConnectionsControl代码：

namespace XXXViewer.Views
{
    public partial class ConnectionsControl : UserControl
    {
        private readonly ObservableCollection<TabItem> _tabItems = new ObservableCollection<TabItem>();

        public ConnectionsControl()
        {
            InitializeComponent();

            // bindings
            TabDynamic.ItemsSource = _tabItems;
            TabDynamic.DataContext = this;
        }

        // assume this gets called
        private void AddTabItem(ConnectionInfoVM ci)
        {
            DataTemplate headerTemplate = TabDynamic.FindResource("TabHeader") as DataTemplate;
            DataTemplate contentTemplate = TabDynamic.FindResource("TabContent") as DataTemplate;

            // create new tab item
            TabItem tab = new TabItem
            {
                Header = $"Tab {ci.ConnectionID}",
                Name = $"T{ci.ConnectionID}",
                HeaderTemplate = headerTemplate,
                ContentTemplate = contentTemplate,
                DataContext = ci
            };

            _tabItems.Insert(0, tab);

            // set the new tab as active tab
            TabDynamic.SelectedItem = tab;
        }
    }
}

ConnectionInfoVM:

namespace XXXViewer.ViewModels
{
    public class ConnectionInfoVM : ViewModelBase
    {
        private readonly ObservableQueue<string> _dataBuffer = new ObservableQueue<string>();
        public ObservableQueue<string> DataBuffer => _dataBuffer;
    }
}

创建的选项卡的屏幕截图： resulting tab

Answer 1

根据您的编码，Tabcontrol 不包含 DataContext 视图模型，而是控件；所以我们需要找到一个控件或其他东西来保存虚拟机。该页面似乎也没有在其 DataContext 中保存虚拟机。

我建议一种方法是使用 TabControl 的 Tag 属性来保存虚拟机，例如在代码后面指定它：

TabDynamic.ItemsSource = _tabItems;
TabDynamic.DataContext = this;
TabDynamic.Tag = {Wherever you are keeping your VM at this time its not clear in your code example};

然后您可以通过指定 TabControls 的名称从模板绑定中指定 Tag:

 <ItemsControl Name="ItemCtrl" 
                     ItemsSource="{Binding Tag.DataBuffer, 
                                           ElementName=TabDynamic}">

Answer 2

您设置了 ContentTemplate 但从未设置 Content，因此从不应用 ContentTemplate，因为它仅在设置了 Content 时应用。而不是 DataContext = ci 写 Content = ci.

顺便说一下，DataContext = ci 没用，因为 DataContext 已经隐式地成为应用了 DataTemplate 的对象。

编辑

当您使用 WPF 时，请使用和滥用其核心功能：绑定。

我会如何编写您的代码（如果我没有使用完整的 MVVM 兼容代码）：

你的XAML：

<TabControl Grid.Row="0" Name="TabDynamic" 
            ItemsSource="{Binding TabItems, Mode=OneWay}" 
            SelectionChanged="tabDynamic_SelectionChanged">
    <TabControl.Resources>
        <DataTemplate x:Key="TabHeader" DataType="TabItem">
            <DockPanel>
                <TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Header}" />
                <Button Name="btnDelete" DockPanel.Dock="Right" Margin="5,0,0,0" Padding="0" Click="btnTabDelete_Click" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Name}">
                    <Image Source="{DynamicResource DeleteImg}" Height="11" Width="11"></Image>
                </Button>
            </DockPanel>
        </DataTemplate>
    </TabControl.Resources>
    <TabControl.ItemTemplate>
        <DataTemplate DataType="viewModels:ConnectionInfoVM">
            <TabItem Header="{Binding ConnectionID, Mode=OneWay}"
                     Name="{Binding ConnectionID, Mode=OneWay}"
                     HeaderTemplate="{StaticResources TabHeader}">
                <StackPanel>
                    <ScrollViewer Name="Scroller" Background="Black">
                        <StackPanel>
                            <TextBlock Text="This line gets printed" Foreground="White" FontFamily="Consolas"/>
                            <ItemsControl Name="ItemCtrl" ItemsSource="{Binding DataBuffer}">
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Path=.}" Foreground="White" FontFamily="Consolas"/>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </StackPanel>
                    </ScrollViewer>
                </StackPanel>
            </TabItem>

        </DataTemplate>
    </TabControl.ItemTemplate>
</TabControl>

你的cs代码变得简单多了：

namespace XXXViewer.Views
{
    public partial class ConnectionsControl : UserControl
    {
        private readonly ObservableCollection<ConnectionInfoVM> _tabItems = new ObservableCollection<ConnectionInfoVM>();
        public ObservableCollection<ConnectionInfoVM> TabItems {get {return _tabItems;}}

        public ConnectionsControl()
        {
            InitializeComponent();

            // bindings
            //TabDynamic.ItemsSource = _tabItems;
            TabDynamic.DataContext = this;
        }

        // assume this gets called
        private void AddTabItem(ConnectionInfoVM ci)
        {
            TabItems.Add(ci);
        }
    }
}

我在重新阅读您的代码时注意到您可能对代码隐藏中的绑定感到困惑。

您的代码TabDynamic.ItemsSource = _tabItems;不是绑定，只会设置一次。

无论如何，我建议您阅读一些有关 MVVM 的内容。 TabItems 应该在 ViewModel class 而不是在代码隐藏中。

数据绑定 DataTemplate 中的 ItemsControl

Data bind an ItemsControl in a DataTemplate

c#

data-binding

wpf

datatemplate