0

我有一个显示如下的选项卡控件，每个选项卡的右侧都被剪裁了：

每个选项卡的右侧被剪裁

我不知道该怎么做才能做到这一点，所以右侧不会被剪掉。目前我正在使用具有以下内容的样式定义：<Setter Property="Margin" Value="5,0,0,0" />. 如果我将其设置为Value="0,0,0,0"然后边距正确显示，如下所示：

正确的圆角

但这不起作用，因为我需要在它们之间保持 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>
4

2 回答 2

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

于 2013-04-09T16:26:10.753 回答
1

尝试将 Horizo​​ntalAlignment 更改为“Center”而不是“Left”

<Style TargetType="{x:Type TabItem}" x:Key="TabItemStyle">
        <Setter Property="HorizontalAlignment" Value="Center" />
于 2013-04-10T08:12:18.197 回答