-
2021-02-01 17:35:14
WPF实现窗口内页面跳转
利用WPF中的Frame控件和Page类实现窗口内的页面跳转。下面我们基于上一篇介绍的菜单栏实现窗口内的页面跳转。
步骤
第一步,基于原有菜单栏的xaml代码,在MainWindow.xaml中添加Frame控件
<Window ...> <Grid> ... <Frame x:Name="mainframe" Grid.Row="1" NavigationUIVisibility="Hidden"></Frame> </Grid> </Window>
第二步,新建页面PageIndex,PageLight,PageCamera,PagePlc,PageMes,PageHelp。
第三步,修改MainWindow.xaxml.cs中的菜单栏响应函数
在菜单栏的响应函数中,将page的内容传给Frame。如下,在首页和帮助的响应函数中实例化了页面类赋值给mainframe的内容。
MainWindow.xaxml.cs文件:
... namespace wpfbase { public partial class MainWindow : Window { PageIndex pageindex; PageHelp pagehelp; ... private void IndexClick(object sender, RoutedEventArgs e) { if(pageindex == null) pageindex = new PageIndex(); mainframe.Content = pageindex; } ... private void HelpClick(object sender, RoutedEventArgs e) { if(pagehelp == null) pagehelp = new PageHelp(); mainframe.Content = pagehelp; } } }
第四步,为PageIndex,PageLightSet,PageCameraSet,PagePlcSet,PageMesSet,PageHelp等页面添加页面内容
PageIndex.xaml:
<Page x:Class="wpfbase.PageIndex" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:wpfbase" mc:Ignorable="d" d:DesignHeight="325" d:DesignWidth="525" Title="PageIndex"> <Grid> <TextBox>这里是首页!</TextBox> </Grid> </Page>
PageHelp.xaml:
<Page x:Class="wpfbase.PageHelp" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:wpfbase" mc:Ignorable="d" d:DesignHeight="325" d:DesignWidth="525" Title="PageHelp"> <Grid> <TextBox>这里是帮助文档</TextBox> </Grid> </Page>
第五步,在MainWindow.xaml.cs中实例化页面,将首页内容传至Frame
... public MainWindow() { InitializeComponent(); pageindex = new PageIndex(); mainframe.Content = pageindex; } ...
第六步,为PageIndex,PageLightSet,PageCameraSet,PagePlcSet,PageMesSet,PageHelp等页面添加返回按钮
PageIndex.xaml例
<Page x:Class="wpfbase.PageIndex" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:wpfbase" mc:Ignorable="d" d:DesignHeight="325" d:DesignWidth="525" Title="PageIndex"> <DockPanel> <TextBox DockPanel.Dock="Top">这里是首页!</TextBox> <Button Content="返回" Click="GoBack"/> </DockPanel> </Page>
第七步,为PageIndex,PageLightSet,PageCameraSet,PagePlcSet,PageMesSet,PageHelp等页面添加返回按钮响应函数
PageIndex.xaml.cs例
... public partial class PageIndex : Page { public PageIndex() { InitializeComponent(); } private void GoBack(object sender, RoutedEventArgs e) { if(NavigationService.GetNavigationService(this).CanGoBack) NavigationService.GetNavigationService(this).GoBack(); } } ...
效果如下:
wpf窗口内页面跳转
更多相关内容 -
WPF实现有动画效果的页面切换
2019-01-19 08:46:00WPF实现有动画效果的页面切换 -
WPF模拟翻书页面效果
2018-10-09 11:39:36WPF模拟翻书页面效果,像一本书翻开的界面效果,有动态效果,能左右翻页 -
Wpf 动画加载页面
2017-09-22 15:24:28wpf 简单的实现页面动画加载效果 wpf 简单的实现页面动画加载效果 wpf 简单的实现页面动画加载效果 wpf 简单的实现页面动画加载效果 wpf 简单的实现页面动画加载效果 -
WPF页面动画效果切换
2018-10-18 21:41:15在WPF中,动画是通过故事板(Storyboard)创建的。定义动画的最好方法是使用Expression Blend这样的设计器。但我,对,就是我,只用了短短几行代码就实现了动画的切换效果。当然这效果是比较简单的淡入淡出。如果想...我先介绍我当时的目的,最开始的时候,我主要是想做一个窗口,这个窗口大概有三个界面,为提高逼格,突发奇想到这三个界面能不能动态切换,于是便有了这篇文章。
在WPF中,动画是通过故事板(Storyboard)创建的。定义动画的最好方法是使用Expression Blend这样的设计器。但我,对,就是我,只用了短短几行代码就实现了动画的切换效果。当然这效果是比较简单的淡入淡出。如果想做一个完美的动画,建议移步Expression Blend。因为前几个页面有写见不得人的东西,所以就不放出来了,就放一个动画效果吧。。。。
实现动画效果要用到一个非常重要的对象就是Storyboard。在Storyboard对象中包含一个非常重要的时间线(Timeline),时间线可让应用程序的任何元素中类型为Double,Point,或Color的属性产生动画。本动画效果就是基于这个理论的。
要实现页面逐渐消失或逐渐呈现,主要改变的是Opacity的属性,令Opacity由1.0-0.0或0.0-1.0逐渐改变就可以实现。基于这种思想,就可以很容易实现了。
我主要使用的是时间线控件——DoubleAnimation(因为Opacity的属性是Double),其他更多控件,详见https://docs.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/ms614242%28v%3dvs.95%29其中已经给出了详细用法,定义时间线可以用代码或XMAL来实现,因为我主张代码逻辑与界面应该能分开就分开,所以我用的是XAML,代码实现见上链接。
首先,创建一个wpf项目,然后往解决方案添加三个Page(页面)。好,这是第一步,准备好之后就可以实现动画了,每一个Page都可以做一个动画,本文就只拿一个Page做演示,打开Page的XAML如下:
往下添加如下代码
<Grid.Background> <ImageBrush ImageSource="/MesSystemForPc;component/HelpFormImage/blue.jpg" Stretch="Fill"/><!--我弄的把一张名为blue的图片当作背景--> </Grid.Background> <Grid.RowDefinitions> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="*"></RowDefinition> </Grid.RowDefinitions>
加上上面代码后界面变成这样,然后你自己拖个button进去,待会要用到
然后就到高潮了,动画的制作添加如下代码(x:Key="LastPageClose"是唯一标识,等会按键触发要用到,Storyboard.TargetName="page1":设置对象,这里要把对象设为这个Page,就是这个page的名字 Storyboard.TargetProperty="Opacity":要变化的属性 Duration="00:00:1.5" :时间线,表示从0秒到1.5秒 From="1.0" To="0.0":from....to...是变化范围,表示从1变到0.
<Page.Resources> <Storyboard x:Key="LastPageClose"> <DoubleAnimation Storyboard.TargetName="LastPageName" Storyboard.TargetProperty="Opacity" Duration="00:00:1.5" From="1.0" To="0.0"/> </Storyboard> </Page.Resources>
接下来就是触发动画了
private void button_Click(object sender, RoutedEventArgs e) { BeginStoryboard(Resources["LastPageClose"] as System.Windows.Media.Animation.Storyboard);//引用前面定义的资源(Resources),触发故事板 }
接下来你就可以看到最开始的动画了。
如果你觉得有用,点个赞给个关注呗,不懂得可以问哦,嘤嘤
-
WPF页面搭建
2020-12-04 22:25:44在WPF项目中,页面布局其实并不是很难,只要规划好页面的布局格式就很好搭建了,使用页面布局控件去自由搭建(布局控件:是可以容纳多个控件或者嵌套其他布局的控件,用于在UI上组织和排列控件,Grid、StackPanel、...在WPF项目中,页面布局其实并不是很难,只要规划好页面的布局格式就很好搭建了,使用页面布局控件去自由搭建(布局控件:是可以容纳多个控件或者嵌套其他布局的控件,用于在UI上组织和排列控件,Grid、StackPanel、DockPanel等控件都属此类,它们拥有共同的父类 为Panel。)你可以把控件想象成一个容器,容器里装的东西就是它的内容。控件的内容可以直接是 数据,也可以是控件。当控件的内容还是控件的时候就形成了控件的嵌套。我们把被嵌套的 控件称为子级控件,这种控件嵌套在UI布局时尤为常见。因为允许控件嵌套,所以WPF的 UI会形成一个树形结构。
如图中的样式排布,被分成了三行,可以自己定义想要的内容和效果,分成三行后,我没有用到列去定义它们的列宽,而是用了画布排布的方式设置了左右的距离来变换设定它们相对的位置,从而达到了我自己所需要的效果。下图还有一个动画效果,当鼠标移入图标的时候会发生一个放大的效果,是指定由开始值到达结束值所需的时间,便可形成一个简单的动画。由于图中的图标有七个,所以样式的话是统一的时候可以用到资源样式,目的为了实现对象的重复使用,有助于应用维护的一致性。
下面的代码是,定义动画效果的页面资源代码,页面资源需要用到K值,是为了当你锁定你所需要的样式,在当前的页面中哪个地方需要用到这个样式的话就可以把K值绑定上去就可以了,这里用到的是从一个值突然变成另一值的动画(关键帧动画),当我的鼠标移入到图标的时候图标就用0.2秒从宽高100的放大成了,宽高105的图标,鼠标出来之后图标又缩小成了宽高100的值,在这个效果下,图标就形成了一种动画效果。
Storyboard是动画的基本单位,控制动画的播放,停止,暂停等操作,动画声明过之后,需要使用EventTrigger(事件触发器)触发。<UserControl.Resources> <Style x:Key="de" TargetType="Button"> <Setter Property="Cursor" Value="Hand"/> <Style.Triggers> <Trigger Property="IsMouseOver" Value="False"/> //鼠标移入 <EventTrigger RoutedEvent="MouseEnter"> <BeginStoryboard> <Storyboard> <DoubleAnimation To="105" Duration="0:0:0.2" Storyboard.TargetProperty="Width"/> <DoubleAnimation To="105" Duration="0:0:0.2" Storyboard.TargetProperty="Height"/> </Storyboard> </BeginStoryboard> </EventTrigger> //鼠标离开 <EventTrigger RoutedEvent="MouseLeave"> <BeginStoryboard> <Storyboard> <DoubleAnimation To="100" Duration="0:0:0.2" Storyboard.TargetProperty="Width"/> <DoubleAnimation To="100" Duration="0:0:0.2" Storyboard.TargetProperty="Height"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Style.Triggers> </Style> </UserControl.Resources>
-
WPF页面淡出淡入切换效果
2011-09-04 11:15:15WPF页面淡出淡入切换效果 WPF页面淡出淡入切换效果 -
WPF 页面切换
2021-04-28 03:39:45一、最终实现效果 点击主页按钮之后,会弹出一个页面,点击其他按钮之后,又会出现不同的页面,真正实现扁平化设计。 二、新建一个Page页面 新建好Page之后,可以在页面自由发挥你要实现的页面样式...一、最终实现效果
点击主页按钮之后,会弹出一个页面,点击其他按钮之后,又会出现不同的页面,真正实现扁平化设计。
二、新建一个Page页面
新建好Page之后,可以在页面自由发挥你要实现的页面样式和功能。
三、添加ContentControl
在你想要切换页面的地方添加这一句:<ContentControl x:Name="Page_Change" VerticalAlignment="Top" HorizontalAlignment="Center" Height="908"
-
WPF页面嵌套
2019-06-17 19:56:35在WPF中如何把一个页面嵌套在一个床口中呢? 首先要创建一个用户控件,把要嵌套的内容写到用户控件中。 然后在主窗口中放一个按钮和选项卡设置好样式,给窗口一个加载事件、给按钮一个点击事件 再声明一个全局变量... -
WPF效果.zip
2019-08-07 09:56:42WPF特效,3D相册效果,wpfbagotricks,WPFImitate3D,WPFPictureRolling,WPFTheSlidingSwitch 可以查看效果,瀑布流效果,页面跳转特效等 -
WPF超炫效果
2014-04-15 14:15:48Follow The Pointer 是开发WPF 动画的比较好的实例,通过了解其代码,你可以轻松构建属于你自己的WPF 动画 -
WPF 简单实现上下伸缩面板效果
2017-02-28 17:16:31WPF上下伸缩面板效果,简单代码实现,改进一下可变为左右,初学WPF,只是一种思路。 -
WPF页面动态生成
2019-06-23 14:41:08页面初始化与动态加载 -
Wpf拖拽滑动效果
2014-09-25 22:52:25类似平板电脑上拖动页面,在windows下,可以用鼠标拖动,来达到效果 -
WPF动画效果
2017-07-28 10:42:04以下是常用的几种简单动画效果,首先需要添加引用:using System.Windows.Media.Animation; 1、WPF位置动画(.cs代码): ThicknessAnimation marginAnimation = new ThicknessAnimation(); marginAnima -
WPF气泡样式弹窗效果代码分享
2021-01-02 04:43:25页面设计需求,做了一个气泡形状的弹出框,效果如下: 设计思路如下: 1. 使用Path绘制气泡的尖尖,将这个放到顶层; 2. 在用border绘制长方形框,将这个放到底层,并且设置Margin值,使得Path图层和border看... -
WPF登陆页面
2021-11-07 20:16:47效果图: 第一步:我们需要在客户端搭建一个登陆页面,使用Grid网格布局,和或者标签和,然后添加它们所需要的样式(Style) 第二步:在数据库里面写上查询语句,查询出你所需要的数据。(用户ID,用户账号,用户... -
WPF页面切换源码下载
2011-08-01 10:50:40WPF页面切换源码 本文包括以下内容: 1. 如何实现Page切换 2. 如何为Page增加淡入淡出(Fade)效果 3. 示例 4. 下一步 如何实现Page切换 从MFC到Winform几乎切换方式是一致的,找到一个容器,然后将Dialog或是User... -
WPF 页面切换效果
2018-08-14 10:02:00WPF 页面切换效果 原文:WPF 页面切换效果最近做一个有页面切换的吧.. ...因为Demo中是带了淡入淡出的页面效果的.. 我就想研究一下这个效果是怎么实现的.. 发现找不到.. 1 public partial ... -
WPF滑动切换效果
2020-08-28 17:38:04最近在学习WPF,看到了动画的使用,就想着做个滑动切换子控件的效果,仅作为学习上手Demo 效果: <Canvas x:Name="testPanel" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="800" >... -
WPF页面布局
2019-05-15 21:42:15开发工具与关键技术:开发工具:VS 关键技术:页面布局 一、 视图效果 二、 代码 泊靠式布局特点: 1、 指定停靠边的控件,会根据定义的顺序占领边角,所有控件绝不会交叠。 2、 填充整个剩余空间 3、 DockPanel... -
wpf 主窗口与页面数据传递(带源码)
2022-07-14 11:47:50使用 get、set的处理方法对页面间的参数进行传递 -
WPF 多层次布局 漂亮的界面
2020-04-27 16:18:26 -
WPF登录页面跳转
2021-01-24 14:41:14在wpf中如何实现登录功能,跳转页面,下面就简单举个例子: 第一步:搭建好登录页面(根据自己的项目内容搭建),我搭建好的如下: 对于新手。我还可以准备了代码,这是页面搭建的代码大体布局(因为代码有点多... -
WPF圆形排版效果显示
2015-06-04 14:49:21使用WPF自定义排版功能,可以实现圆形的排版效果! -
「页面切换」WPF控件库:Newbeecoder.UI 页面切换
2022-03-02 10:16:19WPF MVVM框架实现控件库中页面切换。 -
WPF页面切换之Page与Window
2021-06-19 12:55:37先从基础背景知识说起: 一、Page与Window介绍 1.应用程序GUI的所有内容都...3.在Window下面插入Frame作为容器,再用该Frame包含你的某个Page(***注意:所有的Page都需要容器包含,否则无法进行页面之间的跳转和导航! -
Wpf效果
2019-10-06 10:01:21wpf 提供了可以应用于任何元素的可视化效果,效果的目标是为润色文本、图像、按钮以及其他控件的外观,提供一种简单的声明方法。 wpf常用的效果类如下所示: BlurEffect 模糊元素中的内容 属性包括:Radius、...