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

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

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

 

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

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的样式

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两种布局间切换的事件

切换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         }

时间： 2024-09-30 07:48:58

WPF案例 (六) 动态切换UI布局的相关文章

WPF实现界面动态布局

以前总觉得动态布局是个很麻烦的问题,是个很需要功力的问题.但是貌似在.NET中,在WPF中却不是那么的麻烦.下面介绍我现在实现的一个动态布局的实例. 因为有需求,所以困难得克服!而我们的需求表名,不同的用户需要的界面元素是不一样的,我们总不能每次都去修改代码吧!所以,需要完成动态布局. 这里主要完成这样一个功能: 1.动态画线 2.动态new控件 3.线和控件都是可拖拽并随意放置位置的 4.线和控件是可删除的 5.控件是可绑定属性和事件的 要完成这样的功能,我们首先得定义三个鼠标事件,即:左键d

WPF UI布局之概述

在线演示:http://v.youku.com/v_show/id_XNzA5NDk2Mjcy.html 清晰版视频+代码下载:http://115.com/lb/5lbeer0m9lad 一.简单介绍 本篇对WPF的布局控件做一个初步的概览,并分别演示Grid.StackPanel.Canvas.DockPanel和WrapPanel五个布局控件.. 主要内容包含: 1.UI布局的方式和关系. 2.WPF的布局理念. 3.五种布局控件的概述和演示. 4.小结. 二.UI布局的方式和关系 1.三

WPF 利用BackgroundWorker 动态加载UI

BackgroundWorker bw = new BackgroundWorker(); bw.DoWork += (ee, se) => { //TODO 需要异步请求的操作 }; bw.RunWorkerCompleted += (ew, sw) => { Dispatcher.Invoke(new Action(() => { <span style="white-space:pre"> </span>//TODO 动态生成UI }))

WPF UI布局（Layout）

WPF是专门用户界面技术,布局是核心功能之一. 每个布局元素都有自己的特点,要灵活使用. WPF中布局元素有如下: Grid:网格 可以自行定义行和列并通过行列的数量.行高和列宽来调整布局.类似Table. Grid具有ColumnDefinitions和RowDefinitions属性,它们分别是ColumnDefinition和RowDefinition的集合, 表示Grid定义了多少行多少列. StackPanel:栈式面板 可以将包含的元素在垂直或水平方向上排成一条直线,移除前一个元素后

Android进阶——构建UI布局的多种方式总结

引言 作为Android App,给人第一印象的就是用户界面(UI),简洁友好的UI,自然会给用户优秀的体验,自然很容易就得到用户的认可和赞许,这样App才变得真正的有价值.所以作为开发App的第一步,UI尤为重要,构建UI有很多种方式:xml静态布局.java动态代码.HTML构建(借助WebView)和第三方开源框架等. 一.构成UI的基本元素--View和ViewGroup概述 在Android中绝大部分的UI组件都是存放在android.widget包及其子包.android.view包

Android UI布局与控件（二）

一.View类的常用xml属性:[了解] ①.Android中所有的UI(用户界面)元素都是使用View和ViewGroup对象建立的 ②.View是一个可以将一些信息绘制在屏幕上并与用户产生交互的对象 ③.ViewGroup是一个包含多个的View和ViewGroup的容器,用来定义UI布局. ④.Android提供了一系列的View和ViewGroup的子类,开发者可以灵活地组合使用它们来完成界面布 局.界 面元素绘制和用户交互等工作 ⑤.开发者还可以选择性地继承一些系统提供的View,来自

Android入门——构建UI布局的多种方式

引言 作为Android App,给人第一印象的就是用户界面(UI),简洁友好的UI,自然会给用户优秀的体验,自然很容易就得到用户的认可和赞许,这样App才变得真正的有价值.所以作为开发App的第一步,UI尤为重要,构建UI有很多种方式:xml静态布局.java动态代码.HTML构建(借助WebView)和第三方开源框架等. 一.构成UI的基本元素--View和ViewGroup概述 在Android中绝大部分的UI组件都是存放在android.widget包及其子包.android.view包

iOS8开发～UI布局（二）storyboard中autolayout和size class的使用详解

一.概要:前一篇初步的描述了size class的概念,那么实际中如何使用呢,下面两个问题是我们一定会遇到的: 1.Xcode6中增加了size class,在storyboard中如何使用? 2.auto layout该如何与size class配合来进行UI布局? 二.了解一件新事物的最好的办法就是实践,让我们揭开那神秘的面纱: 例子1.新建一个Single View Application template项目Demo1,拖拽一个newView到rootView上,并设置背景色为绿色, 然

iOS8开发～UI布局（一）初探Size Class

一.新特性Size Class介绍 随着iOS8系统的发布,一个全新的页面UI布局概念出现,这个新特性将颠覆包括iOS7及之前版本的UI布局方式,这个新特性就是Size Class.Size Class配合Auto Layout可以解决所有(包括iPhone及iPad)iOS设备屏幕尺寸及屏幕旋转时候的UI适配问题 . 二.为什么要使用Size Class 直到iPhone6发布后,目前iOS设备的屏幕尺寸已经有4种了,如图: iPhone6没出现之前,还可以通过代码来适配两种尺寸的UI,但iP