2023年7月19日发(作者：)

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

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

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

ListView布局和样式

1

2

3 BorderBrush="{StaticResource cardViewBackgroundBrush}" HorizontalAlignment="Stretch">

4

5

6 TextWrapping="Wrap" Margin="1,0,5,0" Width="20" FontSize="12" Foreground="Black" />

7

8 TextWrapping="Wrap" Margin="1,0,5,0" VerticalAlignment="Top" Foreground="Black" FontSize="12" />

9

10 TextWrapping="Wrap" Margin="1,0,5,0" FontSize="12" Foreground="Black"/>

11

12 TextWrapping="Wrap" Margin="1,0,5,0" FontSize="12" Foreground="Black"/>

13

14 Margin="1,0,5,0" FontSize="12" Foreground="Black" VerticalAlignment="Top"/>

15

16 Margin="1,0,5,0" FontSize="12" Foreground="Black" VerticalAlignment="Top"/>

17

18 Margin="1,0,5,0" FontSize="12" Foreground="Black" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>

19

20 Margin="1,0,5,0" FontSize="12" Foreground="Black" VerticalAlignment="Top"/>

21

22

23

24

25

26

27

28

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

1

2

3 BorderThickness="1" CornerRadius="10" Margin="10">

4

5 ShowGridLines="False" x:Name="card" >

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20 VerticalAlignment="Stretch" Width="Auto" Height="Auto" ="0"

21 ="0" Span="2"

n="7"

22 Background="{StaticResource cardViewBackgroundBrush}" BorderBrush="LightGray"

23 BorderThickness="1" Margin="0,1,0,1" CornerRadius="0,0,8,8"/>

24

25 ="0" ="0" Span="2" Width="Auto" Height="32"

26 BorderBrush="{x:Null}" BorderThickness="0,0,0,0" CornerRadius="0,0,0,0">

27

28

29

30 31

32 Width="80" Margin="9" Height="80" VerticalAlignment="Top" >

33

34

35

36

37 StretchDirection="DownOnly" HorizontalAlignment="Stretch" VerticalAlignment="Top"/>

38

39

40

41 TextWrapping="Wrap" Margin="1" FontSize="14" Foreground="Black" />

42

43 Height="3" Fill="Black" Stretch="Fill" Stroke="Black" StrokeThickness="2"

44 Data="M202,79 C412,78 413,78 413,78" />

45

46 Margin="1" FontSize="12" Foreground="Black"/>

47

48 Margin="1" FontSize="12" Foreground="Black"/>

49

50

51 Margin="2,0,0,0" VerticalAlignment="Center" Height="22" Foreground="Black" FontWeight="Bold" FontSize="16" />

52

53

54

55 Foreground="Black" VerticalAlignment="Top"/>

56

57

58

59 Foreground="Black" HorizontalAlignment="Left" VerticalAlignment="Top"/>

60

61 FontSize="12" Foreground="Black" VerticalAlignment="Top"/>

62

63

64

65 Foreground="Black" HorizontalAlignment="Left" VerticalAlignment="Top"/>

66

67 Foreground="Black" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>

68

69

70

71 Foreground="Black" HorizontalAlignment="Left" VerticalAlignment="Top"/>

72

73 FontSize="12" Foreground="Black" VerticalAlignment="Top"/>

74

75

76

77

78

79

80 Value="{StaticResource cardViewMouseOverBackgroundBrush}"/>

81

82

83

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

切换UI布局

1 private void ViewMode_SelectionChanged(object sender, SelectionChangedEventArgs e)

2 {

3 if (!electionActive(de))

4 return;

5 if (edIndex == 0)

6 {

7 alue(roperty);

8 mplate =

9 source("listViewDataTemplate") as DataTemplate;

10 }

11 else

12 {

13 mplate =

14 source("cardViewDataTemplate") as DataTemplate;

15 = source("cardViewStyle") as Style;

16 }

17 }

Tag标签: Wpf,Wpf案例