15

スタイルを変更した TabControl があります。TabItem には、TabItem テキストを太字と緑に変更する TabItem が選択されたときに起動されるトリガーがあります。私が抱えている問題は、タブの内容のテキストも太字と緑に設定されていることです。

タブ コンテンツのすべてのコントロールを希望する色とフォントの太さに設定することで、これを回避できますが、これを行う必要がありますか? そのため、コンテンツ領域のすべてのテキストブロックに、色を黒に設定し、フォントの太さを標準にするスタイルを設定する必要があります。

TabItem の IsSelected 部分を緑色で表示するように設定し、タブの内容をそのままにしておくにはどうすればよいですか?

TabControl の前景を黒に設定しようとしましたが、うまくいきません。

以下のコード サンプルから、最初のタブのテキストが緑であり、黒にしたいことがわかりますが、タブ コンテンツに各コントロールを設定していません。

以下のコードサンプル:

    <Grid>
    <Grid.Resources>
        <!-- Tab item -->
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="MinWidth" Value="200"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid>
                            <Border Name="Border" Padding="5,2">
                                <ContentPresenter ContentSource="Header"/>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Border.IsMouseOver" Value="True"/>
                                    <Condition Property="IsSelected" Value="False"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="FontWeight" Value="Bold"/>
                                <Setter Property="Foreground" Value="Black"/>
                            </MultiTrigger>

                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Border.IsMouseOver" Value="False"/>
                                    <Condition Property="IsSelected" Value="False"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Foreground" Value="Black" />
                            </MultiTrigger>

                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Foreground" Value="Green"/>
                                <Setter Property="FontWeight" Value="Bold"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Tab control -->
        <Style  TargetType="{x:Type TabControl}">
            <Setter Property="SelectedIndex" Value="0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabControl}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="200" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Border Grid.Column="0" Padding="5" Margin="0,0,5,0" CornerRadius="3">
                                <StackPanel Orientation="Vertical">
                                    <ScrollViewer VerticalScrollBarVisibility="Auto" FocusVisualStyle="{x:Null}">
                                        <TabPanel IsItemsHost="True"/>
                                    </ScrollViewer>
                                </StackPanel>
                            </Border>
                            <Border Grid.Column="1" BorderBrush="Black" BorderThickness="0">
                                <ScrollViewer VerticalScrollBarVisibility="Auto" FocusVisualStyle="{x:Null}" Padding="10,0">
                                    <ContentPresenter ContentSource="SelectedContent"/>
                                </ScrollViewer>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Grid.Resources>

    <TabControl Name="tabControl" TabStripPlacement="Left">
        <!-- First tab item -->
        <TabItem IsSelected="True">
            <TabItem.Header>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Profile"/>
                </StackPanel>
            </TabItem.Header>
            <TextBlock Text="Page 1 Sample Text with no foreground set." FontSize="30"/>
        </TabItem>

        <!-- Second tab item -->
        <TabItem IsSelected="True">
            <TabItem.Header>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Profile"/>
                </StackPanel>
            </TabItem.Header>
            <TextBlock Text="Page 2 Sample Text with foreground set manually." FontSize="30" Foreground="Red"/>
        </TabItem>
    </TabControl>
</Grid>
4

5 に答える 5

4

これはかなり古いものですが、同様の問題の回答を探しているときに見つけました。提供された回答はまったく役に立たないことがわかりました。これが私がこれを修正した方法です。

次のように、tabitem のコントロール テンプレートで ContentPresenter を TextBlock に変更した場合:

....stuff above here...
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
   <Border Name="Border" Padding="5,2">
        <TextBlock x:Name="TabItemContent" Text="{TemplateBinding Header}"/>
   </Border>
</Grid>
... stuff below here....

次に、そのコントロール テンプレートのトリガーで、IsSelected トリガーでターゲット名を指定します。

...stuff above here...
 <Trigger Property="IsSelected" Value="True">
     <Setter Property="Foreground" TargetName="TabItemContent" Value="Green"/>
     <Setter Property="FontWeight" Value="Bold"/>
</Trigger>
... stuff below here ...

これにより、タブが選択されているときは緑色のテキストが表示され、それ以外の場合は緑色ではなく、アプリの残りの部分のテキストの色はそのままになります。

于 2010-12-08T21:13:50.783 に答える
3

残念ながら、何らかのトリガーによって ContentPresenter に Foreground (または FontWeight) を設定した場合でも、ヘッダーにはテキストのみが含まれると想定します。

Header="SomeHeaderName" (つまり、テキストのみ) を設定すると、ContentPresenter は、このヘッダー テキストをホストする TextBlock を生成します。ContentPresenter は、この TextBlock の (論理的な) 親になるため、ContentPresenter に設定された新しい Foreground は、この TextBlock によって継承されます。これは正常に動作します。

ただし、Image と TextBlock (または単一の TextBlock) を持つ水平 StackPanel のように、Header にビジュアル ツリーの一部が割り当てられている場合、StackPanel の論理的な親は ContentPresenter ではなく TabItem です。継承は論理ツリーを介して機能するため、StackPanel 内の TextBlock は最終的に TabItem から Foreground を再度継承します。ContentPresenter に設定された前景は、これには影響しません。

考えられる解決策の 1 つ: DataTemplate は最終的に ContentPresenter に適用されるため、DataTemplate のルートの TemplatedParent は ContentPresenter です。継承は TemplatedParent-Child バリアを通じても機能します。したがって、TabItem.Header の代わりに TabItem.HeaderTemplate を設定できる場合は、HeaderTemplateのルートが ContentPresenter から Foreground を継承するため、ヘッダーの ContentPresenter に Foreground を設定できます。ただし、TabItem に Foreground が設定されていない (コンテンツは TabItem から Foreground を継承する) ため、SelectedContent はそうではありません。

お役に立てれば！

于 2011-08-30T17:50:02.427 に答える
0

wpf のすべてのコントロールは、その親からプロパティを継承します。TabItem の色が黒だったので、その子textblockも黒でした。TabItem 全体の前景色を緑に変更したので、そのすべての子がそれを継承します。

ここで、TabItem.Header またはそのコンテンツの前景を緑に設定して、TabItem の他のコンテンツに影響を与えないようにすることができます。それ以外の場合は、ソリューションを反転できます。

そうでなければこれを試してください：

<Window.Resources>
    <DataTemplate x:Key="greenHeaderTemplate">
        <StackPanel Orientation="Horizontal"> 
            <TextBlock Text="Profile" 
                       FontWeight="Bold" 
                       Foreground="Green"/> 
        </StackPanel> 
    </DataTemplate>
    <DataTemplate x:Key="defaultHeaderTemplate">
        <StackPanel Orientation="Horizontal"> 
            <TextBlock Text="Profile"/> 
        </StackPanel> 
    </DataTemplate>
</Window.Resources>

<Trigger Property="IsSelected" Value="True">      
    <Setter Property="HeaderTemplate" 
            Value="{StaticResource greenHeaderTemplate}"/> 
</Trigger>

<TabItem IsSelected="True" HeaderTemplate="{StaticResource defaultHeaderTemplate}"> 
    <TextBlock Text="Page 1 Sample Text with no foreground set." FontSize="30"/> 
</TabItem>
于 2010-06-21T10:12:07.423 に答える