AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

WPF案例 (六) 动态切换UI布局

2015-06-07 1619
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:WPF案例 (六) 动态切换UI布局 　这个Wpf示例对同一个界面支持以ListView或者CardView的布局方式呈现界面，使用控件ItemsControl绑定数据源，使用DataTemplate为ItemsControl分别预定义了ListView和CardView的样式，在程序运行时，可在这两种Layout之间互相切换，界面如下。
原文: WPF案例 (六) 动态切换UI布局

 　这个Wpf示例对同一个界面支持以ListView或者CardView的布局方式呈现界面，使用控件ItemsControl绑定数据源，使用DataTemplate为ItemsControl分别预定义了ListView和CardView的样式，在程序运行时，可在这两种Layout之间互相切换，界面如下。源代码在这里下载

  

　为ItemsControl定义ListView UI布局的ItemTemplate，并指定MouseOver时DataTemplate的样式

img_405b18b4b6584ae338e0f6ecaf736533.gif ListView布局和样式
 1    < DataTemplate  x:Key ="listViewDataTemplate" >
 2               < Border  x:Name ="listViewBorder"  BorderThickness ="0,0,0,1"  Height ="25"
 3  　　　　　　　　 BorderBrush =" {StaticResource cardViewBackgroundBrush} "  HorizontalAlignment ="Stretch" >
 4                   < StackPanel  Orientation ="Horizontal"  HorizontalAlignment ="Stretch" >
 5                       < TextBlock  VerticalAlignment ="Top"  Text =" {Binding Path=BedNo} "  
  6  　　　　　　　　　　　TextWrapping ="Wrap"  Margin ="1,0,5,0"  Width ="20"  FontSize ="12"  Foreground ="Black"   />
 7                       < TextBlock  Text =" {Binding Path=Name} "  Grid.Row ="0"  Grid.Column ="1"  
  8  　　　　　　　　　　　TextWrapping ="Wrap"  Margin ="1,0,5,0"   VerticalAlignment ="Top"  Foreground ="Black"   FontSize ="12"   />
 9                       < TextBlock  VerticalAlignment ="Top"  Text =" {Binding Path=Sex} "  
 10  　　　　　　　　　　　　TextWrapping ="Wrap"   Margin ="1,0,5,0"  FontSize ="12"  Foreground ="Black" />
11                       < TextBlock  VerticalAlignment ="Top"  Text =" {Binding Path=BirthDay} "  
 12  　　　　　　　　　　　　　TextWrapping ="Wrap"  Margin ="1,0,5,0"  FontSize ="12"  Foreground ="Black" />
13                       < TextBlock  Text =" {Binding Path=Address} "  TextWrapping ="Wrap"
14  　　　　　　　　　　　　　　 Margin ="1,0,5,0"  FontSize ="12"  Foreground ="Black"   VerticalAlignment ="Top" />
15                       < TextBlock   Text =" {Binding Path=City} "  TextWrapping ="Wrap"  
 16  　　　　　　　　　　　　　　　Margin ="1,0,5,0"  FontSize ="12"  Foreground ="Black"   VerticalAlignment ="Top" />
17                       < TextBlock  Text =" {Binding Path=PostCode} "  TextWrapping ="Wrap"
18  　　　　　　　　　　　　　　　 Margin ="1,0,5,0"  FontSize ="12"  Foreground ="Black"   VerticalAlignment ="Top"  HorizontalAlignment ="Stretch" />
19                       < TextBlock   Text =" {Binding Path=HomePhoneNumber} "  TextWrapping ="Wrap"
20  　　　　　　　　　　　　　　　 Margin ="1,0,5,0"  FontSize ="12"  Foreground ="Black"   VerticalAlignment ="Top" />     
 21                   </ StackPanel >
22               </ Border >
23               < DataTemplate.Triggers >
24                   < Trigger  Property ="IsMouseOver"  Value ="True" >
25                       < Setter  Property ="Background"   TargetName ="listViewBorder"  Value =" {StaticResource cardViewBackgroundBrush} " />
26                   </ Trigger >
27               </ DataTemplate.Triggers >
28  </ DataTemplate >

 　为ItemsControl定义CardView UI布局的ItemTemplate,同时定义MouseOver时DataTemplate的样式

img_405b18b4b6584ae338e0f6ecaf736533.gif CardView布局和样式
 1  < DataTemplate  x:Key ="cardViewDataTemplate"   >
 2               < Border  x:Name ="card1"  Background ="Transparent"  BorderBrush ="Transparent"  
  3  　　　　　　　　　　　BorderThickness ="1"  CornerRadius ="10"  Margin ="10" >
 4                   < Grid  Margin ="0,0,0,0"  HorizontalAlignment ="Center"  VerticalAlignment ="Center"  
  5  　　　　　　　　　　　　　　　　　　ShowGridLines ="False"  x:Name ="card"   >
 6                       < Grid.RowDefinitions >
 7                           < RowDefinition  Height ="32" />
 8                           < RowDefinition  Height ="68" />
 9                           < RowDefinition  Height ="20" />
10                           < RowDefinition  Height ="20" />
11                           < RowDefinition  Height ="20" />
12                           < RowDefinition  Height ="20" />
13                           < RowDefinition  Height ="5" />
14                       </ Grid.RowDefinitions >
15                       < Grid.ColumnDefinitions >
16                           < ColumnDefinition  Width ="100"   />
17                           < ColumnDefinition  Width ="*" />
18                       </ Grid.ColumnDefinitions >
19                       < Border  x:Name ="cardBorder"  HorizontalAlignment ="Stretch"  
 20  　　　　　　　　　　　　　　　VerticalAlignment ="Stretch"  Width ="Auto"  Height ="Auto"  Grid.Row ="0"  
 21  　　　　　　　　　　　　　　　Grid.Column ="0"  Grid.ColumnSpan ="2"  Grid.RowSpan ="7"   
 22  　　　　　　　　　　　　　　　Background =" {StaticResource cardViewBackgroundBrush} "  BorderBrush ="LightGray"   
 23  　　　　　　　　　　　　　　　BorderThickness ="1"  Margin ="0,1,0,1"  CornerRadius ="0,0,8,8" />
24                       < Border   x:Name ="cardTitle"  HorizontalAlignment ="Stretch"  VerticalAlignment ="Top"   
 25  　　　　　　　　　　　　　　Grid.Row ="0"  Grid.Column ="0"  Grid.ColumnSpan ="2"  Width ="Auto"  Height ="32"  
 26  　　　　　　　　　　　　　　BorderBrush =" {x:Null} "  BorderThickness ="0,0,0,0"   CornerRadius ="0,0,0,0" >
27                           < Border.Background >
28                                < ImageBrush  ImageSource ="Images\cardTitle.jpg" />
29                           </ Border.Background >
30                       </ Border >
31                       < Border  HorizontalAlignment ="Left"  Grid.Row ="0"  Grid.Column ="0"  Grid.RowSpan ="2"  
 32  　　　　　　　　　　　　　　Width ="80"  Margin ="9"  Height ="80"  VerticalAlignment ="Top"   >
33                           < Border.BitmapEffect >
34                               < DropShadowBitmapEffect  Direction ="316"  Color ="#FFA9A9A9"  ShadowDepth ="7"  Softness ="0.075" />
35                           </ Border.BitmapEffect >
36                           < Image  Width ="Auto"  Height ="Auto"  Source ="Images\Image.gif"  Stretch ="Fill"
37  　　　　　　　　　　　　　　　　 StretchDirection ="DownOnly"  HorizontalAlignment ="Stretch"  VerticalAlignment ="Top" />
38                       </ Border >
39                       < StackPanel  Orientation ="Vertical"  Grid.Row ="1"  Grid.Column ="1"  Margin ="1" >
40                           < TextBlock  VerticalAlignment ="Top"  Text =" {Binding Path=BedNo} "  
 41  　　　　　　　　　　　　　　　　TextWrapping ="Wrap"  Margin ="1"  FontSize ="14"  Foreground ="Black"   />
42                               < Path  HorizontalAlignment ="Left"  Margin ="1"  VerticalAlignment ="Top"  Width ="176"
43  　　　　　　　　　　　　　　 Height ="3"  Fill ="Black"  Stretch ="Fill"  Stroke ="Black"  StrokeThickness ="2"  
 44  　　　　　　　　　　　　　　　　　　　　　Data ="M202,79 C412,78 413,78 413,78"   />
45                               < TextBlock  VerticalAlignment ="Top"  Text =" {Binding Path=Sex} "  TextWrapping ="Wrap"
46  　　　　　　　　　　　　　　　　　 Margin ="1"  FontSize ="12"  Foreground ="Black" />
47                               < TextBlock  VerticalAlignment ="Top"  Text =" {Binding Path=BirthDay} "  TextWrapping ="Wrap"  
 48  　　　　　　　　　　　　　　　　　　Margin ="1"  FontSize ="12"  Foreground ="Black" />
49                           </ StackPanel >
50                            < TextBlock  Text =" {Binding Path=Name} "  Grid.Row ="0"  Grid.Column ="1"  TextWrapping ="Wrap"
51  　　　　　　　　　　　　　　　 Margin ="2,0,0,0"  VerticalAlignment ="Center"  Height ="22"  Foreground ="Black"  FontWeight ="Bold"  FontSize ="16"   />
52                          < StackPanel  Orientation ="Horizontal"  Grid.Row ="2"  Grid.Column ="0"  Grid.ColumnSpan ="2"  Margin ="1" >
53                                < TextBlock  Text ="家庭住址:"  TextWrapping ="Wrap"  Margin ="5,0,0,0"  FontSize ="12"  Foreground ="Black"    　　　　　　　　　　　　　　　　　　　　　　　　　　　　　HorizontalAlignment ="Left"  VerticalAlignment ="Top" />
54                                < TextBlock  Text =" {Binding Path=Address} "  TextWrapping ="Wrap"  Margin ="1"  FontSize ="12"  
 55  　　　　　　　　　　　　　　　　　　　　　　　　　Foreground ="Black"   VerticalAlignment ="Top" />
56                           </ StackPanel >
57                           < StackPanel  Orientation ="Horizontal"   Grid.Row ="3"  Grid.Column ="0"  Grid.ColumnSpan ="2"  Margin ="1" >
58                               < TextBlock  Text ="城市: "  TextWrapping ="Wrap"  Margin ="5,0,0,0"  FontSize ="12"  
 59  　　　　　　　　　　　　　　　　　　Foreground ="Black"  HorizontalAlignment ="Left"    VerticalAlignment ="Top" />
60                                < TextBlock   Text =" {Binding Path=City} "  TextWrapping ="Wrap"  Margin ="1"  
 61  　　　　　　　　　　　　　　　　　　　　　　　FontSize ="12"  Foreground ="Black"   VerticalAlignment ="Top" />
62                           </ StackPanel >
63                           < StackPanel  Orientation ="Horizontal"   Grid.Row ="4"  Grid.Column ="0"  Grid.ColumnSpan ="2"  Margin ="1" >
64                               < TextBlock  Text ="邮编: "  TextWrapping ="Wrap"  Margin ="5,0,0,0"  FontSize ="12"  
 65  　　　　　　　　　　　　　　　　　　　Foreground ="Black"  HorizontalAlignment ="Left"    VerticalAlignment ="Top" />
66                                < TextBlock  Text =" {Binding Path=PostCode} "  TextWrapping ="Wrap"  Margin ="1"  FontSize ="12"
67  　　　　　　　　　　　　　　　　　 Foreground ="Black"   VerticalAlignment ="Top"  HorizontalAlignment ="Stretch" />
68                           </ StackPanel >
69                            < StackPanel  Orientation ="Horizontal"   Grid.Row ="5"  Grid.Column ="0"  Grid.ColumnSpan ="2"  Margin ="1" >
70                               < TextBlock  Text ="家庭电话: "  TextWrapping ="Wrap"  Margin ="5,0,0,0"  FontSize ="12"  
 71  　　　　　　　　　　　　　　　Foreground ="Black"  HorizontalAlignment ="Left"   VerticalAlignment ="Top" />
72                               < TextBlock   Text =" {Binding Path=HomePhoneNumber} "  TextWrapping ="Wrap"  Margin ="1"
73  　　　　　　　　　　　　　　　　　　　　　　　 FontSize ="12"  Foreground ="Black"   VerticalAlignment ="Top" />     
 74                            </ StackPanel >
75                       </ Grid >
76               </ Border >
77               < DataTemplate.Triggers >
78                   < Trigger  Property ="IsMouseOver"  Value ="True" >
79                       < Setter  Property ="Background"   TargetName ="cardBorder"  
 80  　　　　　　　　　　　　　　　Value =" {StaticResource cardViewMouseOverBackgroundBrush} " />
81                   </ Trigger >
82               </ DataTemplate.Triggers >
83    </ DataTemplate >

 　定义运行时在ListView和CardView两种布局间切换的事件

img_405b18b4b6584ae338e0f6ecaf736533.gif 切换UI布局
 1    private   void  ViewMode_SelectionChanged( object  sender, SelectionChangedEventArgs e)
  2          {
  3               if  ( ! Selector.GetIsSelectionActive( this .ViewMode))
  4                   return ;
  5               if  (ViewMode.SelectedIndex  ==   0 )
  6              {
  7                   this .itemsControl.ClearValue(ItemsControl.StyleProperty);
  8                   this .itemsControl.ItemTemplate  =  
  9                   this .FindResource( " listViewDataTemplate " )  as  DataTemplate;
 10              }
 11               else
12              {
 13                   this .itemsControl.ItemTemplate  =  
 14                  this .FindResource( " cardViewDataTemplate " )  as  DataTemplate;
 15                   this .itemsControl.Style  =   this .FindResource( " cardViewStyle " )  as  Style;
 16              }
 17          }
文章标签：
C#
关键词：
UI布局
案例UI
wpf ui
wpf布局
UI wpf
杰克.陈
目录
相关文章
全栈若城
|
6月前
|
开发者 容器
44.[HarmonyOS NEXT RelativeContainer案例一] 掌握组件锚点布局：打造灵活精准的UI定位系统
在HarmonyOS NEXT的UI开发中，精确控制组件位置是构建复杂界面的关键。RelativeContainer作为一种强大的布局容器，通过锚点系统提供了精确定位能力，使开发者能够创建出灵活且精准的UI布局。本教程将详细讲解如何使用RelativeContainer的锚点布局功能，帮助你掌握这一核心技术。
全栈若城
232 4
枫叶丹4
|
6月前
|
编解码 UED 开发者
【HarmonyOS Next之旅】基于ArkTS开发(二) -＞ UI开发之常见布局
本文主要介绍了自适应布局与响应式布局的相关内容。自适应布局部分涵盖线性布局、层叠布局、弹性布局和网格布局，详细说明了各布局的特性及使用方法，例如线性布局中的排列、拉伸与缩放，弹性布局的方向、换行与对齐方式等。响应式布局则重点讲解了栅格系统和媒体查询，阐述如何通过栅格组件和媒体查询条件实现不同设备上的适配效果。这些技术帮助开发者灵活应对多尺寸屏幕的设计需求，提升用户体验。
枫叶丹4
364 55
全栈若城
|
6月前
|
定位技术 容器
48.[HarmonyOS NEXT RelativeContainer案例五] 精确表单布局：辅助线定位技术打造专业级UI
在HarmonyOS NEXT的UI开发中，表单是常见且重要的界面元素。创建对齐精确、布局合理的表单需要精细的定位控制。RelativeContainer提供的辅助线(Guideline)功能，为表单布局提供了强大的支持。本教程将详细讲解如何使用RelativeContainer的辅助线功能实现精确的表单布局，帮助你掌握这一专业级UI技术。
全栈若城
192 7
SoraLuna
|
UED
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
本篇将带你实现一个简单的照片墙布局应用，通过展示多张图片组成照片墙效果，用户可以点击图片查看其状态变化。
SoraLuna
376 67
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
明弟有理想
|
Android开发 开发者 容器
flutter:&UI布局 (六)
本文档介绍了Flutter中的UI布局方式，包括线性布局（如Column和Row）、非线性布局（如Stack、Flex、Positioned）以及Wrap布局等。通过具体示例代码展示了如何使用这些布局组件来构建灵活多变的用户界面，例如使用Column垂直排列文本、使用Stack叠加组件、以及利用Wrap实现自动换行的按钮布局等。
明弟有理想
307 1
追逐时光者
|
搜索推荐 前端开发 C#
推荐7款美观且功能强大的WPF UI库
推荐7款美观且功能强大的WPF UI库
追逐时光者
1334 2
土木林森
|
C# UED 开发者
WPF与性能优化：掌握这些核心技巧，让你的应用从卡顿到丝滑，彻底告别延迟，实现响应速度质的飞跃——从布局到动画全面剖析与实例演示
【8月更文挑战第31天】本文通过对比优化前后的方法，详细探讨了提升WPF应用响应速度的策略。文章首先分析了常见的性能瓶颈，如复杂的XAML布局、耗时的事件处理、不当的数据绑定及繁重的动画效果。接着，通过具体示例展示了如何简化XAML结构、使用后台线程处理事件、调整数据绑定设置以及利用DirectX优化动画，从而有效提升应用性能。通过这些优化措施，WPF应用将更加流畅，用户体验也将得到显著改善。
土木林森
1393 1
土木林森
|
vr&ar C# 图形学
WPF与AR/VR的激情碰撞：解锁Windows Presentation Foundation应用新维度，探索增强现实与虚拟现实技术在现代UI设计中的无限可能与实战应用详解
【8月更文挑战第31天】增强现实（AR）与虚拟现实（VR）技术正迅速改变生活和工作方式，在游戏、教育及工业等领域展现出广泛应用前景。本文探讨如何在Windows Presentation Foundation（WPF）环境中实现AR/VR功能，通过具体示例代码展示整合过程。尽管WPF本身不直接支持AR/VR，但借助第三方库如Unity、Vuforia或OpenVR，可实现沉浸式体验。例如，通过Unity和Vuforia在WPF中创建AR应用，或利用OpenVR在WPF中集成VR功能，从而提升用户体验并拓展应用功能边界。
土木林森
415 1
土木林森
|
C# 开发者 设计模式
WPF开发者必读：命令模式应用秘籍，轻松简化UI与业务逻辑交互，让你的代码更上一层楼！
【8月更文挑战第31天】在WPF应用开发中，命令模式是简化UI与业务逻辑交互的关键技术，通过将请求封装为对象，实现UI操作与业务逻辑分离，便于代码维护与扩展。本文介绍命令模式的概念及实现方法，包括使用`ICommand`接口、`RelayCommand`类及自定义命令等方式，并提供示例代码展示如何在项目中应用命令模式。
土木林森
281 0
土木林森
|
开发者 C# Windows
WPF布局大揭秘：掌握布局技巧，轻松创建响应式用户界面，让你的应用程序更上一层楼！
【8月更文挑战第31天】在现代软件开发中，响应式用户界面至关重要。WPF（Windows Presentation Foundation）作为.NET框架的一部分，提供了丰富的布局控件和机制，便于创建可自动调整的UI。本文介绍WPF布局的基础概念与实现方法，包括`StackPanel`、`DockPanel`、`Grid`等控件的使用，并通过示例代码展示如何构建响应式布局。了解这些技巧有助于开发者优化用户体验，适应不同设备和屏幕尺寸。
土木林森
563 0