首页 > 解决方案 > WPF Tabcontrol 具有用于 tabitems 的扩展器功能

问题描述

我对 WPF 很陌生,但我正在尝试混合选项卡控件和扩展器的功能。

我希望能够按下标题中具有扩展器的每个选项卡项,这将扩展下面的内容。几乎就像一个普通的选项卡,除了我现在应该能够按下该选项卡/扩展器并且选项卡控件应该能够展开/折叠,只显示选项卡标题。

我无法让展开/折叠功能正常工作,并且 Tab 控件将始终像没有扩展器的普通控件一样保持打开状态。

目前我的 XAML 看起来像这样:

<TabControl>
        <TabItem >
            <TabItem.Header>
                <Expander Header="One" IsHitTestVisible="False"  
                  IsExpanded="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}" />
            </TabItem.Header>
            <TextBlock Background="Red"/>
        </TabItem>
        <TabItem>
            <TabItem.Header>
                <Expander Header="Two" IsHitTestVisible="False" 
                  IsExpanded="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}" />
            </TabItem.Header>
            <TextBlock Background="Aqua" />
        </TabItem>
    </TabControl>

如果我应该采用另一种方式来获得整体功能,请务必将我指向那个方向。

标签: c#wpfxaml

解决方案


这是我能想到的最简单的解决方案。我还是有点困惑你想要什么

虚拟机

 private bool myVar;

    public bool ShowItem
    {
        get { return myVar; }
        set { myVar = value; OnPropertyChanged("ShowItem"); }
    }


    private void TabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        ShowItem = true;
    }

    private void Expander_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        ShowItem = !ShowItem;
    }


     <TabControl SelectionChanged="TabControl_SelectionChanged">
                <TabItem   PreviewMouseLeftButtonDown="Expander_PreviewMouseLeftButtonUp" >
                        <TabItem.Header>
                        <Expander Header="One" IsHitTestVisible="False" 
                      IsExpanded="{Binding ShowItem}" />
                        </TabItem.Header>
                    <TextBlock Background="Red" >
                        <TextBlock.Style>
                            <Style TargetType="TextBlock">
                                <Setter Property="Visibility" Value="Collapsed"></Setter>
                                <Style.Triggers>

                                    <DataTrigger Binding="{Binding ShowItem}" Value="True">
                                        <Setter Property="Visibility" Value="Visible"></Setter>
                                    </DataTrigger>

                                </Style.Triggers>
                            </Style >
                        </TextBlock.Style>

                    </TextBlock>
                </TabItem>
                <TabItem  PreviewMouseLeftButtonDown="Expander_PreviewMouseLeftButtonUp">
                        <TabItem.Header>
                            <Expander Header="Two" IsHitTestVisible="False" 
                      IsExpanded="{Binding ShowItem}" />
                        </TabItem.Header>
                    <TextBlock Background="Aqua" >
                        <TextBlock.Style>
                            <Style TargetType="TextBlock">
                                <Setter Property="Visibility" Value="Collapsed"></Setter>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding ShowItem}" Value="True">
                                        <Setter Property="Visibility" Value="Visible"></Setter>
                                    </DataTrigger>

                                </Style.Triggers>
                            </Style >
                        </TextBlock.Style>
                    </TextBlock>
                </TabItem>
                </TabControl>

而不是风格,你可以使用转换器也试试这个,让我知道如果我错过了什么

基于评论

 <TabItem>
                <TabItem.Header>
                    <StackPanel Background="Transparent" PreviewMouseLeftButtonDown="Expander_PreviewMouseLeftButtonUp">
                        <Expander Header="One" IsHitTestVisible="False" PreviewMouseLeftButtonDown="Expander_PreviewMouseLeftButtonUp" 
                  IsExpanded="{Binding ShowItem}" />
                    </StackPanel>
                </TabItem.Header>

推荐阅读