如何在添加更多标签页时缩小tabItem大小(例如Google Chrome标签页)

时间:2016-04-18 19:36:24

标签: c# wpf xaml

目前我正在从事一个我的项目。我使用可以关闭/打开的标签(虽然它们与chrome'不完全相同)。标签项的数据模板具有标签和按钮。这是我的代码。

<Grid Name="grid_test" Margin="0,73,0,0" >
        <TabControl Background="WhiteSmoke"  FontFamily="Segoe UI" FontSize="12" Margin="0" Name="tabDynamic" ItemsSource="{Binding}" GotFocus="tabControl_GotFocus">

            <TabControl.ItemContainerStyle>
                <Style TargetType="TabItem">
                    <Setter Property="HorizontalAlignment" Value="Left" />
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    <Setter Property="Padding" Value="0"/>
                    <Setter Property="Height" Value="30"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TabItem">

                                <Grid Name="Panel">
                                    <Border Name="Border" Margin="0,0,0,0" Background="Transparent"
              BorderBrush="#999999" BorderThickness="0,1,1,0" >
                                        <ContentPresenter x:Name="ContentSite"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Stretch"
                                    ContentSource="Header"
                                    Margin="7,2"/>
                                    </Border>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter TargetName="Panel" Property="Background" Value="White" />

                                    </Trigger>
                                    <Trigger Property="IsSelected" Value="False">
                                        <Setter TargetName="Panel" Property="Background" Value="#B3B3B3" />
                                    </Trigger>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter TargetName="Panel" Property="Background" Value="#F6F6F6" />
                                    </Trigger>



                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>




            </TabControl.ItemContainerStyle>
            <TabControl.Resources>

                <DataTemplate x:Key="TabHeader" DataType="TabItem">
                    <Grid >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="30"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <!--<TextBlock Margin="0,0,10,0"  HorizontalAlignment="Left" Text="{Binding RelativeSource={RelativeSource AncestorType=TabItem }, Path=Header}" />-->
                        <Label Width="100" Grid.Column="0" Margin="0,0,0,0" Height="32" HorizontalAlignment="Left" Content="{Binding RelativeSource={RelativeSource AncestorType=TabItem }, Path=Header}" />

                        <Button Grid.Column="1" HorizontalAlignment="Right" Name="btnDelete" Margin="0,0,0,0" Padding="0" Click="btnDelete_Click" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Name}"
                        Style="{StaticResource btnCustom}" Height="12" Width="12"/>
                    </Grid>
                </DataTemplate>



            </TabControl.Resources>
        </TabControl>
    </Grid>

现在,当我的标签数量有限时就是这种情况。请参阅链接中提供的图像 enter image description here

当我添加越来越多的标签时,就会发生这种情况。请参阅链接中提供的图像 enter image description here

我已经查看了这些链接 - How to design tabs like Google Chrome tabs?Tab control like Google Chrome tabs?,但它们对我没有任何意义,因为我是WPF的新手并且我试图尝试正确学习。现在我只想在添加更多tabItem时缩小它的大小。我会感激任何帮助。

更新:我在代码中发现了问题并遵循了@Paparazzi和@Chris W.的建议。我的代码工作正常,但我的实际问题仍未解决:( 我在

中添加了@Chris W.建议的一些msdn代码
<TabControl.Resources>

我在所需位置添加了一个视图框。但是,这个带有viewbox的代码显示了一种奇怪的行为。当我的第一个标签被加载时,它正在填满整个屏幕。随着标签数量的增加,标签的大小逐渐减小(在所有维度上)。

<TabControl.Resources>
                <Style  TargetType="{x:Type TabControl}">
                    <Setter Property="OverridesDefaultStyle"
      Value="True" />
                    <Setter Property="SnapsToDevicePixels"
      Value="True" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type TabControl}">
                                <Grid KeyboardNavigation.TabNavigation="Local">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>

                                    <Viewbox Stretch="Uniform" VerticalAlignment="Top" HorizontalAlignment="Left" >
                                     <TabPanel x:Name="HeaderPanel"
                                                Grid.Row="0"
                                                Panel.ZIndex="1"
                                                Margin="0,0,4,-1"
                                                IsItemsHost="True"
                                                KeyboardNavigation.TabIndex="1"
                                                Background="Transparent" />
                                    </Viewbox>
                                    <Border x:Name="Border"
                                              Grid.Row="1"
                                              BorderThickness="1"
                                              Background="Transparent"
                                              CornerRadius="2"
                                              KeyboardNavigation.TabNavigation="Local"
                                              KeyboardNavigation.DirectionalNavigation="Contained"
                                              KeyboardNavigation.TabIndex="2">

                                        <ContentPresenter x:Name="PART_SelectedContentHost"
                          Margin="4"
                          ContentSource="SelectedContent" />
                                    </Border>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

               //...more code


            </TabControl.Resources>

B.t.w @Paparazzi建议的解决方案(即使用此帖Make TabControl Headers Scrollable in WPF中的scrollviewer)工作正常。这是TabControl.Resources

中的代码
<ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto" VerticalAlignment="Top" HorizontalAlignment="Left" >
      <TabPanel x:Name="HeaderPanel" Grid.Row="0" Panel.ZIndex="1"
               Margin="0,0,4,-1"
               IsItemsHost="True" KeyboardNavigation.TabIndex="1"
               Background="Transparent" />
  </ScrollViewer>

1 个答案:

答案 0 :(得分:1)

看来tabItem dataTemplate中的标签的固定宽度为100.而不是修复此宽度,您可以将其绑定到代码隐藏中的属性,该属性包含选项卡项的数量(例如&#34 ; TabItemCount&#34)。这本身并没有用,因为你显然不想要一个宽度为1的标签,你拥有的标签越多,它们就越大,这与你可能想要的行为相反。

要解决这个问题,你需要一个converter,这是一个wpf绑定可用于获取任何输入值/类型并返回另一个类型/值的类。

然后绑定看起来像这样;

        <Window.Resources>
            <local:CountToWidthConverter x:Key="CountToWidthConverter" />
    </Window.Resources>

...

  <Label Width="{Binding TabItemCount, Converter={StaticResource CountToWidthConverter}}" ...

转换器看起来像这样;

public class CountToWidthConverter : IValueConverter
    {
            public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                 var tabCount = (int)value;
                 var tabWidth = 1000/tabCount;
                 return tabWidth;
            }

            public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {

                 ...

            }
    }

如果标签的数量仅为1,则标签的宽度将为1000,但随着标签项数量的增加,每个项目的宽度将减少。然后,您可以为所有选项卡设置最大宽度,然后在您创建的选项卡中将其分开。转换器类中的代码显然可以做任何你喜欢的事情,这样你就可以处理各种特殊情况。您实际上可以绑定到您喜欢的任何对象类型,只要您传入的对象与选项卡所需的宽度之间存在某种连接,就可以使其工作。

转换器非常适合更改属性,例如可见性,颜色等,您希望根据某些条件更改属性值,例如,如果文本变为负数,则会使文本变为红色。