带有扩展器的 WPF 选项卡控件答案

【问题标题】：WPF Tabcontrol with Expander带有扩展器的 WPF 选项卡控件
【发布时间】：2014-06-05 08:04:43
【问题描述】：

我们如何创建带有扩展按钮的选项卡控件，如下所示，当用户单击扩展按钮时，折叠所有选项卡项目并再次单击将可见。

【问题讨论】：

什么会崩溃？整个控件还是只是当前选定选项卡的内容？
您标记了您的问题 WPF 和 Silverlight。您实际使用的框架是什么？
WPF，整个控件需要折叠

标签： c# wpf silverlight xaml expression-blend

【解决方案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>

【讨论】：

嗨，谢谢你的信息，但我只想要第一个按钮作为 Expander ，所以点击折叠所有 tabitems
我使用 TabControl 模板更新了我的答案，以实现对相同内容的更多控制。

【解决方案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>

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

【讨论】：