带扩展器的WPF Tabcontrol

Question

如何使用Expander按钮创建Tab Control，如下所示，当用户点击Expander按钮时，折叠所有Tab项并再次单击将显示。

Answer 1

这是一个例子

    <ItemsControl>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Expander Header="{Binding}" Margin="4">
                    exapnder data
                </Expander>
            </DataTemplate>
            </ItemsControl.ItemTemplate>
        <ItemsControl.Items>
            <sys:String>Positions</sys:String>
            <sys:String>Orders</sys:String>
            <sys:String>Trade</sys:String>
        </ItemsControl.Items>
    </ItemsControl>

您可以根据需要自定义样式

更新（使用TabControl模板）

    <TabControl Grid.Column="1" Margin="4">
        <TabControl.Items>
            <sys:String>Positions</sys:String>
            <sys:String>Orders</sys:String>
            <sys:String>Trade</sys:String>
        </TabControl.Items>
        <TabControl.Style>
            <Style BasedOn="{StaticResource {x:Type TabControl}}" TargetType="{x:Type TabControl}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabControl}">
                            <Grid KeyboardNavigation.TabNavigation="Local">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.BorderBrush).
                (SolidColorBrush.Color)">
                                                    <EasingColorKeyFrame KeyTime="0" Value="#FFAAAAAA" />
                                                </ColorAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Grid Margin="0,0,0,-1">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="auto" />
                                        <ColumnDefinition />
                                    </Grid.ColumnDefinitions>
                                    <ToggleButton x:Name="toggle" Content="^" Padding="0" IsChecked="True" VerticalAlignment="Top" Width="{Binding Path=ActualHeight,RelativeSource={RelativeSource Self}}" Margin="0,0,0,1"/>
                                    <TabPanel Grid.Column="1" x:Name="HeaderPanel" Grid.Row="0" Panel.ZIndex="1" Margin="4,0" IsItemsHost="True" KeyboardNavigation.TabIndex="1" Background="Transparent" />
                                </Grid>                                    <Border x:Name="Border" Grid.Row="1" BorderThickness="1" CornerRadius="2" KeyboardNavigation.TabNavigation="Local" KeyboardNavigation.DirectionalNavigation="Contained" KeyboardNavigation.TabIndex="2"
                                        Visibility="{Binding IsChecked, ElementName=toggle,Converter={StaticResource BooleanToVisibilityConverter}}">
                                    <Border.Background>
                                        <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}" />
                                    </Border.Background>
                                    <Border.BorderBrush>
                                        <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.ActiveBorderColorKey}}" />
                                    </Border.BorderBrush>
                                    <ContentPresenter x:Name="PART_SelectedContentHost" Margin="4" ContentSource="SelectedContent" />
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.Style>
    </TabControl>

Answer 2

您可以轻松地将TabControl拆分为两部分。然后，当Expander未折叠时，您可以使用绑定来显示所选内容。

<Expander>
    <Expander.Header>
        <TabControl>
            <TabItem x:Name="PositionsTabHeader" Header="Positions"/>
            <TabItem x:Name="OrdersTabHeader" Header="Orders"/>
            <TabItem x:Name="TradesTabHeader" Header="Trades"/>
        </TabControl>
    </Expander.Header>
    <TabControl>
        <TabItem Visibility="Collapsed"
                 IsSelected="{Binding ElementName=PositionsTabHeader, Path=IsSelected}">
            Positions go here
        </TabItem>
        <TabItem Visibility="Collapsed"
                 IsSelected="{Binding ElementName=OrdersTabHeader, Path=IsSelected}">
            Orders go here
        </TabItem>
        <TabItem Visibility="Collapsed"
                 IsSelected="{Binding ElementName=TradesTabHeader, Path=IsSelected}">
            Trades go here
        </TabItem>
    </TabControl>
</Expander>

您可以对TabControl中的Expander.Header应用一些样式修改，以使其看起来更好。