用的是dev的TileLayouotControl控件。

 <dxwui:PageAdornerControl Header="" Padding="30" ShowBackButton="False"  >
<WrapPanel>
<dxlc:TileLayoutControl Padding="12,0,10,10"> <dxlc:Tile Header="重绕" Style="{StaticResource VerticalTile}" Background="#FF00ABDC" dxwuin:Navigation.NavigateTo="ICMORpt">
<BitmapImage UriSource="/Images/UserManagment.png" />
</dxlc:Tile>
<!--dxlc:FlowLayoutControl.IsFlowBreak="True"-->
<dxlc:Tile Header="装箱" Style="{StaticResource VerticalTile}" Background="#FF6652A2" dxwuin:Navigation.NavigateTo="Package">
<BitmapImage UriSource="/Images/Statistics.png" />
</dxlc:Tile> <dxlc:Tile Header="装托" Style="{StaticResource HorizontalTile}" Background="#FFDA8515" dxwuin:Navigation.NavigateTo="Pallet">
<BitmapImage UriSource="/Images/ZillowLogo.png" />
</dxlc:Tile> <dxmvvm:Interaction.Behaviors>
<dxwuin:FrameDocumentUIService ShowSplashScreen="True" >
<dxwuin:FrameDocumentUIService.SplashScreenService>
<dx:DXSplashScreenService x:Name="WaitScreenService" ViewTemplate="{StaticResource waitIndicator}" SplashScreenStartupLocation="CenterOwner" />
</dxwuin:FrameDocumentUIService.SplashScreenService>
</dxwuin:FrameDocumentUIService>
</dxmvvm:Interaction.Behaviors>
</dxlc:TileLayoutControl>
<dxlc:TileLayoutControl Padding="12,0,10,10"> <dxlc:Tile Header="补打外箱标签" Style="{StaticResource VerticalTile}" Background="#FF00ABDC" dxwuin:Navigation.NavigateTo="RePackagePrint">
<BitmapImage UriSource="/Images/UserManagment.png" />
</dxlc:Tile> <dxmvvm:Interaction.Behaviors>
<dxwuin:FrameDocumentUIService ShowSplashScreen="True" >
<dxwuin:FrameDocumentUIService.SplashScreenService>
<dx:DXSplashScreenService x:Name="WaitScreenService1" ViewTemplate="{StaticResource waitIndicator}" SplashScreenStartupLocation="CenterOwner" />
</dxwuin:FrameDocumentUIService.SplashScreenService>
</dxwuin:FrameDocumentUIService>
</dxmvvm:Interaction.Behaviors>
</dxlc:TileLayoutControl> </WrapPanel> </dxwui:PageAdornerControl>

样式

  <UserControl.Resources>
<DataTemplate x:Key="waitIndicator">
<dx:WaitIndicator DeferedVisibility="True"/>
</DataTemplate>
<converter:BatmapConverter x:Key="bitmapConverter"/>
<converter:ModuleAuthVisibleConverter x:Key="moduleAuthConverter"/>
<Style x:Key="VerticalTile" TargetType="{x:Type dxlc:Tile}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Size" Value="Small" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate />
</Setter.Value>
</Setter>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate >
<StackPanel>
<dxe:ImageEdit IsReadOnly="True" Stretch="Fill" EditValue="{Binding Mode=OneWay}" ShowBorder="False" Width="80" Height="80"/>
<TextBlock Text="{Binding Header, RelativeSource={RelativeSource AncestorType={x:Type dxlc:Tile}}}" FontSize="24" Margin="0,5,0,0" HorizontalAlignment="Center"
FontFamily="宋体" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style> <Style x:Key="HorizontalTile" TargetType="{x:Type dxlc:Tile}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Size" Value="Large" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate />
</Setter.Value>
</Setter>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<dxe:ImageEdit IsReadOnly="True" EditValue="{Binding Mode=OneWay}" Stretch="Fill" ShowBorder="False" Width="80" Height="80"/>
<TextBlock Text="{Binding Header, RelativeSource={RelativeSource AncestorType={x:Type dxlc:Tile}}}" FontSize="24" Margin="20,0,0,0" VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="FlatTile" TargetType="{x:Type dxlc:Tile}">
<Setter Property="Size" Value="Large" />
<Setter Property="Padding" Value="5" />
<Setter Property="VerticalHeaderAlignment" Value="Stretch" />
</Style>
<help:Timer x:Key="time"/> <DataTemplate x:Key="layoutItemTemplate">
<dxlc:Tile Header="{Binding FNAME}" Style="{StaticResource VerticalTile}" Background="#FFA89BB6"
dxwuin:Navigation.NavigateTo="CompleteReportView" dxwuin:Navigation.NavigationParameter="{Binding}" >
<BitmapImage UriSource="/MESClient;component/Images/list.png" />
</dxlc:Tile>
</DataTemplate> <Style TargetType="dxwui:PageAdornerControl">
<Setter Property="Padding" Value="0,-32,0,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="dxwui:PageAdornerControl">
<Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
<!--<Grid Margin="42,0,32,10">-->
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid>
<dxwuii:NavigationHeaderControl Margin="10,2,0,2" VerticalAlignment="Top" x:Name="PART_NavigationHeader" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"
BackCommand="{TemplateBinding BackCommand}" ShowBackButton="{TemplateBinding ShowBackButton}" />
</Grid>
<ContentPresenter Grid.Row="1" Margin="{TemplateBinding Padding}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<!--<TextBlock IsHitTestVisible="False" Text="返回" Foreground="#FFF78A09" FontSize="24" FontFamily="Segoe UI Light, Tahoma Light" />-->
<TextBlock IsHitTestVisible="False" Margin="20,0,0,0" Text="{Binding}" Foreground="#FFFFFFFF" FontSize="24" FontFamily="Segoe UI Light, Tahoma Light" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>

WPF 简洁的主界面的更多相关文章

  1. 【WPF/WAF】主界面(ShellWindow)引入别的界面布局

    问题:主界面如果只用一个布局文件ShellWindow.xaml,会写得很大很臃肿.需要分为多个布局文件,然后由主界面引入.参考http://waf.codeplex.com/官方的BookLibra ...

  2. 使用DotNetBar制作漂亮的WinFrom界面,自定义AgileEAS.NET SOA平台WinClient主界面

    一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...

  3. WPF技术触屏上的应用系列(六): 视觉冲击、超炫系统主界面、系统入口效果实现

    原文:WPF技术触屏上的应用系列(六): 视觉冲击.超炫系统主界面.系统入口效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统,54寸大屏电脑电视一体 ...

  4. 简易音乐播放器主界面设计 - .NET CORE(C#) WPF开发

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. 简易音乐播放器主界面设计 - .NET CORE(C#) WPF开发 阅读导航 本文背景 代码 ...

  5. [课程设计]Scrum 1.3 多鱼点餐系统开发进度(系统主界面框架&美化)

    Scrum 1.3 多鱼点餐系统开发进度(系统主界面框架&美化) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅 ...

  6. Android学习系列(22)--App主界面比较

    本文算是一篇漫谈,谈一谈当前几个流行应用的主界面布局,找个经典的布局我们自己也来实现一个.不是为了追求到底有多难,而是为了明白我们确实需要这么做. 走个题,android的UI差异化市场依然很大,依然 ...

  7. Android学习系列(23)--App主界面实现

    在上篇文章<Android学习系列(22)--App主界面比较>中我们浅略的分析了几个主界面布局,选了一个最大众化的经典布局.今天我们就这个经典布局,用代码具体的实现它. 1.预览图先看下 ...

  8. Winform_devexpress开发框架主界面设计

    做了好多年的C#开发,从.Net.Winform及第三方的DevExpress.无论什么样的系统,主界面的设计及风格无疑非常重要.从客户的角度考虑,要求功能区清晰,整体美观大方,这样才会有可能从第一视 ...

  9. 【Android】19.0 第19章 前面章节的代码优化及本章示例主界面

    分类:C#.Android.VS2015: 创建日期:2016-03-05 一.简介 这一章我们介绍"共享存储和内容提供程序"的基本用法. 二.先优化一下前面章节例子的代码 在前面 ...

随机推荐

  1. application-defined exception

    dataSnap服务器,客户端调用的时候写错了一句话, SQLConnection1->CloneConnection(); 改为 SQLConnection1->Close(); 就好了 ...

  2. 管理Entity Framework中的树结构

    很多时候您需要在数据库中存储逻辑树的层次结构.这个问题有很多种实现方式,但最常见的是使用一个简单自关联的表,如下图所示 如果您映射此表与实体框架您将自动获得一个树状结构,您需将关系字段重命名,因为他们 ...

  3. Unable to save settings: Failed to save settings. Please restart IntelliJ IDEA

    找到原先备份的项目,把 .idea 文件夹重新覆盖,解决问题.

  4. ZooKeeper 学习笔记(一)

    第一章 ZooKeeper的基本概念 一.介绍 在过去,每个应用一般都是在单个机子(单处理器)上运行,现在这一状况已经发生了巨大的变化.在大数据和云计算的世界里,应用程序已经被分成多个独立的模块在不同 ...

  5. 10分钟.Net Core 简单入门教程

    以 Centos 为例 1.安装所需的依赖关系 打开命令提示符并运行以下命令: sudo rpm -Uvh https://packages.microsoft.com/config/rhel/7/p ...

  6. MyBatis 学习记录4 MyBatis的一级缓存

    主题 分享记录一下MyBatis的一级缓存相关的学习. Demo public static void firstLevelCache() { init("mybatis-config.xm ...

  7. UNITY UI字体模糊的原因

    根本原因:像素少. 解决办法:字体的 font size将像素设置大些,然后用scale来缩放大小

  8. plsql中的光标

    操作oracle数据库效率最高的语言就是plsql程序,故而把访问数据库的代码写成plsql的执行效率要高于java,c ,c++等代码

  9. 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

    一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...

  10. mysql5.6配置semi_sync

    测试环境:Red Hat Enterprise Linux Server release 6.3 (Santiago)Server version: 5.6.22-log MySQL Communit ...