WPF > コンポーネント > コントロール > タブコントロール


※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

タブアイテムへの画像表示

<Window x:Class="TabControlTutorial.Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="WPF Tabs" Height="281" Width="454">
  <Grid>
    <TabControl>
      <TabItem>
        <TabItem.Header>
          <StackPanel Orientation="Horizontal">
            <Image Height="18" Source="cheese.jpg" />
            <TextBlock Text="Cheese" Margin="2,0,0,0" VerticalAlignment="Center" />
          </StackPanel>
        </TabItem.Header>
      </TabItem>
      <TabItem>
        <TabItem.Header>
          <StackPanel Orientation="Horizontal">
            <Image Height="18" Source="pepperoni.jpg" />
            <TextBlock Text="Pepperoni" Margin="2,0,0,0" VerticalAlignment="Center" />
          </StackPanel>
        </TabItem.Header>
      </TabItem>
      <TabItem>
        <TabItem.Header>
          <StackPanel Orientation="Horizontal">
            <Image Height="18" Source="mushrooms.jpg" />
            <TextBlock Text="Mushrooms" Margin="2,0,0,0" VerticalAlignment="Center" />
          </StackPanel>
        </TabItem.Header>
      </TabItem>
    </TabControl>
  </Grid>
</Window>

コントロールテンプレート

TabItemへの適応

タブコントロールに表示されるタブの部分(TabItem)のテンプレートを定義します。

#ref error : ファイルが見つかりません (TabItemControlTemplate1.png)
<Style TargetType="{x:Type TabItem}">
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="{x:Type TabItem}">
				<Grid>
					<!-- タブの枠(ボーダー)の設定 -->
					<Border
						Name="Border"
						Background="LightBlue"
						BorderBrush="#2E7992"
						BorderThickness="1,2,1,2"
						CornerRadius="6,6,0,0"
					>
						<ContentPresenter 
							x:Name="ContentSite"
							VerticalAlignment="Center"
							HorizontalAlignment="Center"
							ContentSource="Header"
							Margin="12,2,12,2" />
					</Border>
				</Grid>
 
				<!-- トリガー -->
				<ControlTemplate.Triggers>
					<!-- 「TabItem.IsSelected == True」の場合 -->
					<Trigger Property="IsSelected" Value="True">
						<!-- TargetNameは上で定義したBorder要素を指す -->
						<Setter
							TargetName="Border"
							Property="Background"
							Value="LightBlue" />
					</Trigger>
					<!-- 「TabItem.IsSelected == False」の場合 -->
					<Trigger Property="IsSelected" Value="False">
						<Setter
							TargetName="Border"
							Property="Background"
							Value="LightGray" />
					</Trigger>
				</ControlTemplate.Triggers>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>

グラデーション化とリソース化

このセクションではTabItemの背景をグラデーションに塗りつぶし、複数箇所で使用しても使いやすいようにブラシをリソースとして定義します。

#ref error : ファイルが見つかりません (TabItemControlTemplate2.png)

最初にある「SelectableTabItemBackgroundBrush」と「DisabledTabItemBackgroundBrush」は線形グラデーションのブラシです。

<LinearGradientBrush x:Key="SelectableTabItemBackgroundBrush" StartPoint="0.5,0" EndPoint="0.5,1">
	<GradientBrush.GradientStops>
		<GradientStop Color="LightBlue" Offset="0.0"/>
		<GradientStop Color="White" Offset="1.0"/>
	</GradientBrush.GradientStops>
</LinearGradientBrush >
<LinearGradientBrush x:Key="DisabledTabItemBackgroundBrush" StartPoint="0.5,0" EndPoint="0.5,1">
	<GradientBrush.GradientStops>
		<GradientStop Color="LightBlue" Offset="0.0"/>
		<GradientStop Color="Gray" Offset="1.0"/>
	</GradientBrush.GradientStops>
</LinearGradientBrush >
<Style TargetType="{x:Type TabItem}">
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="{x:Type TabItem}">
				<Grid>
					<!-- タブの枠(ボーダー)の設定 -->
					<Border
						Name="Border2"
						BorderBrush="#2E7992"
						Background="{StaticResource SelectableTabItemBackgroundBrush}"
						BorderThickness="1,2,1,2"
						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
							TargetName="Border2"
							Property="Background"
							Value="{StaticResource SelectableTabItemBackgroundBrush}"
						/>
					</Trigger>
					<Trigger Property="IsSelected" Value="False">
						<Setter
							TargetName="Border2"
							Property="Background"
							Value="{StaticResource DisabledTabItemBackgroundBrush}"
						/>
					</Trigger>
				</ControlTemplate.Triggers>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>

読んでいる本


Effective C#

QLOOKアクセス解析

ここを編集