自己动手搭建的一个迅雷界面

为了对自己所学知识能够熟练进行应用，昨天自己做了一个迅雷界面。

文章的下载链接:https://download.csdn.net/download/weixin_44469024/11558390
界面最终效果效果如下:

首先在VS里面导入DMSkin资源集，在主界面中用DMSkin1替换Window并且让DMSkin1继承自DMSkinSimpleWindow。再次完成了无边框的界面创建。
左下角图片为动态图片，如何引用请查看我的文章。
搭建界面主要分为三步：

先将主界面分为两列，在第一列加载按钮，在第二列加载界面。
因为按钮“正在下载” “已完成” “回收站”按钮样子相同，因此可以创建资源集合让这三个按钮引用同一个资源。
创建Page界面以便可以响应按钮的点击事件，进行界面之间的切换。

分布解释主窗口的界面设计：

先将整个界面分为两列

     <Grid.ColumnDefinitions><ColumnDefinition Width="250"/><ColumnDefinition/></Grid.ColumnDefinitions>

一列的设计
2. 设置第一列背景颜色渐变

         <Grid.Background><LinearGradientBrush  StartPoint="0,0" EndPoint="1,0"><GradientStop Color="#000080" Offset="0"/><GradientStop Color="#6495ED" Offset="0.5"/><GradientStop Color="#00BFFF" Offset="1"/></LinearGradientBrush></Grid.Background>

3.对界面标题进行设置：

          <StackPanel Orientation="Horizontal"><TextBlock FontFamily="{StaticResource IconFont}" Text="" FontSize="30" Margin="3" Foreground="#FFDEAD"></TextBlock><TextBlock Text="迅雷U享版" FontSize="25" Foreground="#FFDEAD" VerticalAlignment="Center"></TextBlock></StackPanel>

4.头像和人物信息的设置

         <StackPanel Grid.Row="1"><Ellipse Width="80" Height="80" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="83,9,87,21"><Ellipse.Fill><ImageBrush ImageSource="Images/7.jpg"></ImageBrush></Ellipse.Fill></Ellipse><TextBlock Style="{StaticResource TextBlockStyle1}" Text="阿迅"></TextBlock><StackPanel Orientation="Horizontal"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="50"/><ColumnDefinition Width="45"/><ColumnDefinition Width="10"/><ColumnDefinition Width="auto"/><ColumnDefinition /></Grid.ColumnDefinitions><TextBlock Grid.Column="1" Text="VIP 6" Style="{StaticResource TextBlockStyle1}" Background="Red"></TextBlock><TextBlock Grid.Column="3" Text="年" Style="{StaticResource TextBlockStyle1}" Background="Red"/></Grid><TextBlock Style="{StaticResource TextBlockStyle1}" Text="活动中心"/></StackPanel></StackPanel>

将图标与按钮封装在一个按钮下，以便能在资源字典中对按钮模板事件就行定义，图标按钮做出相同反应。

              <Button Style="{StaticResource ButtonStyle1}" Grid.Row="0" Name="btn_load" Click="Btn_load_Click"><StackPanel Orientation="Horizontal"><TextBlock FontSize="25" Canvas.Left="55" Canvas.Top="145" FontFamily="{StaticResource IconFont}" Text="" VerticalAlignment="Center"/><Button Canvas.Left="70" Canvas.Top="20" Style="{StaticResource ButtonStyle1}" Content="正在下载"/></StackPanel></Button><Button Style="{StaticResource ButtonStyle1}" Grid.Row="1" Name="btn_finished" Click="Btn_finished_Click"><StackPanel Orientation="Horizontal"><TextBlock FontSize="25" Canvas.Left="55" Canvas.Top="145" FontFamily="{StaticResource IconFont}" Text="" VerticalAlignment="Center"/><Button Canvas.Left="70" Canvas.Top="20" Style="{StaticResource ButtonStyle1}" Content="已完成"/></StackPanel></Button><Button Style="{StaticResource ButtonStyle1}" Name="btn_clear" Click="Btn_clear_Click"><StackPanel Orientation="Horizontal"><TextBlock FontSize="25" Canvas.Left="55" Canvas.Top="145" FontFamily="{StaticResource IconFont}" Text="" VerticalAlignment="Center"/><Button Canvas.Left="70" Canvas.Top="130" Style="{StaticResource ButtonStyle1}" Content="回收站"/></StackPanel>

加载"下载"的动态图片

 <Image gif:AnimationBehavior.SourceUri="Images/download.gif" />

二列的设计

将第二列分为两行，第一列第一行中加载图标按钮，第二列加载界面.

三创建资源字典

在资源字典中设计按钮界面和按钮的点击事件

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><FontFamily x:Key="IconFont">/Resocures/#iconfont</FontFamily><!--字体图标设置--><Style x:Key="TbkIconStyle" TargetType="{x:Type TextBlock}"><Setter Property="FontSize" Value="20"/></Style><Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"><Setter Property="Foreground" Value="#98F5FF"/><Setter Property="BorderThickness" Value="0"/><Setter Property="Padding" Value="40,15,40,15"/><Setter Property="VerticalContentAlignment" Value="Center"/><Setter Property="HorizontalContentAlignment" Value="Center"/><Setter Property="Background" Value="#000080"/><Setter Property="FontSize" Value="25"/><Setter Property="Margin" Value="10"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="True" Background="{TemplateBinding Background}"><ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"RecognizesAccessKey="True"></ContentPresenter></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="true"><Setter Property="Foreground" Value="#FFEBCD"/></Trigger><Trigger Property="IsPressed" Value="True"><Setter Property="Foreground" Value="#FFEBCD"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><Style x:Key="TextBlockStyle1" TargetType="{x:Type TextBlock}"><Setter Property="HorizontalAlignment" Value="Center"/><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="Foreground" Value="#FFEBCD"/><Setter Property="Cursor" Value="Hand"/><Setter Property="FontSize" Value="15"/><Setter Property="Margin" Value="5"/></Style>
</ResourceDictionary>

四自己可以根据自己的喜好对正在下载，已完成，回收站进行设计。

将界面添加到主窗体中

分别对正在下载，已完成，回收站添加点击事件，在点击事件中对窗口进行实例化。就可以实现界面之间的切换

        private void Btn_load_Click(object sender, RoutedEventArgs e){Load load = new Load();Change_Page.Content = new Frame{Content = load};}

自己动手搭建的一个迅雷界面相关推荐

vuejs 和 element 搭建的一个后台管理界面【收藏】
介绍: 这是一个用vuejs2.0和element搭建的后台管理界面. 相关技术: vuejs2.0:渐进式JavaScript框架,易用.灵活.高效,似乎任何规模的应用都适用. element:基于 ...
vuejs 和 element 搭建的一个后台管理界面
介绍: 这是一个用vuejs2.0和element搭建的后台管理界面. 相关技术: vuejs2.0:渐进式JavaScript框架,易用.灵活.高效,似乎任何规模的应用都适用. element:基于 ...
自己动手搭建一个简单的静态资源服务器
文章目录自己动手搭建一个简单的静态资源服务器介绍一.设计到的模块备注: 二.代码结构三.具体代码自己动手搭建一个简单的静态资源服务器介绍通过此文章的学习,可以自己使用NodeJs搭 ...
运用PyTorch动手搭建一个共享单车预测器
本文摘自 <深度学习原理与PyTorch实战> 我们将从预测某地的共享单车数量这个实际问题出发,带领读者走进神经网络的殿堂,运用PyTorch动手搭建一个共享单车预测器,在实战过程中掌握神 ...
动手搭建自己的本地测试服务器
动手搭建自测服务器,加快本地开发进度,最近自己在开发过程中有这么一个需求,在开发本地应用模块过程中,需要请求服务器测试服务器,但是服务器老出问题,于是就有自己本地搭建一个服务器的一个想法,然后配置接口 ...
自己动手搭建搜索工具
自己动手搭建搜索工具作者白宁超 2016年4月12日16:31:48 摘要:搜索已经作为生活中不可缺少的一部分,诸如:百度.google.还是在微信上寻找好友或者通过一段文本查找关键字.另外亚马逊 ...
自己动手搭建网站：域名和云服务器选购
系列文章:自己动手搭建网站系列总目录目录 1.引言 2.域名选购 3.云服务器选购 3.1选购云服务器 3.2配置安全组规则 4.参考资料 1.引言注意:现在的网站要进行"双备案&quo ...
动手搭建安卓开发环境
2014已经快到尾声,2015即将来临.要问到如今最流行的手机操作系统,那就非安卓莫属了.手机作为用户粘合度最大的一种电子产品,早已成为各大厂商的兵家必争之地,所以安卓的炙手可热也是必然的.作为用户最 ...
因买不到RTX 3090，小哥自己搭建了一个专业级机器学习工作站
点击上方"AI遇见机器学习",选择"星标"公众号重磅干货,第一时间送达来自|知乎作者|Emil Wallner 来源 AI科技评论编辑丨极市平台极 ...

自己动手搭建的一个迅雷界面

自己动手搭建的一个迅雷界面相关推荐

最新文章

热门文章