動作イメージは、画像を見て頂いたら少しは伝わるかなと思いますが、青を選択したら青枠に(画像の状態)、黄色タブを選択したら黄色枠にといった感じにしたいです。
またその際は、画像の枠とタブの間にすき間がないような形にしたいのです。
以下コードでは、タブの色付けはできても枠はできない状態です。
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
回答1件
あなたの回答
tips
プレビュー