2017-05-01 70 views
1

我使用C#/ WPF使UI。WPF:限制首標區的寬度的最大尺寸在TabControl的

我的UI對爲了用戶的方便標籤控制的報頭區域中的按鈕。

問題是,如果添加了許多翼片,最後一個(或如果它具有多行,它們中的一個)可以通過這些按鈕覆蓋像紅色矩形在附加的圖片:

Last tab

有什麼辦法來限制的TabControl的頭部區域的最大寬度,但保持內容區域進行的TabItems寬度是多少?

當前XAML:

<Grid> 
    <Grid HorizontalAlignment="Stretch"> 
     <TabControl BorderThickness="0,0,0,1" Margin="0,0,0,0"> 
      <TabItem MinWidth="130" Height="27" Content="Title" /> 
      <TabItem MinWidth="130" Height="27" Content="Title" /> 
      <TabItem MinWidth="130" Height="27" Content="Title" /> 
      <TabItem MinWidth="130" Height="27" Content="Title" /> 
      <TabItem MinWidth="130" Height="27" Content="Title" /> 
      <TabItem MinWidth="130" Height="27" Content="Title" /> 
      <TabItem MinWidth="130" Height="27" Content="Title" /> 
      <TabItem MinWidth="130" Height="27" Content="Title" /> 
     </TabControl> 
    </Grid> 
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> 
     <Button Margin="0,2,5,0" HorizontalAlignment="Left" Height="20" Width="22" VerticalAlignment="top" Content="+" /> 
     <Button Width="65" Height="25" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,1,1" Content="Close" /> 
    </StackPanel> 
</Grid> 

`

注:在我的腦海之上,我也許能以溢出父使用負邊距的TabItems(TabControl的)的寬度,但它可能是一個糟糕的解決方法。

請讓我知道什麼是在這種情況下,一個不錯的辦法。

回答

1

您可以定義自己的TabControl風格,或者更具體的ControlTemplate,插入一個 「ButtonPanel」 是這樣的:

<TabControl.Style> 
        <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> 
             <Grid.ColumnDefinitions> 
              <ColumnDefinition Width="*" /> 
              <ColumnDefinition Width="Auto" /> 
             </Grid.ColumnDefinitions> 
             <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> 
             <TabPanel x:Name="HeaderPanel" 
                Grid.Row="0" 
                Panel.ZIndex="1" 
                Margin="0,0,4,-1" 
                IsItemsHost="True" 
                KeyboardNavigation.TabIndex="1" 
                Background="Transparent" /> 
             <StackPanel x:Name="ButtonPanel" Grid.Column="1" Orientation="Horizontal"> 
              <Button Margin="0,2,5,0" 
                HorizontalAlignment="Left" 
                Height="20" 
                Width="22" 
                VerticalAlignment="top" 
                Content="+" /> 
              <Button Width="65" 
                Height="25" 
                HorizontalAlignment="Right" 
                VerticalAlignment="Top" 
                Margin="0,0,1,1" 
                Content="Close" /> 
             </StackPanel> 
             <Border x:Name="Border" 
               Grid.Row="1" 
               Grid.ColumnSpan="2" 
               BorderThickness="1" 
               CornerRadius="2" 
               KeyboardNavigation.TabNavigation="Local" 
               KeyboardNavigation.DirectionalNavigation="Contained" 
               KeyboardNavigation.TabIndex="2"> 
              <Border.Background> 
               <LinearGradientBrush EndPoint="0.5,1" 
                    StartPoint="0.5,0"> 
                <GradientStop Color="{DynamicResource ContentAreaColorLight}" 
                    Offset="0" /> 
                <GradientStop Color="{DynamicResource ContentAreaColorDark}" 
                    Offset="1" /> 
               </LinearGradientBrush> 
              </Border.Background> 
              <Border.BorderBrush> 
               <SolidColorBrush Color="{DynamicResource BorderMediumColor}" /> 
              </Border.BorderBrush> 
              <ContentPresenter x:Name="PART_SelectedContentHost" 
                   Margin="4" 
                   ContentSource="SelectedContent" /> 
             </Border> 
            </Grid> 
           </ControlTemplate> 
          </Setter.Value> 
         </Setter> 
        </Style> 
       </TabControl.Style>