PF自定义选项卡
在WPF中，任何控件都可以自定义。
接下来自定义一个选项卡，先创建一个用户控件。控件为“TabItem”，编写页面内容样式。
代码：
<TabItem x:Class="EurasianMechanics.PublicStyles.UCTabItemWithClose"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="TabItem_Loaded">
<!--定义资源-->
<TabItem.Resources>
<!--按钮样式：用x:Key设置唯一键-->
<Style x:Key="CloseButtonStyle" TargetType="{x:Type Button}">
<!--边框：黑色-->
<Setter Property="BorderBrush" Value="Black"></Setter>
<!--背景：白色-->
<Setter Property="Background" Value="White"></Setter>
<Setter Property="Template">
<Setter.Value>
<!--自定义模板-->
<ControlTemplate TargetType="{x:Type Button}">
<!--定义视觉树-->
<Grid>
<!--形状绘图：椭圆-->
<!-- 模板绑定（TemplateBinding）：使用TemplateBinding扩展把TabItem的Stroke设置为控件的Stroke。-->
<Ellipse Width="15" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"></Ellipse>
<TextBlock x:Name="text" FontSize="10" Text="X" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
<!--定义触发器-->
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<!--设置背景色-->
<Setter Property="Background" Value="#FF1F5581"></Setter>
<!--设置字体颜色：白色-->
<Setter TargetName="text" Property="Foreground" Value="White"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabItem.Resources>
<!--定义样式-->
<TabItem.Style>
<!--选项卡-->
<Style TargetType="{x:Type TabItem}">
<!--边框画刷：黑色-->
<Setter Property="BorderBrush" Value="Black"></Setter>
<!--背景色：白色-->
<Setter Property="Background" Value="White"></Setter>
<!--字体：黑色-->
<Setter Property="Foreground" Value="Black"></Setter>
<!--内边距：5,0,0,0-->
<Setter Property="Padding" Value="5,0,0,0"></Setter>
<!--水平对齐方式：靠左-->
<Setter Property="HorizontalAlignment" Value="Left"></Setter>
<!--垂直对齐方式：居中-->
<Setter Property="VerticalAlignment" Value="Center"></Setter>
<Setter Property="Template">
<Setter.Value>
<!--定义模板：选项卡-->
<ControlTemplate TargetType="{x:Type TabItem}">
<!--定义视觉树-->
<!--边框:边框画刷BorderBrush，边框粗度BorderThickness，背景都是绑定模板样式Background-->
<Border CornerRadius="5,0,0,0" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Grid>
<!--定义两列-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="20"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!--定义内容：内容演示-->
<ContentPresenter Grid.Column="0" ContentSource="Header" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
<!--按钮样式Style：依赖属性绑定—》资源-->
<Button Grid.Column="1" Name="btn_Close" Style="{StaticResource CloseButtonStyle}" Click="btn_Close_Click"></Button>
</Grid>
</Border>
<!--定义触发器-->
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" Value="#FFFF923E"></Setter>
<Setter Property="Foreground" Value="White"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabItem.Style>
</TabItem>
效果图：
创建页面加载事件“Loaded="TabItem_Loaded"”，和按钮点击事件“Click="btn_Close_Click"”，转到后台编写代码：
private TabControl m_Parent;
/// <summary>
/// 约定的宽度
/// </summary>
private double m_ConventionWidth = 100;
//点击事件
private void btn_Close_Click(object sender, RoutedEventArgs e)
{
if (m_Parent == null)
return;
//移除自身
m_Parent.Items.Remove(this);
//移除事件
m_Parent.SizeChanged -= m_Parent_SizeChanged;
int criticalCount = (int)((m_Parent.ActualWidth - 5) / m_ConventionWidth);
//平均宽度
double perWidth = (m_Parent.ActualWidth - 5) / m_Parent.Items.Count;
foreach (UCTabItemWithClose item in m_Parent.Items)
{
if (m_Parent.Items.Count <= criticalCount)
{
item.Width = m_ConventionWidth;
}
else
{
item.Width = perWidth;
}
}
}
//页面加载事件
private void TabItem_Loaded(object sender, RoutedEventArgs e)
{
//找到父级
m_Parent = FindParentTabControl(this);
if (m_Parent != null)
Load();
}
/// <summary>
/// 递归找父级TabControl
/// </summary>
/// <param name="reference">依赖对象</param>
/// <returns>TabControl</returns>
private TabControl FindParentTabControl(DependencyObject reference)
{
DependencyObject dObj = VisualTreeHelper.GetParent(reference);
if (dObj == null)
return null;
if (dObj.GetType() == typeof(TabControl))
return dObj as TabControl;
else
return FindParentTabControl(dObj);
}
/// <summary>
/// Load
/// </summary>
private void Load()
{
//约定的宽度
double.TryParse(m_Parent.Tag.ToString(), out m_ConventionWidth);
//注册父级TabControl尺寸发生变化事件
m_Parent.SizeChanged += m_Parent_SizeChanged;
//自适应
//保持约定宽度item的临界个数
int criticalCount = (int)((m_Parent.ActualWidth - 5) / m_ConventionWidth);
if (m_Parent.Items.Count <= criticalCount)
{
//小于等于临界个数 等于约定宽度
this.Width = m_ConventionWidth;
}
else
{
//大于临界个数 每项都设成平均宽度
double perWidth = (m_Parent.ActualWidth - 5) / m_Parent.Items.Count;
foreach (UCTabItemWithClose item in m_Parent.Items)
{
item.Width = perWidth;
}
this.Width = perWidth;
}
}
/// <summary>
/// 父级TabControl尺寸发生变化
/// </summary>
private void m_Parent_SizeChanged(object sender, SizeChangedEventArgs e)
{
int criticalCount = (int)((m_Parent.ActualWidth - 5) / m_ConventionWidth);
if (m_Parent.Items.Count <= criticalCount)
{
this.Width = m_ConventionWidth;
}
else
{
double perWidth = (m_Parent.ActualWidth - 5) / m_Parent.Items.Count;
this.Width = perWidth;
}
}
在主页面编写调用该用户控件的方法：
//添加选项卡
public static void AddItem(object sender, string trname, UserControl uc)
{
bool bolWhetherBe = false;//是否存在当前选项
//判断当前选项卡的个数是否大于0
if (TC.Items.Count > 0)
{
for (int i = 0; i < TC.Items.Count; i++)
{
if (((UCTabItemWithClose)TC.Items[i]).Name == trname)
{
TC.SelectedItem = ((UCTabItemWithClose)TC.Items[i]);
bolWhetherBe = true;
break;
}
}
//是否存在当前选项
if (bolWhetherBe == false)
{
//创建子选项
UCTabItemWithClose item = new UCTabItemWithClose();//创建子选项
item.Name = trname;//名称
item.Header = string.Format(trname);//标头名称
item.Content = uc;//子选择里面的内容
item.Margin = new Thickness(0, 0, 1, 0);
item.Height = 28;
TC.Items.Add(item);//添加子选项
TC.SelectedItem = item;//选中子选项
}
}
else
{
UCTabItemWithClose item = new UCTabItemWithClose();//创造子选项
item.Name = trname;//名称
item.Header = string.Format(trname);//标头名称
item.Content = uc;//子选择里面的内容
item.Margin = new Thickness(0, 0, 1, 0);
item.Height = 28;
TC.Items.Add(item);
TC.SelectedItem = item;
}
}
在主页面写点击事件来创建选项卡：
UC_AftercarmaintenanceMain myUC_AftercaMain = new UC_AftercarmaintenanceMain();
AddItem(sender, labHospitalWork.Content.ToString() + "菜单", myUC_AftercaMain);
效果图：