基于wpf制作页面

最新推荐文章于 2024-07-07 20:00:00 发布
最新推荐文章于 2024-07-07 20:00:00 发布
阅读量2.4k 收藏 10
点赞数 1
分类专栏： wpf/XAML专题 文章标签： wpf/XAML专题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44548307/article/details/90769592
版权 
开发工具与关键技术：wpf
作者：龙文浩
撰写时间：2019年6月4日

制作一个主页面，需要Grid布局和嵌套的内容，使用Grid布局，把页面分成四个等分，每个等份的高度使用*号来划分：
<Grid.RowDefinitions>




</Grid.RowDefinitions>
在这里插入图片描述
这里有几个动画，开始时，窗体从左边弹跳进来，1.5秒后落到屏幕中间，关闭窗体，窗体像窗帘一样收缩，最后消失不见，嵌套页面放在中间，左边的那些就是图标+文字，如果自己去画几何体，画得不好看，最后是使用ps制作成小图标，或有些在网上找得到的图标，按照冷色调搭配上去即可，既然是中国电信的系统，那放置的图标工具，尽量符合主题就行了：
在这里插入图片描述
在页面的头部，需设置下面几个属性，设置好这几个属性，就是让窗体本身透明，其实还是存在的，只是让它看不见，然后主题内容弹跳进来，就感觉看到窗体弹跳进来一样的了：
Foreground="{x:Null}"
Background="{x:Null}"
Icon="/_2Image/0052.png"
AllowsTransparency=“True”
WindowStartupLocation=“CenterScreen”
Loaded=“Window_Loaded”
Title=“MainWindow”
Width=“1286” Height=“728” x:Name=“Window_1”
然后，下面是窗体的代码，窗体的代码主要使用的是网格布局，这里面调用的许多的公共资源，这些就需要自己去定义了，由于篇幅的原因，这里就不抛出来了，在窗体的左边那些是用户控件，在页面加载事件的时候嵌套进来的，右边的那张是p过的图片：

<Border.BorderBrush>

</Border.BorderBrush>

        <Grid.RowDefinitions>
            <RowDefinition Height="1.3*"></RowDefinition>
            <RowDefinition Height="0.7*"></RowDefinition>
            <RowDefinition Height="9*"></RowDefinition>
            <RowDefinition Height=".4*"></RowDefinition>
        </Grid.RowDefinitions>
   
        <!--头部`````````````````````````````````````````````````````````````````开始-->
        <Grid Grid.Column="0" >
            <Grid.Background>
                <ImageBrush ImageSource="/_2Image/0049.jpg"></ImageBrush>
            </Grid.Background>
            <Grid.RowDefinitions>
                <RowDefinition Height="7*"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width=".75*"></ColumnDefinition>
                <ColumnDefinition Width="14*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <!--````````````大标题•••开始``````````````-->
            <Image Grid.Column="1" Source="/_2Image\0001.png" HorizontalAlignment="Center" Margin="346.2,0,804,0.2"/>
            <Grid Grid.Row="1" Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="2*"></RowDefinition>
                    <RowDefinition Height="5*"></RowDefinition>
                    <RowDefinition Height="2*"></RowDefinition>
                </Grid.RowDefinitions>
                <TextBlock FontSize="20" VerticalAlignment="Center" HorizontalAlignment="Center"
                       Cursor="Pen" Grid.Row="1" >
                    <TextBlock.Effect>
                        <DropShadowEffect/>
                    </TextBlock.Effect>
                    <TextBlock.Text>
                        中 国 电 信 湖 北 公 司 渠 道 营 销 支 撑 系 统
                    </TextBlock.Text>
                    <TextBlock.Foreground>
                        White
                    </TextBlock.Foreground>
                </TextBlock>
                <Grid Grid.Row="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="1" HorizontalAlignment="Right" Foreground="#FFF9F9F9">面向客户的精确营销支撑平台</TextBlock>
                </Grid>
                <!--•••••••最顶端切换按钮 开始•••••••-->
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Column="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Grid Grid.Column="0" Cursor="Hand" MouseDown="Grid_MouseDown_1">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.2*"></ColumnDefinition>
                                <ColumnDefinition></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Image Source="/_2Image\0000.png" ></Image>
                            <TextBlock Grid.Column="1" Text="切换岗位  |" Foreground="AliceBlue"></TextBlock>
                        </Grid>
                        <Grid  Grid.Column="1"  Cursor="Hand" MouseDown="Grid_MouseDown">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.2*"></ColumnDefinition>
                                <ColumnDefinition></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Image Source="/_2Image\0006.png" ></Image>
                            <TextBlock Grid.Column="1" Text="个人信息  |" Foreground="AliceBlue"></TextBlock>
                        </Grid>
                        <Grid  Grid.Column="2"  Cursor="Hand">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.2*"></ColumnDefinition>
                                <ColumnDefinition></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Image Source="/_2Image\0007.png" ></Image>
                            <TextBlock Grid.Column="1" Text="系统指南  |" Foreground="AliceBlue"></TextBlock>
                        </Grid>
                        <Grid  Grid.Column="3" MouseDown="TextBlock_MouseDown_1" Cursor="Hand">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.2*"></ColumnDefinition>
                                <ColumnDefinition></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Image Source="/_2Image\0023.png" ></Image>
                            <TextBlock Grid.Column="1" Text="最小化  |" Foreground="AliceBlue"></TextBlock>
                        </Grid>
                        <Grid Grid.Column="4" MouseDown="TextBlock_MouseDown_2" Cursor="Hand">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.2*"></ColumnDefinition>
                                <ColumnDefinition></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Image Source="/_2Image\0026.png" ></Image>
                            <TextBlock Grid.Column="1" Text="最大化  |" Foreground="AliceBlue"></TextBlock>
                        </Grid>
                        <Grid Grid.Column="5" MouseDown="TextBlock_MouseDown_4" Cursor="Hand">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.2*"></ColumnDefinition>
                                <ColumnDefinition></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Image Source="/_2Image\0027.png" ></Image>
                            <TextBlock Grid.Column="1" Text="还原  |" Foreground="AliceBlue"></TextBlock>
                        </Grid>
                        <Grid Grid.Column="6" MouseDown="TextBlock_MouseDown_3" Cursor="Hand">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.2*"></ColumnDefinition>
                                <ColumnDefinition></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Image Source="/_2Image\0019.png" ></Image>
                            <TextBlock Grid.Column="1" Text="退出  |" Foreground="AliceBlue"></TextBlock>
                        </Grid>

                    </Grid>
                </Grid>
                <!--•••••••最顶端切换按钮 结束•••••••-->
            </Grid>
            <!--````````````大标题•••结束``````````````-->

        </Grid>
        <!--头部`````````````````````````````````````````````````````````````````结束-->
        <!--导航栏•••••••••••••••••••••••••••`````````开始-->
        <Border Grid.Row="1" Grid.Column="0">
            <Border.Background>
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                    <GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="#FF8FB3E7" Offset="0.1"/>
                    <GradientStop Color="#FF5689D8" Offset="0.5"/>
                    <GradientStop Color="#FF87ADE5" Offset="1"></GradientStop>
                </LinearGradientBrush>
            </Border.Background>

            <Grid >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition Width="8*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Button Grid.Column="0" BorderBrush="#fff"  Click="Button_Click"
                    Style="{DynamicResource ButtonAnimation_1}" ToolTip="首页">
                    <Image  Source="/_2Image\0052.png"></Image>
                </Button>
                <Button Grid.Column="1" BorderBrush="#fff" Click="Button_Click_2"
                     Style="{DynamicResource ButtonAnimation_1}" ToolTip="日志与计划">
                    <Image  Source="/_2Image\0054.png"></Image>
                </Button>
                <Button Grid.Column="2" BorderBrush="#fff"  Click="Button_Click_3"
                    Style="{DynamicResource ButtonAnimation_1}" ToolTip="我的工作">
                    <Image  Source="/_2Image\0055.png"></Image>
                </Button>
                <Button Grid.Column="3" BorderBrush="#fff"  Click="Button_Click_1"
                    Style="{DynamicResource ButtonAnimation_1}" ToolTip="划分认领">
                    <Image  Source="/_2Image\0062.png"></Image>
                </Button>
                <Button Grid.Column="4" BorderBrush="#fff"  Click="Button_Click_4"
                    Style="{DynamicResource ButtonAnimation_1}" ToolTip="我的客户">
                    <Image Source="/_2Image\0057.png"></Image>
                </Button>
                <Button Grid.Column="5" BorderBrush="#fff"  Click="Button_Click_5"
                    Style="{DynamicResource ButtonAnimation_1}" ToolTip="查询平台">
                    <Image Source="/_2Image\0095.png"></Image>
                </Button>
                <Button Grid.Column="6" BorderBrush="#fff"  Click="Button_Click_6"
                    Style="{DynamicResource ButtonAnimation_1}" ToolTip="我的报表">
                    <Image Source="/_2Image\0096.png"></Image>
                </Button>
                <Button Grid.Column="7" BorderBrush="#fff"  Click="Button_Click_7"
                    Style="{DynamicResource ButtonAnimation_1}" ToolTip="营销管理">
                    <Image Source="/_2Image\0060.png"></Image>
                </Button>
                <Button Grid.Column="8" BorderBrush="#fff"  Click="Button_Click_8"
                    Style="{DynamicResource ButtonAnimation_1}" ToolTip="商机管理">
                    <Image Source="/_2Image\0061.png"></Image>
                </Button>
                <Button Grid.Column="9" BorderBrush="#fff"  Click="Button_Click_9"
                    Style="{DynamicResource ButtonAnimation_1}" ToolTip="系统管理">
                    <Image Source="/_2Image\0097.png"></Image>
                </Button>
                <Button Grid.Column="10"  
                    Style="{DynamicResource ButtonAnimation_1}" >
                    <Image Source="/_2Image\0066.png"></Image>
                </Button>
            </Grid>
        </Border>
        <!--导航栏•••••••••••••••••••••••••••`````````结束-->
        <!--主页面``````````````````````````````````````````````````````````````````开始-->
        <Grid Grid.Row="2" Grid.Column="0" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"></ColumnDefinition>
                <ColumnDefinition Width="5*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <!--左边菜单栏••••••••••••••••开始-->
            <Grid Grid.Row="0" Grid.Column="0" >

                <StackPanel Name="Grid_1">
                    <StackPanel.Background>
                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                            <GradientStop Color="#FFD6E2F6" Offset="0"/>
                            <GradientStop Color="#FF6295E0" Offset=".5"/>
                            <GradientStop Color="#FF80A8E2" Offset="1"/>
                        </LinearGradientBrush>
                    </StackPanel.Background>

                </StackPanel>
            </Grid>



            <!--左边菜单栏••••••••••••••••结束-->
            <!--右边菜单栏••••••••••••••••开始-->
            <Grid Grid.Column="1"  Style="{DynamicResource GridStyle_1}">
                <ScrollViewer  x:Name="Grid_2">

                </ScrollViewer>
            </Grid>
          
            <!--右边菜单栏••••••••••••••••结束-->
        </Grid>
        <!--主页面``````````````````````````````````````````````````````````````````结束-->
        <!--底部``````````````````````````````````````````````````````````````````开始-->
        <Grid Grid.Row="3">
            <Grid.Background>
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                    <GradientStop Color="#FFB7D0F4" Offset="0"/>
                    <GradientStop Color="#FF437ED4" Offset="0.5"/>
                    <GradientStop Color="#FFB1C9EE" Offset="1"/>
                </LinearGradientBrush>
            </Grid.Background>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"></ColumnDefinition>
                <ColumnDefinition Width="2*"></ColumnDefinition>
                <ColumnDefinition Width="1*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <WrapPanel VerticalAlignment="Center" Orientation="Horizontal" Grid.Column="0">
                <TextBlock Foreground="#FFEAEAEA">系统消息：</TextBlock>
                <TextBlock FontSize="10" Foreground="Beige" >当前版本号 V 1.99.vb.11090.//123sd.aass.//.0vn</TextBlock>
            </WrapPanel>
            <WrapPanel VerticalAlignment="Center" Orientation="Horizontal" Grid.Column="2">
                <TextBlock>
                <Run Text="-----------------------                      中国电信为您服务"  Foreground="Beige"/>
                </TextBlock>
            </WrapPanel>
        </Grid>
        <!--底部``````````````````````````````````````````````````````````````````结束-->
    </Grid>
</Border>

动画资源，自己定义即可，上面是窗体的代码，图片需要自己手动去定义；

龙文浩_
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个漂亮的WPF界面框架
08-06
一个非常漂亮且相当现代化风格的WPF界面框架
WPF非常精美DataGrid界面 WPF漂亮DataGri界面 WPF精美DataGrid可以直接使用在项目当中 快速学习布局的实战例子 全开源代码 经典WPF DataGrid漂亮布局
weijia3624的专栏
12-31 1026
WPF非常精美DataGrid界面 WPF漂亮DataGri界面 WPF精美DataGrid可以直接使用在项目当中 快速学习布局的实战例子 全开源代码 经典WPF DataGrid漂亮布局
【WPF】桌面程序开发之xaml页面基础布局方式详解
最新发布
TA远方
07-07 832
使用Visual Studio开发工具，我们可以编写在Windows系统上运行的桌面应用程序。其中，WPF（Windows Presentation Foundation）项目是一种常见的选择。然而，对于初学者来说，WPF项目中xaml页面的布局设计可能是一个难点...
漂亮的WPF界面 流行的一个界面，向上悬浮的窗口，终于试成功了
oSenLin123456的博客
12-12 834
今天测试一下目前流程的一个界面，向上悬浮的窗口，终于试成功了。目前随便打开个APP，就可以看到一个悬浮的窗口。
WPF基础之界面设计（MaterialDesignThemes）
yigu4011的博客
07-07 5725
1、Nuget安装MaterialDesignThemes框架，安装LiveCharts、LiveCharts.Wpf（用来添加曲线，也可以下载LiveCharts.dll、LiveCharts.Wpf.dll，然后引用DLL）4、在MainWindow.xaml添加MaterialDesignThemes、LiveCharts、LiveCharts.Wpf的引用。5、左边菜单栏关键性代码如下：（全部源码可去上方CSDN代码地址自由下载）
WPF界面设计
知识在于理解,运用在于总结,高阶在于巩固!
05-28 5435
WPF界面设计
C# WPF十个美观的界面设计展示
dotNET跨平台
10-06 1万+
概述 很多时候，我们设计的界面总是感觉缺乏美感，不是我们不会开发好看的界面，而是不知道怎么才算美观，这时候我们不妨看看别人好的页面是怎么做的.下面展示一些我觉得做的比较好的cs界面，希望能给大家在平时做界面设计时提供一些参考和灵感.展示一：权限管理系统效果预览，这是一套权限管理系统来源：https://www.cnblogs.com/zt199510/p/15151835.html展示二：H...
C# CM框架下打造符合MVVM思想的WPF登录窗体
zls365365的博客
03-22 911
概述登录窗体无论在bs还是cs中都很常见，使用winform或者wpf ui进行设计都相对比较简单，但是如果在WPF框架，比如：Caliburn.Micro下，设计一个符合MVVM思想的登录窗体就相对有了点难度，因为CM框架本身的设计理念是VM first而非View first.接下来开始讲解我的设计.后台设计数据模型：定义一个用户登录类，类中囊括三个属性public ...
C# WPF界面软件设计参考 工控机上位机界面 美观炫酷的现代化风格界面设计实际案例分享 界面设计代码
liyu3519的博客
04-16 5371
C# WPF界面设计参考 工控机上位机界面 美观炫酷的现代化风格界面设计实际案例分享 界面设计代码
WPF炫酷界面设计
热门推荐
TERMINATOR-FOR-EVER
08-26 4万+
一.效果展示（多层次） 二.制作流程 1.在vs2012中建立一个wpf程序 2.建立一个主页面（.cs）(注：C#程序每一个页面都由两个文件构成一个axml一个cs，一个前端文件一个后台文件) 3.在主页面中添加按钮，按钮中嵌入图片，这样就可以在在后台动态更改界面显示的效果，每次点击都更改图片，显示出不同的图片 4.在主页面中添加ContentContro控
WPF超酷界面设计
01-11
一款WPF超酷界面设计演示（内含程序源代码）。
WPF漂亮的界面登陆后横向裂开到主界面
12-08
WPF漂亮的界面登陆后横向裂开到主界面
C#WPF 制作的上位机界面通过MODBUS RTU和数码管显示屏通讯
03-14
在本文中，我们将深入探讨如何使用C# WPF技术制作一个上位机界面，并通过MODBUS RTU协议与数码管显示屏进行通信。MODBUS RTU是一种广泛使用的工业通信协议，适用于设备间的串行通信，而数码管显示屏则常用于显示简单...
WPF与WebView2双向通信 WPF发送数据到WebView2显示的网页当中 WPF制作的浏览器与网页双向通信 WPF与网页
12-27
性能优化： 相比于传统的嵌入式浏览器控件，WebView2基于现代的Chromium内核，提供了更好的性能和兼容性。 扩展性： 通过JavaScript接口和消息传递机制，可以轻松地扩展和定制WebView2的功能，满足特定的应用需求。...
WPF左侧漂亮的导航菜单.rar
03-26
"WPF导航"则涉及到在WPF应用中实现页面或视图间的导航，通常通过各种控件如Frame或NavigationWindow实现。 从压缩包中的文件名 "WPFTabNavigation-master" 可以推测，这个项目可能包含了一个基于标签页的导航系统，...
WPF浏览器源码
07-13
本项目是一个基于WPF技术编写的网页浏览器，实现了基本的网页浏览功能。下面将详细探讨这个项目的结构、主要组件以及如何进行扩展。 1. **WPF基础** WPF的设计理念是基于XAML（Extensible Application Markup ...
使用AvalonDock制作WPF多标签浏览器
03-17
这个库基于.NET Framework，并且在CodePlex上可以免费获取，对于想要提升WPF应用UI体验的开发者来说，是一个极具价值的工具。 首先，我们需要理解AvalonDock的核心功能。它提供了浮动、 dockable、tabbed文档和工具...
WPF MVVM框架 漂亮界面风格的WPF 快速入门WPF实例 功能实用架构清晰易入门WPF 界面大方功能实用的WPF教程 WPF实战例子 WPF 简易DEMO
oSenLin123456的博客
06-25 1022
这个例子是一个简单的待办事项列表应用程序，它展示了 WPF 的核心概念和语法。另外，该例子还使用了 MVVM 模式，这是一个常见的 WPF 设计模式。通过这个例子，学习者可以了解 WPF 的核心概念和语法，并且掌握三层架构和 MVVM 设计模式的基本原理。视图负责显示应用程序的界面，模型负责保存数据，逻辑负责实现业务逻辑。WPF 快速开发框架，已经集成多种框架，可以直接修改使用在项目中，是入门及快速实施项目的最佳选择。然而，对于初学者来说，WPF 的概念和语法可能会让人望而却步。
基于wpf 3d开发入门
08-13
基于WPF的3D开发是一种用于创建交互式和具有视觉效果的应用程序的技术。在WPF（Windows Presentation Foundation）中，开发人员可以使用内置的3D功能来创建复杂的3D场景和对象。 要开始基于WPF的3D开发，您首先需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值