使用 xaml 根据所选选项卡使选择控件可见答案

【问题标题】：Make select controls visible based on selected tab using xaml使用 xaml 根据所选选项卡使选择控件可见
【发布时间】：2012-04-12 13:02:53
【问题描述】：

我有以下代码：

    private Dictionary<int, UserControl> tabControls = new Dictionary<int, UserControl>();

    public MainWindow()
    {
        InitializeComponent();

        tabControls[0] = new Panel1();
        tabControls[1] = new Panel2();
        tabControls[2] = new Panel3();
        tabControls[3] = new Panel4();
        tabControls[4] = new Panel5();
        tabControls[5] = new Panel6();
        tabControls[6] = new Panel7();
        tabControls[7] = new Panel8();
    }

    public object SelectedTab
    {
        //this is assigned from xaml binding
        set
        {
            OnCurrentTabChanged(tabControl.SelectedIndex);
        }
    }


    void OnCurrentTabChanged(int tabIndex)
    {
        if (dataDisplay != null)
        {
            dataDisplay.Children.Clear();
            dataDisplay.Children.Add(tabControls[tabIndex]);
        }
    }

每次用户选择不同的选项卡时，都会出现另一个控件。

有没有什么方法可以使用 xaml 来简化这个过程？

我不能将控件本身放在选项卡控件中

【问题讨论】：

将<TabItem>s 添加到您的<TabControl> 有什么问题？ You could put the panels inside tab items, and the inactive ones will hide when a different tab is selected.我错过了什么吗？..

标签： c# wpf xaml

【解决方案1】：

我以前用另一个TabControl 做过这个，它隐藏了标题和框架。然后我只是将SelectedIndex绑定到你另一个标签的SelectedIndex，两者是同步的

<!-- TabControl without the TabHeaders -->
<Style x:Key="TabControl_NoHeadersStyle" TargetType="{x:Type TabControl}">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <DockPanel>
                    <!-- This is needed to draw TabControls with Bound items -->
                    <StackPanel IsItemsHost="True" Height="0" Width="0" />

                    <ContentPresenter x:Name="PART_SelectedContentHost"
                                      ContentSource="SelectedContent" />
                </DockPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后您可以设置两个选项卡控件，每个控件绑定到不同的源，并将一个的SelectedIndex 绑定到另一个的SelectedIndex

<TabControl x:Name="MainTabControl" />

<TabControl ItemsSource="{Binding Panels}"
            SelectedIndex="{Binding ElementName=MainTabControl, Path=SelectedIndex}" 
            Style="{StaticResource TabControl_NoHeadersStyle}" />

另一种选择是将SelectedIndex 绑定到您的代码隐藏中的某些内容，然后只要它发生更改，就在另一个属性上引发PropertyChanged 通知，以公开您要显示的面板。

<TabControl SelectedIndex="{Binding SelectedTabIndex} />

<ContentControl Content="{Binding SelectedPanel}" />

在后面的代码中

public int SelectedTabIndex
{
    get { return _selectedTabIndex;}
    set
    {
        if (_selectedTabIndex != value)
        {
            _selectedTabIndex = value;
            RaisePropertyChanged("SelectedTabIndex");

            RaisePropertyChanged("SelectedPanel");
        }
    }
}

public UserControl SelectedPanel
{
    get { return tabControls[SelectedTabIndex]; }
}

【讨论】：

【解决方案2】：

TabItem 有一个 IsSelected 属性，您可以绑定到它，我认为这会简化语法。

 public bool TabIsSelected
 {
     get { return tabIsSelected; }
     set 
     {
          if (value && dataDisplay != null)
          {
              dataDisplay.Children.Clear();
              dataDisplay.Children.Add(tabControls[tabIndex]);
          }
          tabIsSelected = value;
     }

但我还是不明白为什么你不能把控件放在 tabitem 里？

【讨论】：

【解决方案3】：

使用代码隐藏

void OnCurrentTabChanged(int tabIndex)
{
    if (dataDisplay != null)
    {
        UIElemnt[] pp = dataDisplay.Children.Cast<UIElement>().ToArray();
        Array.ForEach(pp, x=> x.visibility = Visibility.Collapsed); 
        pp[tabIndex].visibility = Visibility.Visible;
    }
}

【讨论】：

-1 "我不能将控件本身放在选项卡控件中" ...您假设它们已添加并只是交换可见性。