6

xaml（wpf）を使用して、下の「図A」に示すように、タブコントロールの下の行を削除して、「図B」のように表示しようとしています。

イラストA

http://www.arulerforwindows.com/images/peskylinea.png

イラストB

http://www.arulerforwindows.com/images/peskylineb.png

タブアイテムを定義すると線が表示されますが、タブコントロールにアタッチされているように見えます。その結果、タブアイテムまたはタブコントロールのいずれかまたは両方でBorderThicknessを変更しても、目的の結果が得られないようです。

これは、問題をマスクするために塗りつぶしの長方形を使用できない透明な背景上で行う必要があります。

コードは次のとおりです。

<!--Tab Control-->
<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>
                    <TabPanel Name="HeaderPanel" Grid.Row="0" Panel.ZIndex="1" Margin="0,0,0,-1" IsItemsHost="True" KeyboardNavigation.TabIndex="1" Background="Transparent" />
                    <Border 
                        Name="Border" 
                        Grid.Row="1" 
                        Background="{StaticResource WindowBackgroundBrush}" 
                        BorderBrush="{StaticResource DefaultSystemBrush}" 
                        BorderThickness="1,1,1,1" 
                        Margin="0,0,0,0"
                        CornerRadius="4" 
                        KeyboardNavigation.TabNavigation="Local"
                        KeyboardNavigation.DirectionalNavigation="Contained"
                        KeyboardNavigation.TabIndex="2" >
                        <ContentPresenter 
                             Name="PART_SelectedContentHost"
                             Margin="4"
                             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>
        <Trigger Property="IsEnabled" Value="False">
          <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
          <Setter Property="BorderBrush" TargetName="Border" Value="{StaticResource DisabledBorderBrush}" />
        </Trigger>
      </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="{x:Type TabItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Grid>
                    <Border Name="Border" Background="Transparent" BorderBrush="{StaticResource DefaultSystemBrush}" BorderThickness="1,1,1,1" CornerRadius="6,6,0,0">
                        <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Panel.ZIndex" Value="100" />
                        <Setter TargetName="Border" Property="Background" Value="Transparent" />
                        <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="LightGray" />
                        <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

前もって感謝します、

ロブ

4

6 に答える 6

2

同じ問題がありました。この線は、高さが設定されたタブに対してのみ描画されることに注意してください (1 つのタブに対してのみ設定され、自動的にすべてのタブの高さが保存されます)。だから私は新しいTabItemものを追加し、他のすべてのタブからwidth=0指定heightして削除しました。height

于 2012-08-30T09:27:50.230 に答える
2

ShowMeTheTemplateを使用して、スタイルの一部を見つけました。それは TabItem にあります。デフォルトのコントロール テンプレートには、それをオーバーライドする場合に設定する必要のあるものがさらにたくさんあります。 

<MultiTrigger>
  <MultiTrigger.Conditions>
    <Condition Property="Selector.IsSelected">
      <Condition.Value>
        <s:Boolean>True</s:Boolean>
      </Condition.Value>
    </Condition>
    <Condition Property="TabItem.TabStripPlacement" Value="{x:Static Dock.Top}" />
  </MultiTrigger.Conditions>
  <Setter Property="FrameworkElement.Margin">
    <Setter.Value>
      <Thickness>-2,-2,-2,-1</Thickness>
    </Setter.Value>
  </Setter>
</MultiTrigger>
于 2008-12-30T15:45:25.990 に答える
1

これはうまくいきます。

<Style TargetType="TabItem">
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Border x:Name="Chrome"
                        BorderThickness="1,1,1,0" 
                        BorderBrush="Black" 
                        Background="{TemplateBinding Background}" 
                        Padding="2,2,2,1" Margin="1,1,1,0">
                    <ContentPresenter ContentSource="Header" 
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="Selector.IsSelected" Value="True">
                        <Setter TargetName="Chrome" Property="Margin" Value="1,1,1,-1"/>
                        <Setter TargetName="Chrome" Property="Padding" Value="2"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

選択したタブ項目のマージンとパディングを変更するだけです。

于 2011-05-20T13:10:42.477 に答える
0

余白とパディングの調整は私にはうまくいきませんでした。ただし、タブコントロールの境界線の上に白（背景色）の境界線を描画すると、うまくいきました。

<ControlTemplate TargetType="{x:Type TabItem}">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0 0 7 0">
        <Border x:Name="tabContentBorder" BorderThickness="2 2 2 0" Background="AliceBlue" BorderBrush="AliceBlue" CornerRadius="6 6 0 0">
        <ContentPresenter HorizontalAlignment="Center" x:Name="Content" VerticalAlignment="Center" ContentSource="Header" Margin="7 3 7 3"/>
    </Border>
    <Border  x:Name="tabBottomBorder"  BorderBrush="White" BorderThickness="1" Visibility="Hidden" Margin="2 0 2 -2" HorizontalAlignment="Stretch"></Border>
</StackPanel>
<ControlTemplate.Triggers>
    <Trigger Property="IsSelected" Value="True">
        <Setter TargetName="tabContentBorder" Property="Background" Value="White" />
        <Setter TargetName="tabBottomBorder" Property="Visibility" Value="Visible"/>
    </Trigger>
</ControlTemplate.Triggers>

于 2011-10-18T21:14:49.267 に答える