然后我们新建一个文件夹pages,并在里面新建两个Page,来展示导航的效果。其中文件结构,Page1代码和
Page2的代码截图如下所示:
Page1.xaml:
<Page x:Class="Navigatetest.pages.Page1"
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:Navigatetest.pages"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400"
Title="页面一">
<Label>这是页面一</Label>
</Grid>
</Page>
Page2.xaml:
<Page x:Class="Navigatetest.pages.Page2"
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:Navigatetest.pages"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400"
Title="页面二">
<Label>这是页面二</Label>
</Grid>
</Page>
然后在Mainwindow中添加两个button响应函数,在每个函数中让Frame调用相应的Uri来实现页面的导航,代码如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace Navigatetest
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
private Dictionary<string, Uri> allViews = new Dictionary<string, Uri>(); //包含所有页面
public MainWindow()
InitializeComponent();
//添加页面的Uri地址,采用相对路径,根路径是项目名,实现allViews的初始化
allViews.Add("page1",new Uri("pages/Page1.xaml",UriKind.Relative));
allViews.Add("page2",new Uri("pages/Page2.xaml",UriKind.Relative));
*页面一按钮的响应事件函数,实现导航到page1
public void page1Button(object sender, RoutedEventArgs e)
mainFrame.Navigate(allViews["page1"]); //Frame类的导航函数,参数时页面的Uri
*页面二按钮的响应事件函数,实现导航到page2
public void page2Button(object sender,RoutedEventArgs e)
mainFrame.Navigate(allViews["page2"]); //Frame导航函数,导航到page2
效果截图如下:
点击按钮页面一后:
点击按钮页面二后:
wpf中要实现导航可以用Frame的Navigate函数实现,Navigate直译就是导航的意思。Navigate的参数是Uri类,指向page类的uri地址。下面我将用一个小例子来说明用法。首先,先新建一个wpf项目,然后再MainWindow中添加两个button和一个Frame,其中的布局代码如下所示:&lt;Window x:Class="Navigatetest.MainWindow"...
在程序开发中,经常用到导航菜单功能,先开发带图标和单选项功能。
按照这样的思路,可以用RadioButton单选按钮进行封装,菜单按钮有图标,图标宽度,图标高度,鼠标移动到菜单背景颜色,按下背景颜色,选中颜色。以及菜单数据,例如菜单ID,路径,参数等。
先运行软件演示下效果:
菜单按钮高度和宽度是60,图标高度和宽度是35,光标是选中样式。
<Style TargetType="{x:Type nb:NbNavMenuItem}">
<Setter Prope
表示包含多个项的控件,这些项共享屏幕上的同一空间。
TabControl有助于最大程度地减少屏幕空间使用量,同时允许应用程序公开大量数据。TabControl包含共享同一屏幕空间的多个TabItem对象。一次只能看到TabControl中的一个TabItem。当用户选择的TabItem选项卡时,将显示TabItem的内容,并且隐藏其他TabItem对象的内容。
TabControl为ItemsControl,这意味着它可以包含任何类型的对象的集...
这次我们将利用RadioButton自定义模板实现图文按钮的效果,其中图标采用阿里巴巴图标库,从网上下载阿里巴巴图标库的ttf文件,并导入到项目中备用。
然后我们编写前端代码
<UniformGrid Columns="4" Height="40" Width="400">
<RadioButton Style="{StaticResource defaultRadioStyle}">
<StackPanel Orientation="Horiz.
最近看到一个比较漂亮的UI主界面,该UI是用左边的页签进行导航,比较有特色,就想着尝试用WPF来实现一下。经过一番尝试,基本上将UI设计图的效果用WPF程序进行了实现。下面介绍一下主要的思路:
1 UI设计
该UI的PSD设计图效果如下:
UI结构分析:先可以把UI分成上下两个区域,上面是一个区域放置一些appName,用户信息和配置按钮等,下面的再分成竖向的页签导航区域...
WPF 2015 左侧导航是WPF 2015界面设计中常见的一种布局方式,它通常被用于显示一个应用程序中不同功能模块的导航菜单和相关信息。左侧导航的优点在于它可以在有限的空间内展示大量的内容,同时能够将相关的信息和功能模块集中在一个地方,提高用户使用的效率。
在WPF 2015 左侧导航的实现中,可以使用许多不同的控件来实现。比如说,可以使用TreeView控件来表示不同的菜单项,使用Expander控件来实现可伸缩的菜单入口,使用ListBox控件来呈现一组相关信息等等。此外,在应用程序设计的过程中,设计师还需要考虑到如何给左侧导航添加视觉效果,比如选中状态的不同颜色、悬停状态下的边界变化等等,以提高用户的使用体验。
总的来说,WPF 2015 左侧导航是一个常见且实用的布局方式,可以方便地展示应用程序中的不同功能模块和相关信息,并提高用户的使用效率。