Question

除非我弄错了（我希望是的），TabControl存在与TabItems的可见性相关的错误。这是重现错误的XAML。

<UserControl x:Class="TabControl_bug.MainPage"
    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:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <sdk:TabControl>
            <sdk:TabItem Header="tabItem1"  Visibility="Collapsed">
                <TextBlock Text="TabItem1 which should not be visible" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </sdk:TabItem>
            <sdk:TabItem Header="tabItem2">
                <TextBlock Text="TabItem2 which should be visible" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </sdk:TabItem>
        </sdk:TabControl>
    </Grid>
</UserControl>

运行此代码时，您会看到TabItem2未被“选中”，因此显示的内容为

TabItem 1，不应该是可见的

选择标签后，当然会显示TabItem2内容，并且无法返回到tabItem1，但问题出现在初始显示中。

如果我将SelectedIndex属性设置为1，则会显示正确的内容。 Howerver我不知道在XAML中应该首先选择Tabs。

此问题可能有哪些变通方法。理想情况下，tabcontrol已经预先选择了它是第一个可见的标签。

Answer 1

我找到了下一个解决方案。对于MainPage构造函数中的示例：

tabControl.SetValue(TabControl.SelectedContentProperty, null);

你也可以在Loaded事件上做到这一点。

不幸的是，TabControl.SelectedContent属性没有公共setter，所以你可以直接设置SelectedContentProperty。

修改

此功能的行为：

public class UnselectContentBehavior : Behavior<TabControl> { protected override void OnAttached() { base.OnAttached(); AssociatedObject.Loaded += OnLoaded; } private void OnLoaded(object sender, RoutedEventArgs e) { AssociatedObject.SetValue(TabControl.SelectedContentProperty, null); } protected override void OnDetaching() { base.OnDetaching(); AssociatedObject.Loaded -= OnLoaded; } }

使用样本：

<sdk:TabControl x:Name="tabControl"> <sdk:TabItem Header="tabItem1" Visibility="Collapsed"> <TextBlock Text="TabItem1 which should not be visible" VerticalAlignment="Center" HorizontalAlignment="Center"/> </sdk:TabItem> <sdk:TabItem Header="tabItem2"> <TextBlock Text="TabItem2 which should be visible" VerticalAlignment="Center" HorizontalAlignment="Center"/> </sdk:TabItem> <i:Interaction.Behaviors> <b:UnselectContentBehavior/> </i:Interaction.Behaviors> </sdk:TabControl>

Answer 2

在尝试解决here所描述的问题时，我遇到了这个问题。我找到了一个涵盖两种情况的合理解决方案。 TabControl中的附加属性“SelectOnlyVisibleTabs”设置为true以更正其行为。要在运行时更改TabItems的可见性，附加的“可见性”属性也会阻止TabControl的错误行为。完整的解决方案：

public static class TabControlExtensions
{
    /// <summary>
    /// Use this property on a TabControl to correct the behavior
    /// of selecting Collapsed TabItems.
    /// </summary>
    /// <param name="obj"></param>
    /// <returns></returns>
    public static bool GetSelectOnlyVisibleTabs(DependencyObject obj)
    {
        return (bool)obj.GetValue(SelectOnlyVisibleTabsProperty);
    }
    public static void SetSelectOnlyVisibleTabs(DependencyObject obj, bool value)
    {
        obj.SetValue(SelectOnlyVisibleTabsProperty, value);
    }
    public static readonly DependencyProperty SelectOnlyVisibleTabsProperty =
        DependencyProperty.RegisterAttached("SelectOnlyVisibleTabs", typeof(bool), typeof(TabControlExtensions), new PropertyMetadata(false, SelectOnlyVisibleTabsChanged));
    public static void SelectOnlyVisibleTabsChanged(object sender, DependencyPropertyChangedEventArgs args)
    {
        var tabControl = sender as TabControl;
        if (tabControl == null) return;

        if ((bool)args.NewValue)
        {
            tabControl.SelectionChanged += TabControl_SelectionChanged;
            CorrectSelection(tabControl);
        }
        else
        {
            tabControl.SelectionChanged -= TabControl_SelectionChanged;
        }
    }

    private static void TabControl_SelectionChanged(object sender, SelectionChangedEventArgs args)
    {
        var tabControl = sender as TabControl;
        if (tabControl == null) return;

        CorrectSelection(tabControl);
    }

    public static void CorrectSelection(TabControl tabControl)
    {
        var selected = tabControl.SelectedItem as UIElement;
        if (selected == null) return;

        // If the selected element is not suposed to be visible,
        // selects the next visible element
        if (selected.Visibility == System.Windows.Visibility.Collapsed)
            tabControl.SelectedItem = tabControl.Items.OfType<UIElement>()
                .Where(e => e.Visibility == System.Windows.Visibility.Visible)
                .FirstOrDefault();
    }
}

public static class TabItemExtensions
{
    /// <summary>
    /// Use this property in a TabItem instead of the original "Visibility" to 
    /// correct the behavior of a TabControl when a TabItem's Visibility changes.
    /// </summary>
    /// <param name="obj"></param>
    /// <returns></returns>
    public static Visibility GetVisibility(DependencyObject obj)
    {
        return (Visibility)obj.GetValue(VisibilityProperty);
    }
    public static void SetVisibility(DependencyObject obj, Visibility value)
    {
        obj.SetValue(VisibilityProperty, value);
    }
    public static readonly DependencyProperty VisibilityProperty =
        DependencyProperty.RegisterAttached("Visibility", typeof(Visibility), typeof(TabItemExtensions), new PropertyMetadata(Visibility.Visible, VisibilityChanged));

    public static void VisibilityChanged(object sender, DependencyPropertyChangedEventArgs args)
    {
        var tabItem = sender as TabItem;
        if (tabItem == null) return;

        var visibility = (Visibility)args.NewValue;
        if (tabItem.Visibility == visibility) return;

        tabItem.Visibility = visibility;
        if (visibility == Visibility.Visible) return;

        // Finds the tab's parent tabcontrol and corrects the selected item, 
        // if necessary.
        var tabControl = tabItem.Ancestors().OfType<TabControl>().FirstOrDefault();
        if (tabControl == null) return;

        TabControlExtensions.CorrectSelection(tabControl);
    }
}

用法：

<sdk:TabControl local:TabControlExtensions.SelectOnlyVisibleTabs="True">
    <sdk:TabItem Header="tabItem1" Visibility="Collapsed">
        <TextBlock HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Text="TabItem1 which should not be visible (1)" />
    </sdk:TabItem>
    <sdk:TabItem Header="tabItem2">
        <TextBlock HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Text="TabItem2 which should be visible (2)" />
    </sdk:TabItem>
    <sdk:TabItem DataContext="{Binding ViewModel}"
                 Header="tabItem3"
                 local:TabItemExtensions.Visibility="{Binding MyProperty,
                                                             Converter={StaticResource BoolToVisibilityConverter}}">
        <TextBlock HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Text="TabItem with binded Visibility (3)" />
    </sdk:TabItem>
</sdk:TabControl>

这个tabcontrol / tabitem错误是否有解决方法？

2 个答案: