2013-04-09 58 views
0

我有一個出現這樣的標籤控制,每個標籤的右側剪短爲什麼我的標籤頁夾在右側,我該如何解決這個問題?

right side of each tab is clipped

我想不出做什麼讓它儘量右側是不裁剪。目前我正在使用以下樣式定義:<Setter Property="Margin" Value="5,0,0,0" />。如果我設置,爲Value="0,0,0,0",則邊緣顯示正確,如下所示:

correctly rounded corners

但是這不會工作,因爲我需要保持它們之間的5px的空間。

供參考,這是我使用的樣式:

<Style TargetType="{x:Type TabControl}" x:Key="TabControlStyle"> 
    <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> 
        <TabPanel Name="HeaderPanel" Grid.Row="0" Panel.ZIndex="1" Margin="120,0,4,0" IsItemsHost="True" KeyboardNavigation.TabIndex="1" Background="Transparent" /> 
        <Border Name="Border" Grid.Row="1" Background="Transparent" KeyboardNavigation.TabNavigation="Local" KeyboardNavigation.DirectionalNavigation="Contained" KeyboardNavigation.TabIndex="2" > 
         <ContentPresenter Name="PART_SelectedContentHost" Margin="0" ContentSource="SelectedContent" /> 
        </Border> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsEnabled" Value="False"> 
         <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" /> 
         <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 


<Style TargetType="{x:Type TabItem}" x:Key="TabItemStyle"> 
    <Setter Property="HorizontalAlignment" Value="Left" /> 
    <Setter Property="FontFamily" Value="Verdana" /> 
    <Setter Property="Margin" Value="0,0,0,0" /> 
    <Setter Property="FontSize" Value="12" /> 
    <Setter Property="Height" Value="35" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TabItem}"> 
       <Grid> 
        <Border Name="Border" Margin="0,0,0,0" Background="{DynamicResource RedGradient}" CornerRadius="7,7,0,0" > 
         <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2" 
          RecognizesAccessKey="True"/> 
        </Border> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsSelected" Value="True"> 
         <Setter Property="Panel.ZIndex" Value="100" /> 
         <Setter TargetName="Border" Property="Background" Value="#ABABB2" /> 
        </Trigger> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter TargetName="Border" Property="Background" Value="{DynamicResource DarkRedColorBrush}" /> 
        </Trigger> 
        <MultiTrigger> 
         <MultiTrigger.Conditions> 
          <Condition Property="IsSelected" Value="True" /> 
          <Condition Property="IsMouseOver" Value="True"/> 
         </MultiTrigger.Conditions> 
         <MultiTrigger.Setters> 
          <Setter TargetName="Border" Property="Background" Value="#ABABB2" /> 
         </MultiTrigger.Setters> 
        </MultiTrigger> 
        <Trigger Property="IsEnabled" Value="False"> 
         <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" /> 
         <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" /> 
         <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

這是對標籤1如何實現一個例子:

<TabControl Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Margin="0,35,0,0" VerticalAlignment="Stretch" 
      Style="{DynamicResource TabControlStyle}" SelectionChanged="TabControl_SelectionChanged">    
    <TabItem Style="{DynamicResource TabItemStyle}" Name="tabCustomers" > 
     <TabItem.Header> 
      <StackPanel Orientation="Horizontal"> 
       <Image Source="/Resources/Images/TabMenuIcons/Folder.png" Stretch="None" Margin="5,0,5,0"/> 
       <TextBlock Foreground="White">CUSTOMERS</TextBlock> 
      </StackPanel> 
     </TabItem.Header> 

    </TabItem> 
+0

你嘗試刪除''從標籤項的風格? – XAMeLi 2013-04-09 15:44:38

+0

是的,沒有做任何事情 – DaveDev 2013-04-09 16:25:14

回答

1

嘗試改變的Horizo​​ntalAlignment是「中心」,而不是「左」

<Style TargetType="{x:Type TabItem}" x:Key="TabItemStyle"> 
     <Setter Property="HorizontalAlignment" Value="Center" /> 
1

你可能想改變你的保證金到

<ControlTemplate TargetType="{x:Type TabItem}"> 
     <Grid> 
      <Border Name="Border" Margin="5,0,0,0" Background="Red" CornerRadius="7,7,0,0" > 
       <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2" 
        RecognizesAccessKey="True"/> 
      </Border> 
     </Grid> 

在你的TabItem ControlTemplate中

相關問題