我是WPF的新手。在这里,我发布了TabControl
的图片。只需指导我如何根据我的图片重新设置WPF中具有相同UI的选项卡。
答案 0 :(得分:3)
在这种情况下,您需要为Style
实施Template
/ TabControl
才能获得此表单。 TabControl
标签有三个方向:中央( default
),左右方向。你需要离开方向,从图片来判断。
TabItem
的样式(TabControl
的元素)将是所有方向的样式。
TabControl
的样式,左方向:
<Style x:Key="LeftTabControl" TargetType="{x:Type TabControl}">
<Setter Property="TabStripPlacement" Value="Left" />
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="Background" Value="White" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid ClipToBounds="True" SnapsToDevicePixels="True" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition Name="ColumnDefinition0" />
<ColumnDefinition Width="0" Name="ColumnDefinition1" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" Name="RowDefinition0" />
<RowDefinition Height="*" Name="RowDefinition1" />
</Grid.RowDefinitions>
<Border x:Name="HeaderBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Background="#FAFAFA" Margin="0">
<TabPanel IsItemsHost="True" Name="HeaderPanel" Panel.ZIndex="1" KeyboardNavigation.TabIndex="1" Grid.Column="0" Grid.Row="0" />
</Border>
<Grid Name="ContentPanel" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Column="0" Grid.Row="1">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0">
<ContentPresenter Content="{TemplateBinding SelectedContent}" ContentTemplate="{TemplateBinding SelectedContentTemplate}" ContentStringFormat="{TemplateBinding SelectedContentStringFormat}" ContentSource="SelectedContent" Name="PART_SelectedContentHost" Margin="2" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</Border>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TabControl.TabStripPlacement" Value="Left">
<Setter TargetName="HeaderPanel" Property="Grid.Row" Value="0" />
<Setter TargetName="ContentPanel" Property="Grid.Row" Value="0" />
<Setter TargetName="HeaderPanel" Property="Grid.Column" Value="0" />
<Setter TargetName="ContentPanel" Property="Grid.Column" Value="1" />
<Setter TargetName="ColumnDefinition0" Property="ColumnDefinition.Width" Value="Auto" />
<Setter TargetName="ColumnDefinition1" Property="ColumnDefinition.Width" Value="*" />
<Setter TargetName="RowDefinition0" Property="RowDefinition.Height" Value="*" />
<Setter TargetName="RowDefinition1" Property="RowDefinition.Height" Value="0" />
<Setter TargetName="HeaderBorder" Property="FrameworkElement.Margin" Value="0,0,0,0" />
</Trigger>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
TabItem
的样式:
<Style x:Key="{x:Type TabItem}" TargetType="{x:Type TabItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="Gray" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="FontFamily" Value="./#Segoe UI" />
<Setter Property="FontSize" Value="14" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="AllowDrop" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border SnapsToDevicePixels="True" Name="Border" Margin="0,0,2,0" Padding="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0">
<ContentPresenter Name="ContentSite" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="5,5,5,5" VerticalAlignment="Center" RecognizesAccessKey="True" ContentSource="Header" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="TabStripPlacement" Value="Bottom">
<Setter TargetName="Border" Property="CornerRadius" Value="0,0,0,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#F5B79C" />
<Setter Property="Foreground" Value="Black" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsSelected" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="#DB805A" />
<Setter Property="Foreground" Value="White" />
</MultiTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="Black" />
<Setter Property="Foreground" Value="White" />
</Trigger>
</Style.Triggers>
</Style>
MainWindow
<TabControl Style="{StaticResource LeftTabControl}" Background="Gainsboro" Width="300" HorizontalAlignment="Left">
<TabItem Header="New">
<Label Content="TestNew" />
</TabItem>
<TabItem Header="Old">
<Label Content="TestOld" />
</TabItem>
<TabItem Header="Recent">
<Label Content="RecentHelp" />
</TabItem>
</TabControl>
Output
要添加三角形选择,您需要修复TabItem
的模板。添加带有三角形的Path
并将其显示在当前TabItem
:
<ControlTemplate TargetType="{x:Type TabItem}">
<Border SnapsToDevicePixels="True" Name="Border" Margin="0,0,2,0" Padding="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0">
<Grid>
<Path x:Name="CurrentTriangle" Width="10" Height="14" Stretch="Fill" Margin="0,0,-3,0" Fill="#FAFAFA" HorizontalAlignment="Right" Data="F1 M 287.328,237.333L 319.344,255.818L 319.344,218.849L 287.328,237.333 Z " Visibility="Collapsed" />
<ContentPresenter Name="ContentSite" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="5,5,5,5" VerticalAlignment="Center" RecognizesAccessKey="True" ContentSource="Header" />
</Grid>
</Border>
<ControlTemplate.Triggers>
...
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="CurrentTriangle" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
三角形输出:
TabItem
样式的完整列表Triangle
:
<Style x:Key="{x:Type TabItem}" TargetType="{x:Type TabItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="Gray" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="FontFamily" Value="./#Segoe UI" />
<Setter Property="FontSize" Value="14" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="AllowDrop" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border SnapsToDevicePixels="True" Name="Border" Margin="0,0,2,0" Padding="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0">
<Grid>
<Path x:Name="CurrentTriangle" Width="10" Height="14" Stretch="Fill" Margin="0,0,-3,0" Fill="#FAFAFA" HorizontalAlignment="Right" Data="F1 M 287.328,237.333L 319.344,255.818L 319.344,218.849L 287.328,237.333 Z " Visibility="Collapsed" />
<ContentPresenter Name="ContentSite" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="5,5,5,5" VerticalAlignment="Center" RecognizesAccessKey="True" ContentSource="Header" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="TabStripPlacement" Value="Bottom">
<Setter TargetName="Border" Property="CornerRadius" Value="0,0,0,0" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="CurrentTriangle" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#F5B79C" />
<Setter Property="Foreground" Value="Black" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsSelected" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="#DB805A" />
<Setter Property="Foreground" Value="White" />
</MultiTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="Black" />
<Setter Property="Foreground" Value="White" />
</Trigger>
</Style.Triggers>
</Style>
Edit:
我会按顺序告诉你。
我上面给出的所有Styles
都放在App.xaml
那样的(最好是他们在那里):
<Application x:Class="SomeProgram.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Style x:Key="LeftTabControl" TargetType="{x:Type TabControl}">
...
</Style>
<Style x:Key="{x:Type TabItem}" TargetType="{x:Type TabItem}">
...
</Style>
</Application.Resources>
指定
Triangle
的图片路径。
默认情况下,TabItem
的模板如下所示:
<Setter Property="Template">
<Setter.Value>
<Border SnapsToDevicePixels="True" Name="Border" Margin="0,0,2,0" Padding="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0">
<ContentPresenter Name="ContentSite" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="5,5,5,5" VerticalAlignment="Center" RecognizesAccessKey="True" ContentSource="Header" />
</Border>
负责显示内容的ContentPresenter
,在这种情况下用于显示标题中的文本。但是我们需要显示一个三角形,所以将他添加为数字Path
:
<Path x:Name="CurrentTriangle" Width="10" Height="14" Stretch="Fill" Margin="0,0,-3,0" Fill="#FAFAFA" HorizontalAlignment="Right" Data="F1 M 287.328,237.333L 319.344,255.818L 319.344,218.849L 287.328,237.333 Z " Visibility="Collapsed" />
这不是Image
,Path
更容易使用,无需保留资源。您可以找到更多信息here。
所以,现在我们出现了一个三角形,但是我们需要在选择标签时显示它。为此,我们使用触发器来执行此操作:
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="CurrentTriangle" Property="Visibility" Value="Visible" />
</Trigger>
有关您可以找到here的触发器的更多信息。
所选
TabItem
的渐变背景色。
所选TabItem
的颜色也设置为TabItem
样式的触发器:
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#F5B79C" />
<Setter Property="Foreground" Value="Black" />
</Trigger>
此处设置所选Background
的{{1}}和Foreground
的值。渐变颜色定义如下:
TabItem
您需要在触发器中为属性<LinearGradientBrush>
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Orange" Offset="0.5" />
<GradientStop Color="Red" Offset="1.0" />
</LinearGradientBrush>
设置渐变颜色。
此行的TabControl的背景
Background
样式设置为 Background
:
TabControl's
有关Brushes(Gradient's)here的更多信息。
有关样式/模板的信息here。
答案 1 :(得分:2)
试试这个。 在窗口上添加选项卡控件,然后将TabStripPlacement设置为Left。然后向此选项卡控件添加一些选项卡项。现在在Windows.Resource部分添加Style。
<Style TargetType="{x:Type TabItem}">
<Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Padding" Value="6,1,6,1"/>
<Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="MinHeight" Value="30"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid SnapsToDevicePixels="true">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Bd" BorderThickness="1,1,1,0" Padding="{TemplateBinding Padding}">
<Border.Background>
<RadialGradientBrush GradientOrigin="0.019,0.518" RadiusY="0.741" RadiusX="0.578" Center="0.019,0.518">
<GradientStop Color="#FFC5C7C8" Offset="0.47"/>
<GradientStop Color="#FFD1D3D8"/>
<GradientStop Color="#FFE2E2E2" Offset="1"/>
</RadialGradientBrush>
</Border.Background>
<Grid x:Name="grd" VerticalAlignment="Stretch" MinWidth="100" MinHeight="40">
<Path x:Name="CurrentTriangle" Width="10" Height="14" Stretch="Fill" Margin="0,0,-3,0" Fill="#FAFAFA" HorizontalAlignment="Right" Data="F1 M 287.328,237.333L 319.344,255.818L 319.344,218.849L 287.328,237.333 Z " Visibility="Collapsed" />
<ContentPresenter x:Name="Content" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemHotBackground}"/>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Panel.ZIndex" Value="1"/>
<Setter Property="Visibility" Value="Visible" TargetName="CurrentTriangle"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" TargetName="Bd">
<Setter.Value>
<RadialGradientBrush GradientOrigin="0.501,0.914" RadiusY="0.419" RadiusX="0.355" Center="0.501,0.914">
<GradientStop Color="#FF082876" Offset="0.727"/>
<GradientStop Color="#FF1145C4" Offset="0.221"/>
<GradientStop Color="#FF0E245C" Offset="1"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="false"/>
<Condition Property="IsMouseOver" Value="true"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="Bd" Value="Silver"/>
</MultiTrigger>
<Trigger Property="TabStripPlacement" Value="Left">
<Setter Property="BorderThickness" TargetName="Bd" Value="0"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="TabStripPlacement" Value="Left"/>
</MultiTrigger.Conditions>
<Setter Property="Margin" Value="0"/>
<Setter Property="Margin" TargetName="Content" Value="0,0,1,0"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemDisabledBackground}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemDisabledBorderBrush}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
对于自定义标题页标题,您可以使用标题模板。自定义模板会很好用。案件 。像
这样的东西<TabControl TabStripPlacement="Left">
<TabItem >
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="16" Width="16" Source="005_Task_24x24_72.png"/>
<TextBlock Text="Sample Tab"/>
</StackPanel>
</TabItem.Header>
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem >
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="16" Width="16" Source="008_Reminder_24x24.png"/>
<TextBlock Text="Sample Tab"/>
</StackPanel>
</TabItem.Header>
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem >
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="16" Width="16" Source="023_Tip_16x16_72.png"/>
<TextBlock Text="Sample Tab"/>
</StackPanel>
</TabItem.Header>
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem >
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="16" Width="16" Source="1409_Monitor_24x24.png"/>
<TextBlock Text="Sample Tab"/>
</StackPanel>
</TabItem.Header>
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem >
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="16" Width="16" Source="FavoriteStar_FrontFacing_24x24_72.png"/>
<TextBlock Text="Sample Tab"/>
</StackPanel>
</TabItem.Header>
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem >
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="16" Width="16" Source="Music_Note_Double_24.png"/>
<TextBlock Text="Sample Tab"/>
</StackPanel>
</TabItem.Header>
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem >
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="16" Width="16" Source="005_Task_24x24_72.png"/>
<TextBlock Text="Sample Tab"/>
</StackPanel>
</TabItem.Header>
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem >
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="16" Width="16" Source="005_Task_24x24_72.png"/>
<TextBlock Text="Sample Tab"/>
</StackPanel>
</TabItem.Header>
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem >
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="16" Width="16" Source="005_Task_24x24_72.png"/>
<TextBlock Text="Sample Tab"/>
</StackPanel>
</TabItem.Header>
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem >
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="16" Width="16" Source="005_Task_24x24_72.png"/>
<TextBlock Text="Sample Tab"/>
</StackPanel>
</TabItem.Header>
<Grid Background="#FFE5E5E5"/>
</TabItem>
</TabControl>