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 を「Left」ではなく「Center」に変更してみてください

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