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

最新推荐文章于 2021-03-21 09:11:14 发布

Old Tony

最新推荐文章于 2021-03-21 09:11:14 发布

阅读量2.9w

点赞数

文章标签：界面设计

本文链接：https://blog.youkuaiyun.com/weixin_44469024/article/details/99621167

版权

本文分享了使用WPF技术复刻迅雷U享版界面的过程，详细介绍了界面设计、按钮样式定义及资源字典的应用，实现了按钮点击切换界面的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

文章的下载链接:https://download.youkuaiyun.com/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="&#xe736;" 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="&#xe643;" 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="&#xe611;" 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="&#xE603;" 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
            };
        }