一个浏览器的基本组成为:搜索栏、标签栏和内容栏,然后再是里面页面的超链接功能,如下图是浏览器的界面
接着就是现实部分的代码了:
下面展示一些 内联代码片
。
这是标签页的xaml代码,
// A code block
var foo = 'bar';
// An highlighted block
TabItem x:Class="SmallTools.UI.MainWindow.UCTabItemWithClose"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="TabItem_Loaded">
<TabItem.Resources>
<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 >
<!--<Ellipse Width="15" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"></Ellipse>-->
<TextBlock x:Name="text" FontSize="15" Foreground="White" HorizontalAlignment="Right" Margin="3" VerticalAlignment="Center" Width="Auto">
<Image Width="14" Height="14" Margin="0,0,0,0">
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<DrawingGroup ClipGeometry="M0,0 V1024 H1024 V0 H0 Z">
<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M1024,1024z M0,0z M927.58,938.86C919.52,938.86,911.44,935.9,905.11,929.94L70.93,143.59C57.76,131.18 57.15,110.44 69.56,97.27 81.97,84.1 102.71,83.49 115.88,95.9L950.07,882.25C963.24,894.66 963.85,915.4 951.44,928.57 944.99,935.41 936.29,938.86 927.58,938.86z" />
<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M1024,1024z M0,0z M93.41,938.86C84.7,938.86 76.01,935.41 69.56,928.57 57.15,915.4 57.76,894.67 70.93,882.25L905.11,95.9C918.28,83.49 939.01,84.1 951.43,97.27 963.84,110.44 963.23,131.17 950.06,143.59L115.87,929.94C109.55,935.91,101.47,938.86,93.41,938.86z" />
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
</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="#FF82B3F7"></Setter>
<Setter Property="Foreground" Value="Black"></Setter>
<Setter Property="Padding" Value="0,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}">
<Border CornerRadius="0,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}"></ContentPresenter>
<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="#FF4D93F3"></Setter>
<Setter Property="Foreground" Value="white"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabItem.Style>
</TabItem>```
之后是实现的后台代码
public partial class UCTabItemWithClose : TabItem
{
public UCTabItemWithClose()
{
InitializeComponent();
}
#region 成员变量
/// <summary>
/// 父级TabControl
/// </summary>
private TabControl m_Parent;
/// <summary>
/// 约定的宽度
/// </summary>
private double m_ConventionWidth = 250;
#endregion
#region 事件
#region loaded
/// <summary>
/// loaded
/// </summary>
private void TabItem_Loaded(object sender, RoutedEventArgs e)
{
//找到父级TabControl
m_Parent = FindParentTabControl(this);
if (m_Parent != null)
Load();
}
#endregion
#region 关闭按钮
/// <summary>
/// 关闭按钮
/// </summary>
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;
//调整剩余项大小
//保持约定宽度item的临界个数
int criticalCount = (int)((m_Parent.ActualWidth - 5) / m_ConventionWidth);
//平均宽度
double perWidth = (m_Parent.ActualWidth