1

私はそのようにタブコントロールでタブ項目をスタイルしました

<Style x:Key="TabHeaderStyle" TargetType="{x:Type TabItem}">
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate >
                    <Grid HorizontalAlignment="Stretch" Height="22">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="20" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="2"  ></RowDefinition>
                            <RowDefinition Height="Auto" ></RowDefinition>
                        </Grid.RowDefinitions>
                        <Rectangle Fill="{Binding  RelativeSource={RelativeSource AncestorType={x:Type TabItem} }, Path=Content.DataContext.HeaderColor}" Grid.ColumnSpan="2"></Rectangle>
                        <TextBlock Grid.Row="1" Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem} }, Path=Content.DataContext.HeaderInfo}"
                                       VerticalAlignment="Bottom" Margin="4,0,8,0"/>
                        <Button Grid.Row="1" Grid.Column="1" Content="x" ToolTipService.ToolTip="Close this view." BorderBrush="{x:Null}" Background="{x:Null}" Foreground="#FF224A71" VerticalAlignment="Center" Padding="3,0">
                            <Button.OpacityMask>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="Black" Offset="0"/>
                                    <GradientStop Color="#4BFFFFFF" Offset="1"/>
                                </LinearGradientBrush>
                            </Button.OpacityMask>
                            <ei:Interaction.Triggers>
                                <ei:EventTrigger EventName="Click">
                                    <Controls:CloseTabbedViewAction />
                                </ei:EventTrigger>
                            </ei:Interaction.Triggers>
                        </Button>
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

このようにいくつかのタブを開いていると、タブアイテムは問題ないように見えます

ここに画像の説明を入力

これは、「x」で問題なく表示され、ビューを右揃えで閉じます。私の問題は、より多くのタブを開くと、標準のタブコントロール機能は、タブのスペースがほとんどないときに行を追加することです。これが発生すると、タブアイテムのサイズが変更されますが、タブが次のように見えるため、子コントロールに通知しているようには見えません

ここに画像の説明を入力

「x」が以前のように右揃えではないことに注意してください。グリッドとスタックパネルの両方に基づいてデータテンプレートを異なるスタイルで作成しようとしましたが、役に立ちませんでした。タブの行が複数ある場合でも、「x」ボタンを正しく配置する方法は誰でも知っています。

4

2 に答える 2

1

あなたGridのColumnDefinitions幅は制限されます（コンテンツに合わせて自動的にサイズが変更されることをAuto意味します）

代わりに試してください：

<Grid.ColumnDefinitions>
   <ColumnDefinition Width="*" />
   <ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>

（また、違いが生じるかどうかはわかりませんが、私のTabItemスタイルでは、あなたがやっているように を設定TemplateするControlTemplateのではなく、 を設定します）HeaderTemplateDataTemplate

于 2012-09-14T13:32:43.603 に答える
0

TabItem テンプレートでこれを試してください...

 <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
 <Setter Property="VerticalContentAlignment" Value="Stretch"/>

問題が解決するかどうかお知らせください。ここでコードをテストすることはできません。

于 2012-09-14T14:26:05.673 に答える