在TabControl WPF中异步绑定到SelectedItem

Question

我有一个带有标签的面板。 我在此面板的视图模型包含选项卡的视图模型的ObservableCollection ，以及所选选项卡的属性。

当某些操作要求聚焦一个选项卡或创建一个新的选项卡时，我更改了Selected并且选项卡的选择也进行了适当的更改，几乎是几乎所有的，因为内容是有效的，但是所有标头看起来都没有选择任何内容。

我找到了一个解决方案，说要添加IsAsync=True到我的绑定中。 这解决了问题，但增加了许多新问题。

第一件事是，当我在调试模式下运行程序时，添加带有按钮的选项卡可以正常工作，选项卡被正确切换和选择，但是当我尝试单击选项卡以选择它时，出现异常

调用线程无法访问该对象，因为其他线程拥有它。

在设置代表当前选定选项卡的属性时抛出：

private Tab selected;
public Tab Selected
{
    get { return Selected; }
    set { SetProperty(ref Selected, value); } // <<< here (I use prism BindableBase)
}

另一个问题是，当我快速切换选项卡时，可能会遇到以下情况：我选择了Tab1，但显示了Tab2的内容，多次切换选项卡会使事情恢复正常。

我的问题是，如何解决此问题，即在更改“ Selected内容”时Selected我的选项卡标题（突出显示的种类），而没有引起IsAsync引起的问题。

编辑

这是允许重现问题的代码。 它使用棱镜6.1.0

MainWindow.xaml

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <DockPanel>
        <StackPanel DockPanel.Dock="Top"
            Orientation="Horizontal"
            Margin="0,5"
            Height="25">
            <Button
                Command="{Binding AddNewTabCommand}"
                Content="New Tab"
                Padding="10,0"/>
            <Button
                Command="{Binding OtherCommand}"
                Content="Do nothing"
                Padding="10,0"/>
        </StackPanel>
        <TabControl
            SelectedItem="{Binding Selected, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, IsAsync=True}"  <!--remove IsAsync to break tab header selecting-->

            ItemsSource="{Binding Tabs}">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}" Margin="5"/>
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding Text}"/>
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
    </DockPanel>
</Window>

后面的代码：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = new TabGroup();
    }
}

Tab.cs

public class Tab : BindableBase
{
    public Tab(string name, string text)
    {
        this.name = name;
        this.text = text;
    }

    private string name;
    public string Name
    {
        get { return name; }
        set { SetProperty(ref name, value); }
    }
    private string text;
    public string Text
    {
        get { return text; }
        set { SetProperty(ref text, value); }
    }
}

TabGroup.cs

public class TabGroup : BindableBase
{
    private Random random;

    public TabGroup()
    {
        this.random = new Random();
        this.addNewTabCommand = new Lazy<DelegateCommand>(() => new DelegateCommand(AddNewTab, () => true));
        this.otherCommand = new Lazy<DelegateCommand>(() => new DelegateCommand(Method, () => Selected != null).ObservesProperty(() => Selected));
        Tabs.CollectionChanged += TabsChanged;
    }


    private void Method()
    {

    }

    private void TabsChanged(object sender, NotifyCollectionChangedEventArgs e)
    {
        var newItems = e.NewItems?.Cast<Tab>().ToList();
        if (newItems?.Any() == true)
        {
            Selected = newItems.Last();
        }
    }

    private void AddNewTab()
    {
        Tabs.Add(new Tab(GetNextName(), GetRandomContent()));
    }

    private string GetRandomContent()
    {
        return random.Next().ToString();
    }

    private int num = 0;
    private string GetNextName() => $"{num++}";

    private Tab selected;
    public Tab Selected
    {
        get { return selected; }
        set { SetProperty(ref selected, value); }
    }

    public ObservableCollection<Tab> Tabs { get; } = new ObservableCollection<Tab>();


    private readonly Lazy<DelegateCommand> addNewTabCommand;
    public DelegateCommand AddNewTabCommand => addNewTabCommand.Value;

    private readonly Lazy<DelegateCommand> otherCommand;
    public DelegateCommand OtherCommand => otherCommand.Value;
}

准备这个让我弄清楚异常是从哪里来的。 这是因为OtherCommand观察到选定的属性。 我仍然不知道该怎么做。 对我来说，最重要的是让标签在应有的状态下被选中，以使选定的标签不会与标签控件显示的内容不同步。

这是带有此代码的github回购

https://github.com/lukaszwawrzyk/TabIssue

Answer 1

我将专注于您的原始问题，没有异步部分。

添加新标签时未正确选择标签的原因是因为您在CollectionChanged事件处理程序中设置了Selected值。 引发事件会导致按顺序添加处理程序，依次调用处理程序。 由于您在处理函数中添加了处理程序，因此它将始终是第一个被调用的处理程序，重要的是，它将始终在更新TabControl程序之前被调用。 因此，当您在处理程序中设置Selected属性时， TabControl尚未“知道”集合中有这样的选项卡。 更准确地说，该选项卡的标题容器尚未生成，并且无法将其标记为已选中（这会导致丢失您的视觉效果），而且最终生成该选项卡时不会。 TabControl.SelectedItem仍会更新，因此您可以看到选项卡的内容，但是这也会导致以前标记为已选中的标头容器被取消标记，最终您最终将看不到任何选项卡。

根据您的需要，有几种方法可以解决此问题。 如果添加新选项卡的唯一方法是通过AddNewTabCommand ，则可以修改AddNewTab方法：

private void AddNewTab()
{
    var tab = new Tab(GetNextName(), GetRandomContent());
    Tabs.Add(tab);
    Selected = tab;
}

在这种情况下，您不应在CollectionChanged处理程序中设置Selected值，因为它会阻止PropertyChanged在正确的时间引发。

如果AddNewTabCommand不是添加选项卡的唯一方法，那么我通常要做的是创建一个专用集合，该集合将执行所需的逻辑（此类嵌套在TabGroup ）：

private class TabsCollection : ObservableCollection<Tab>
{
    public TabsCollection(TabGroup owner)
    {
        this.owner = owner;
    }

    private TabGroup owner;

    protected override void OnCollectionChanged(NotifyCollectionChangedEventArgs e)
    {
        base.OnCollectionChanged(e); //this will update the TabControl
        var newItems = e.NewItems?.Cast<Tab>()?.ToList();
        if (newItems?.Any() == true)
            owner.Selected = newItems.Last();
    }
}

然后只需在TabGroup构造函数中实例化集合：

Tabs = new TabsCollection(this);

如果这种情况出现在不同的地方，并且您不希望重复代码，则可以创建一个可重用的集合类：

public class MyObservableCollection<T> : ObservableCollection<T>
{
    public event NotifyCollectionChangedEventHandler AfterCollectionChanged;

    protected override void OnCollectionChanged(NotifyCollectionChangedEventArgs e)
    {
        base.OnCollectionChanged(e);
        AfterCollectionChanged?.Invoke(this, e);
    }
}

然后在需要确保已通知所有CollectionChanged订阅者时订阅AfterCollectionChanged 。

Answer 2

当您收到错误消息“调用线程无法访问该对象，因为其他线程拥有它”。 这意味着您正在尝试访问另一个并发线程上的对象。 为了向您展示如何解决此问题，我想举一个例子。 首先，您必须找到每个运行时对象，例如列表框和列表视图等。 （基本上是GUI控件）。 它们在GUI线程上运行。 当您尝试在其他线程（例如后台工作程序或任务线程）上运行它们时，将出现错误。 所以这就是你想做的：

//Lets say i got a listBox i want to update in realtime
//this method is for the purpose of the example running async(background)
public void method(){
   //get data to add to listBox1;
   //listBox1.Items.Add(item); <-- gives the error
   //what you want to do: 
   Invoke(new MethodInvoker(delegate { listBox1.Items.Add(item); }));  
   //This invokes another thread, that we can use to access the listBox1 on. 
   //And this should work
}

希望能帮助到你。