質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

Q&A

解決済

1回答

4216閲覧

WPFでTabControlでコンテンツ領域に色つきの枠をつけたい

tride

総合スコア68

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

1グッド

0クリップ

投稿2020/03/05 09:12

編集2020/03/05 13:30

動作イメージは、画像を見て頂いたら少しは伝わるかなと思いますが、青を選択したら青枠に(画像の状態)、黄色タブを選択したら黄色枠にといった感じにしたいです。
またその際は、画像の枠とタブの間にすき間がないような形にしたいのです。

以下コードでは、タブの色付けはできても枠はできない状態です。

イメージ説明
Sample.xaml(UserControl)

xaml

1<Grid> 2 <!-- 静的タブコントロール --> 3 <TabControl Grid.Row="3" Grid.Column="0"> 4 <TabItem Header="静的タブアイテム1" Width="250"> 5 <TextBlock Text="TabItem1 Content"/> 6 </TabItem> 7 <TabItem Header="静的タブアイテムTest" Width="250"> 8 <TextBlock Text="TabItem2 Content"/> 9 </TabItem> 10 <TabItem Header="静的タブ" Width="250"> 11 <TextBlock Text="TabItem3 Content"/> 12 </TabItem> 13 </TabControl> 14</Grid>

StyleA.xaml(ResourceDictionary)

xaml

1 2 <!-- 省略 --> 3 4 <!-- TabItemの背景色 --> 5 <LinearGradientBrush x:Key="TabItemBlueBackground" EndPoint="0,1" StartPoint="0,0"> 6 <GradientStop Color="Blue" Offset="1"/> 7 </LinearGradientBrush> 8 9 <!-- TabItem選択時 --> 10 <LinearGradientBrush x:Key="TabItemSelectedBackground" EndPoint="0,1" StartPoint="0,0"> 11 <GradientStop Color="DarkBlue" Offset="0"/> 12 <GradientStop Color="{StaticResource productColor}" Offset="0.1"/> 13 </LinearGradientBrush> 14 15 16 <!-- タブコントロール:ユニークカラータブ - 青テスト --> 17 18 <Style x:Key="TabBlue" TargetType="{x:Type TabItem}"> 19 <!-- 外観デザイン --> 20 <Setter Property="Height" Value="45"/> 21 <Setter Property="BorderBrush" Value="Blue"/> 22 <Setter Property="Background" Value="Blue"/> 23 <Setter Property="BorderThickness" Value="10"/> 24 25 <!-- フォント設定 --> 26 <Setter Property="FontSize" Value="19"/> 27 <Setter Property="Foreground" Value="Silver"/> 28 29 <Setter Property="Template"> 30 <Setter.Value> 31 <ControlTemplate TargetType="{x:Type TabControl}"> 32 <Border x:Name="Bd1" BorderThickness="10,10,10,0" BorderBrush="Blue" Background="White" > 33 <ContentPresenter x:Name="Content" > 34 35 </ContentPresenter> 36 </Border> 37 </ControlTemplate> 38 </Setter.Value> 39 </Setter> 40 41 <!-- コントロールテンプレートを設定 --> 42 <Setter Property="Template"> 43 <Setter.Value> 44 <ControlTemplate TargetType="{x:Type TabItem}"> 45 <Grid SnapsToDevicePixels="true"> 46 <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="10,10,0,0" BorderThickness="1,1,1,0" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"> 47 <ContentPresenter x:Name="Content" 48 ContentSource="Header" 49 HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" 50 RecognizesAccessKey="True" 51 SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 52 VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/> 53 </Border> 54 </Grid> 55 56 <ControlTemplate.Triggers> 57 <!-- 選択時の背景色 --> 58 <Trigger Property="IsSelected" Value="true"> 59 <Setter Property="Panel.ZIndex" Value="1"/> 60 <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemSelectedBackground}"/> 61 <Setter Property="Foreground" Value="White"/> 62 </Trigger> 63 </ControlTemplate.Triggers> 64 65 </ControlTemplate> 66 </Setter.Value> 67 </Setter> 68 </Style> 69 70 71 <!-- 省略 -->

<環境>
言語:C#(WPF)
IDE:Visual Studio 2019

TN8001👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hihijiji

2020/03/05 10:09

質問はなんですか?
guest

回答1

0

ベストアンサー

雑いですがこんなのではいけませんか?

xml

1<TabControl Padding="-1"> 2 <TabItem Width="250" Header="静的タブアイテム1"> 3 <Border BorderBrush="Blue" BorderThickness="5"> 4 <TextBlock Text="TabItem1 Content" /> 5 </Border> 6 </TabItem> 7 <TabItem Width="250" Header="静的タブアイテムTest"> 8 <Border BorderBrush="Yellow" BorderThickness="5"> 9 <TextBlock Text="TabItem2 Content" /> 10 </Border> 11 </TabItem> 12 <TabItem Width="250" Header="静的タブ"> 13 <Border BorderBrush="Gray" BorderThickness="5"> 14 <TextBlock Text="TabItem3 Content" /> 15 </Border> 16 </TabItem> 17</TabControl>

投稿2020/03/05 10:57

編集2023/07/21 08:40
TN8001

総合スコア9357

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tride

2020/03/05 13:27

回答ありがとうございます。 こちらで試した所、タブと枠の間に白い余白が生まれるので、画像のようにはできませんでした。 希望は画像のように隙間がない状態を考えています。
TN8001

2020/03/05 13:36

それをPadding="-1"で打ち消してるのですが TabControlのテンプレートもいじっていますか?
tride

2020/03/05 14:09

ありがとうございます!ご指摘の通り、Paddingの所が抜けていました。 お陰で、無事解決できました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問