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

简介: 原文: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          }
目录
相关文章
|
3天前
|
前端开发 C# 索引
浅谈WPF之UI布局
一个成功的软件,离不开人性化的UI设计,如何抓住用户第一视觉,让用户产生依赖感,合适优雅的布局必不可少。本文以一些简单的小例子,简述WPF中布局 面板 控件的使用,仅供学习分享使用,如有不足之处,还请指正。
16 1
|
1月前
|
搜索推荐 C# 开发者
3个值得推荐的WPF UI组件库
3个值得推荐的WPF UI组件库
105 0
|
1月前
|
前端开发 JavaScript C#
一个WPF版的Layui前端UI库
一个WPF版的Layui前端UI库
|
2月前
|
搜索推荐 C#
一个适用于定制个性化界面的WPF UI组件库
一个适用于定制个性化界面的WPF UI组件库
|
2月前
|
C# 开发者 C++
一套开源、强大且美观的WPF UI控件库
一套开源、强大且美观的WPF UI控件库
100 0
|
3月前
|
JSON 数据格式
通过 SAP UI5 IconTabBar 控件结合 FlexibleColumnLayout 实现多页面 Master-Detail 布局试读版
通过 SAP UI5 IconTabBar 控件结合 FlexibleColumnLayout 实现多页面 Master-Detail 布局试读版
22 0
|
4月前
element-ui里的el-table在grid布局下切换数据有滚动条时不断增加?
element-ui里的el-table在grid布局下切换数据有滚动条时不断增加?
24 0
|
4月前
|
容器
SAP UI5 Form 表单的 Responsive Grid Layout 布局中的 breakpoint
SAP UI5 Form 表单的 Responsive Grid Layout 布局中的 breakpoint
23 0
|
4月前
|
测试技术
SAP UI5 Form 控件的 ColumnLayout 布局特性
控件的默认设置并不适合所有可能的用例。 相反,应用程序可以使用 S、M、L 和 XL 尺寸的各种布局之一。
32 0
|
4月前
|
移动开发 开发框架 JavaScript
SAP UI5 应用里 /sap/ui/thirdparty/sinon.js 的作用
SAP UI5 应用里 /sap/ui/thirdparty/sinon.js 的作用
45 0