实现一个浏览器

本文介绍了浏览器的基础构成,包括搜索栏、标签栏和内容栏,以及超链接功能。通过代码示例展示了浏览器界面的实现,提供了标签页的XAML代码,并提供了源码链接供进一步学习。
摘要由CSDN通过智能技术生成

一个浏览器的基本组成为:搜索栏、标签栏和内容栏,然后再是里面页面的超链接功能,如下图是浏览器的界面

这是基本界面在这里插入图片描述
接着就是现实部分的代码了:
下面展示一些 内联代码片
这是标签页的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 
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值