是否有解决此tabcontrol/tabItem错误的方法 [英] Is there a workaround for this tabcontrol/tabitem bug

问题描述

除非我错了(我希望我错了)，否则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未被选中，因此显示的内容是

不可见的表项%1

选择该选项卡后，当然会显示TabItem2内容，并且无法返回到TabItem1，但问题在初始显示中。

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

针对此问题可以采取哪些解决方法。理想情况下，选项卡控件已经预先选择了它的第一个可视选项卡项。

推荐答案

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

tabControl.SetValue(TabControl.SelectedContentProperty, null);

您也可以对已加载的事件执行此操作。

遗憾的是，TabControl.SelectedContent属性没有公共setter，因此您可以直接设置SelectedContent Property。

编辑：

此功能的行为：

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> 

这篇关于是否有解决此tabcontrol/tabItem错误的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！