SilverLight企业应用框架设计【二】框架画面
框架画面分为上中下三层
由下面一个Grid控件完成布局
<Grid x:Name="LayoutRoot"><Grid.RowDefinitions><RowDefinition Height="60"></RowDefinition><RowDefinition Height="*"></RowDefinition><RowDefinition Height="22"></RowDefinition></Grid.RowDefinitions></Grid>
上层为顶部菜单区域
中层为子菜单和业务画面部分
下层为状态栏和版权信息区域
下面我们分别看一下这三个部分的生成逻辑
一:顶部菜单区域
XAML代码如下:
<StackPanel x:Name="TopMenuS" Orientation="Horizontal" Background="{StaticResource HeadBG}"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="10"></ColumnDefinition><ColumnDefinition Width="142"></ColumnDefinition><ColumnDefinition Width="10"></ColumnDefinition></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="3"></RowDefinition><RowDefinition Height="18"></RowDefinition><RowDefinition Height="18"></RowDefinition><RowDefinition Height="18"></RowDefinition><RowDefinition Height="3"></RowDefinition></Grid.RowDefinitions><TextBlock x:Name="helloBlock" Grid.Column="1" Grid.Row="1" Text="xxxx通信" /><TextBlock x:Name="UserName" Text="Administrator" Grid.Column="1" Grid.Row="2" /><TextBlock Text="欢迎使用 xxx监控系统" Grid.Column="1" Grid.Row="3" /></Grid><Rectangle Width="1" Fill="{StaticResource HeadSplitor}"></Rectangle> <StackPanel><Button Style="{StaticResource ToolBtnStyle}" Content="全部关闭" Click="CloseAllClick"></Button><Button Style="{StaticResource ToolBtnStyle}" Content="关闭当前" Click="CloseCurClick"></Button><Button Style="{StaticResource ToolBtnStyle}" Content="关闭其他" Click="CloseOtherClick"></Button></StackPanel><Rectangle Width="1" Fill="{StaticResource HeadSplitor}"></Rectangle><StackPanel><Button Style="{StaticResource ToolBtnStyle}" Content="修改密码" Click="ChangePSWBtnClick"></Button><Button Style="{StaticResource ToolBtnStyle}" Content="退出系统" Click="LoginOutBtnClick"></Button><Button Style="{StaticResource ToolBtnStyle}" Content="重新登录" Click="ReLoginBtnClick"></Button></StackPanel><Rectangle Width="1" Fill="{StaticResource HeadSplitor}"></Rectangle></StackPanel>
顶部菜单分为三部分
从左向右依次是
欢迎信息(GRID)
顶部菜单(动态创建)
常用按钮(StackPanel)
顶部菜单的容器是一个StackPanel
此容器有一个渐变的背景色,样式代码如下
<!--头部渐变背景--><LinearGradientBrush x:Key="HeadBG" StartPoint="0.5 0" EndPoint="0.5 1"><GradientStop Offset="0" Color="#FAFAFA"></GradientStop><GradientStop Offset="0.5" Color="#D6D6D6"></GradientStop></LinearGradientBrush>
此容器每个部分都有一个Rectangle来分割
此Rectangle也有个渐变的背景,代码如下
<!--头部分隔条渐变背景--><LinearGradientBrush x:Key="HeadSplitor" StartPoint="0.5 0" EndPoint="0.5 1"><GradientStop Offset="0" Color="#FAFAFA"></GradientStop><GradientStop Offset="1" Color="#000000"></GradientStop></LinearGradientBrush>
常用按钮的样式如下:
<!--头部的 三分栏 工具按钮样式--><Style x:Key="ToolBtnStyle" TargetType="Button"><Style.Setters><Setter Property="Width" Value="90"></Setter><Setter Property="Height" Value="20"></Setter><Setter Property="Cursor" Value="Hand"></Setter><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Grid x:Name="Container"><vsm:VisualStateManager.VisualStateGroups><vsm:VisualStateGroup x:Name="CommonStates"><vsm:VisualState x:Name="MouseOver"><Storyboard><DoubleAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/></Storyboard></vsm:VisualState><vsm:VisualState x:Name="Normal" /></vsm:VisualStateGroup></vsm:VisualStateManager.VisualStateGroups><Rectangle x:Name="fillColor" Opacity="0" Fill="#B5B5B5" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/><ContentPresenter x:Name="contentPresenter"Content="{TemplateBinding Content}"ContentTemplate="{TemplateBinding ContentTemplate}"VerticalAlignment="{TemplateBinding VerticalContentAlignment}"HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"Margin="{TemplateBinding Padding}"/></Grid></ControlTemplate></Setter.Value></Setter></Style.Setters></Style>
动态创建顶部菜单的代码如下
(大家先不要深究数据是怎么来的,在以后的章节咱们会讲到数据交互的细节)
var tops = Common.ViewUtility.AllMenu.Where(m => m.ParentId == Guid.Empty).OrderByDescending(m => m.MenuOrder);foreach (var m in tops){var topM = new HeadBtn();topM.DataContext = m;topM.MouseLeftButtonUp += new MouseButtonEventHandler(topM_MouseLeftButtonUp);TopMenuS.Children.Insert(2,topM);}
这里创建的HeadBtn是一个自定义的控件
(每个顶部菜单就是一个控件的实例)
该自定义控件XAML代码如下:
<StackPanel Orientation="Horizontal" Cursor="Hand"><Grid x:Name="btn" Width="90" Height="60"><Grid.RowDefinitions><RowDefinition></RowDefinition><RowDefinition Height="20"></RowDefinition></Grid.RowDefinitions><Image Source="../Images/module2.png" Height="30"></Image><TextBlock Text="{Binding MenuName}" Grid.Row="1" FontSize="12"VerticalAlignment="Center" HorizontalAlignment="Center" ></TextBlock></Grid><Rectangle Width="1" Fill="{StaticResource HeadSplitor}"></Rectangle></StackPanel>
注意,这里每个顶部菜单的ICO图标不是动态的,朋友们,想让他变成动态的就自己动手吧
为了实现美观的效果
我为这个自定义控件定义了鼠标的滑入滑出事件
private void UserControl_MouseEnter(object sender, MouseEventArgs e){var color = Color.FromArgb(255,180, 180, 180);btn.Background = new SolidColorBrush(color);}private void UserControl_MouseLeave(object sender, MouseEventArgs e){btn.Background = new SolidColorBrush(Colors.Transparent);}
这些颜色的值,本应该作为资源放在样式文件中,我这里也没有做处理
二:底部状态条区域
此处比较简单
代码如下:
<StackPanel Width="Auto" Grid.Row="2" Background="#B5B5B5" Orientation="Horizontal" FlowDirection="RightToLeft"><TextBlock VerticalAlignment="Center" Text="V1.0.0 Copy Right © All Rights Reserved"/><TextBlock VerticalAlignment="Center" Text="xxxx"/></StackPanel>
1.我没有做状态信息的内容
2.版本信息应该通过Assambly获取
三:中部区域
XAML代码如下
<Border Grid.Row="1" BorderBrush="#B5B5B5" BorderThickness="0 1 0 0"><Grid Background="#E8E8E8" Margin="0 1 0 0" Name="CenterGrid"><Grid.ColumnDefinitions><ColumnDefinition Width="160"></ColumnDefinition><ColumnDefinition Width="*"></ColumnDefinition></Grid.ColumnDefinitions><StackPanel><sdk:Label Height="26" Background="#b5b5b5" Margin="0 6 0 6"FontWeight="Bold" FontSize="12" x:Name="lblMenuText" HorizontalAlignment="Center" Width="160" /><ListBox SelectionChanged="left_panel_SelectionChanged" ItemContainerStyle="{StaticResource ListBoxItemStyleNew}"Grid.Column="0" x:Name="left_panel" Background="#E8E8E8" BorderThickness="0"><ListBox.ItemTemplate><DataTemplate><ContentPresenter Content="{Binding MenuName}"></ContentPresenter></DataTemplate></ListBox.ItemTemplate></ListBox></StackPanel><sdk:TabControl x:Name="tbControl" SelectionChanged="tbControl_SelectionChanged" Grid.Column="1" Margin="0 6 0 0"></sdk:TabControl></Grid></Border>
其中Label控件显示的为顶部菜单的标题,标志着当前选中的是哪个顶部菜单
ListBox为子菜单控件
TabControl为业务画面区域
四:子菜单区域
子菜单样式相对复杂些
样式代码如下
<!--子菜单样式--><Style TargetType="ListBoxItem" x:Key="ListBoxItemStyleNew" ><Setter Property="Padding" Value="3" /><Setter Property="HorizontalContentAlignment" Value="Center" /><Setter Property="VerticalContentAlignment" Value="Center" /><Setter Property="Background" Value="Transparent" /><Setter Property="BorderThickness" Value="1"/><Setter Property="TabNavigation" Value="Local" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ListBoxItem"><Grid Background="{TemplateBinding Background}"><vsm:VisualStateManager.VisualStateGroups><vsm:VisualStateGroup x:Name="CommonStates"><vsm:VisualState x:Name="Normal" /><vsm:VisualState x:Name="MouseOver"><Storyboard><DoubleAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity" Duration="0" To=".35"/></Storyboard></vsm:VisualState><vsm:VisualState x:Name="Disabled"><Storyboard><DoubleAnimation Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To=".55" /></Storyboard></vsm:VisualState></vsm:VisualStateGroup><vsm:VisualStateGroup x:Name="SelectionStates"><vsm:VisualState x:Name="Unselected" /><vsm:VisualState x:Name="Selected"><Storyboard><DoubleAnimation Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity" Duration="0" To=".75"/></Storyboard></vsm:VisualState></vsm:VisualStateGroup><vsm:VisualStateGroup x:Name="FocusStates"><vsm:VisualState x:Name="Focused"><Storyboard><ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility" Duration="0"><DiscreteObjectKeyFrame KeyTime="0"><DiscreteObjectKeyFrame.Value><Visibility>Visible</Visibility></DiscreteObjectKeyFrame.Value></DiscreteObjectKeyFrame></ObjectAnimationUsingKeyFrames></Storyboard></vsm:VisualState><vsm:VisualState x:Name="Unfocused"/></vsm:VisualStateGroup></vsm:VisualStateManager.VisualStateGroups><Rectangle x:Name="fillColor" Opacity="0" Fill="#B5B5B5" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/><Rectangle x:Name="fillColor2" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/><ContentPresenterx:Name="contentPresenter"Cursor="Hand"Content="{TemplateBinding Content}"ContentTemplate="{TemplateBinding ContentTemplate}"HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"Margin="{TemplateBinding Padding}"/><Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed" RadiusX="1" RadiusY="1" /></Grid></ControlTemplate></Setter.Value></Setter></Style>
这些样式主要是为了实现如下效果
子菜单数据绑定非常简单
(顶部菜单的单击事件将绑定子菜单)
代码如下:
void topM_MouseLeftButtonUp(object sender, MouseButtonEventArgs e){var tBTN = sender as HeadBtn;var tMenu = tBTN.DataContext as MenuM;lblMenuText.Content = tMenu.MenuName;var subs = Common.ViewUtility.AllMenu.Where(m => m.ParentId == tMenu.Id).OrderBy(m => m.MenuOrder);left_panel.ItemsSource = subs;}
五:业务画面区域
业务画面的容器为TabControl
每个TabItem将承载一个业务画面
主要是为TabItem增加关闭按钮
XAML代码如下:
<sdk:TabItem.HeaderTemplate><DataTemplate><StackPanel Orientation="Horizontal" Width="auto" Margin="0 0 -2 -2"><TextBlock x:Name="tboxheader" Text="{Binding}"/><Button Cursor="Hand" Click="CloseBTN_Click" Style="{StaticResource ListViewHeadBtnStyle}" Margin="3,-3,-6,0" Content="X" ></Button></StackPanel></DataTemplate></sdk:TabItem.HeaderTemplate></sdk:TabItem>
这个关闭按钮的样式比较特殊
<!--标签按钮--><Style x:Key="ListViewHeadBtnStyle" TargetType="Button"><Style.Setters><Setter Property="Width" Value="20"></Setter><Setter Property="Height" Value="20"></Setter><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Grid x:Name="Container"><vsm:VisualStateManager.VisualStateGroups><vsm:VisualStateGroup x:Name="CommonStates"><vsm:VisualState x:Name="Normal" /><vsm:VisualState x:Name="MouseOver"><Storyboard><DoubleAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity" Duration="0" To=".35"/></Storyboard></vsm:VisualState></vsm:VisualStateGroup></vsm:VisualStateManager.VisualStateGroups><Rectangle x:Name="fillColor" Opacity="0" Fill="#B5B5B5" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/><ContentPresenter x:Name="contentPresenter"Content="{TemplateBinding Content}"ContentTemplate="{TemplateBinding ContentTemplate}"VerticalAlignment="{TemplateBinding VerticalContentAlignment}"HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"Margin="{TemplateBinding Padding}"/></Grid></ControlTemplate></Setter.Value></Setter></Style.Setters></Style>
关闭按钮样式主要为了实现如下效果
(鼠标滑上,关闭按钮背景变灰色)
按钮的单击事件如下
private void CloseBTN_Click(object sender, RoutedEventArgs e){var tc = this.Parent as TabControl;tc.Items.Remove(this);}
转载于:https://www.cnblogs.com/liulun/archive/2012/01/04/2312482.html
SilverLight企业应用框架设计【二】框架画面相关推荐
- 视频教程-AssetBundle框架设计_框架篇视频课程-Unity3D
AssetBundle框架设计_框架篇视频课程 二十多年的软件开发与教学经验IT技术布道者,资深软件工程师.具备深厚编程语言经验,在国内上市企业做项目经理.研发经理,熟悉企业大型软件运作管理过程.软件 ...
- .NET框架设计(高级框架架构模式)—钝化程序、逻辑冻结、冻结程序的延续、瞬间转移
1]开篇介绍 这一篇文章我早准备写的,迟迟未写的原因是它过于抽象不太容易表达,也很难掌握:之前对它的理解还处于比较简单的功能性上,但是最近随着对领域驱动设计及架构的研究,设计思想有了一个提升对它的理解 ...
- 智能家居项目(三)之框架设计及框架代码文件工程建立
目录 一.智能家居项目框架设计草图 二.框架代码文件工程建立 三.添加声音识别模块的串口读取功能 一.智能家居项目框架设计草图 代码思路讲解: 1.一个指令工厂,一个控制工厂,实际上就是通过链表链起来 ...
- 视频教程-游戏UI界面框架设计系列视频课程-Unity3D
游戏UI界面框架设计系列视频课程 二十多年的软件开发与教学经验IT技术布道者,资深软件工程师.具备深厚编程语言经验,在国内上市企业做项目经理.研发经理,熟悉企业大型软件运作管理过程.软件架构设计理论. ...
- 视频教程-热更新框架设计之热更流程与热补丁视频课程-Unity3D
热更新框架设计之热更流程与热补丁视频课程 二十多年的软件开发与教学经验IT技术布道者,资深软件工程师.具备深厚编程语言经验,在国内上市企业做项目经理.研发经理,熟悉企业大型软件运作管理过程.软件架构设 ...
- 视频教程-热更新框架设计之客户端热更框架(中部)视频课程-Unity3D
热更新框架设计之客户端热更框架(中部)视频课程 二十多年的软件开发与教学经验IT技术布道者,资深软件工程师.具备深厚编程语言经验,在国内上市企业做项目经理.研发经理,熟悉企业大型软件运作管理过程.软件 ...
- 视频教程-Unity客户端框架设计PureMVC篇视频课程(上)-Unity3D
Unity客户端框架设计PureMVC篇视频课程(上) 二十多年的软件开发与教学经验IT技术布道者,资深软件工程师.具备深厚编程语言经验,在国内上市企业做项目经理.研发经理,熟悉企业大型软件运作管理过 ...
- 视频教程-Unity客户端框架设计PureMVC篇视频课程(下)-Unity3D
Unity客户端框架设计PureMVC篇视频课程(下) 二十多年的软件开发与教学经验IT技术布道者,资深软件工程师.具备深厚编程语言经验,在国内上市企业做项目经理.研发经理,熟悉企业大型软件运作管理过 ...
- Node.js 框架设计及企业 Node.js 基础建设相关讨论
大家好,我是若川.19年我写的 lodash源码 文章投稿到海镜大神知乎专栏竟然通过了,后来20年海镜大神还star了我的博客,同时还转发了我的微博.时间真快啊.今天分享这篇Node.js的讨论. 2 ...
- 使用Qt动画框架设计角色的二维动画(二)
使用Qt动画框架设计角色的二维动画(二) 接上次的 日志. 上次发布demo虽然使用了大量的动画框架.有限状态机框架,但是仍有瑕疵.比如说在用户一直按下按键的时候角色会被"冻"住, ...
最新文章
- 0513JS基础:数组内置方法、数学函数、时间函数
- VC屏幕截图并保存为bmp文件
- 最新OpenSSL漏洞CCS注入及升级修复
- Mac os x下配置nginx + php
- Direct2D的使用
- 让Windows Live Messenger支持多账户登录
- 无人承运平台系统流程图
- 艾宾浩斯记忆表格excel_Excel全年学习复习计划表(艾宾浩斯遗忘曲线)
- 色环在线计算机,多功能电子计算软件(eTools)
- 圆圈头像制作css,通过CSS3实现圆形头像显示
- 色彩缤纷的python(改变字体颜色及样式)不是我写的
- 学校计算机社团面试问题及答案,社团二轮面试题目
- 格物、致知、正心、诚意、修身、齐家、治国、平天下
- 模版之家第三方解析下载不用开年或终身会员也能下载
- c--scanf()函数详解
- 2月3日模拟赛分析及总结
- 推荐一款 Linux 上比较漂亮的字体(转)
- 关注龙之梦和长峰地产
- 【科普篇】云存储与传统存储
- 计算机电源已接通但未充电,笔记本电源,详细教您电源已连接未充电怎么解决...
热门文章
- 2018第九届蓝桥省赛题目
- Java基础点:常用类
- (转载)The shortest, fastest, and easiest way to compare two tables in SQL Server: UNION
- 修改Centos7的网卡ens32 改为eth0
- C++ 对TXT 的串并行读写
- 毕加索发布轻量化转化引擎及BIMSOP协作云平台
- 使用Windbg调试StackOverflowException异常
- 《构建之法》8、9、10章
- 手机浏览器UserAgnet大全
- 从 12306 订购火车票 无需FQ