最近做wpf的项目遇到一个问题，需要实现以某点为圆心以半圆的方式慢慢展开，收起的时候也以半圆的方式慢慢收起。并且里面的内容尺寸不能跟着放大或缩小，因为我刚接触wpf不久，看到这个问题时有点不知从何下手，但后来动手写的时候，发现其实很简单，这主要是用到了grid 的clip属性，就做到了里面的内容会随着grid的放大或缩小来显示或隐藏而不是跟着放缩，因为使用clip后，超出grid边界的内容都会隐藏掉就像是被切掉了似的，同时结合EllipseGeometry可以让grid以圆形或椭圆形的状态呈现。最后我再用动画控制EllipseGeometryX轴半径和Y轴半径的变化就ok了。
我是wpf新手，有什么不对的地方请高手多多指教，这也是我第一次写东西，语言表达能力可能欠缺，所以附上代码，有兴趣的朋友可以试试。
前台代码：
1 <Window.Resources>
2
3 <Storyboard x:Key="stb">
4
5 <DoubleAnimation x:Name="doubleAnimationX"
6
7 Storyboard.TargetName="ellipse"
8
9 Storyboard.TargetProperty="RadiusX"
10
11 Duration="0:0:1"
12
13 FillBehavior="Stop" />
14
15 <DoubleAnimation x:Name="doubleAnimationY"
16
17 Storyboard.TargetName="ellipse"
18
19 Storyboard.TargetProperty="RadiusY"
20
21 Duration="0:0:1"
22
23 FillBehavior="Stop" />
24
25 </Storyboard>
26
27 </Window.Resources>
28
29 <Grid x:Name="LayoutRoot">
30
31 <Grid Background="LightBlue"
32
33 x:Name="grid">
34
35 <Grid.Clip>
36
37 <EllipseGeometry x:Name="ellipse"
38
39 RadiusX="0"
40
41 RadiusY="0"
42
43 Center="0,0">
44
45 </EllipseGeometry>
46
47 </Grid.Clip>
48
49 <Grid>
50
51 <Image Stretch="None"
52
53 HorizontalAlignment="Center"
54
55 VerticalAlignment="Center">
56
57 <Image.Source>
58
59 <DrawingImage>
60
61 <DrawingImage.Drawing>
62
63 <GeometryDrawing>
64
65 <GeometryDrawing.Geometry>
66
67 <!-- Create a composite shape. -->
68
69 <GeometryGroup>
70
71 <EllipseGeometry Center="50,50"
72
73 RadiusX="200"
74
75 RadiusY="100" />
76
77 <EllipseGeometry Center="50,50"
78
79 RadiusX="100"
80
81 RadiusY="200" />
82
83 </GeometryGroup>
84
85 </GeometryDrawing.Geometry>
86
87 <GeometryDrawing.Brush>
88
89 <!-- Paint the drawing with a gradient. -->
90
91 <LinearGradientBrush>
92
93 <GradientStop Offset="0.0"
94
95 Color="Blue" />
96
97 <GradientStop Offset="1.0"
98
99 Color="#CCCCFF" />
100
101 </LinearGradientBrush>
102
103 </GeometryDrawing.Brush>
104
105 <GeometryDrawing.Pen>
106
107
108
109 <!-- Outline the drawing with a solid color. -->
110
111 <Pen Thickness="10"
112
113 Brush="Black" />
114
115 </GeometryDrawing.Pen>
116
117 </GeometryDrawing>
118
119 </DrawingImage.Drawing>
120
121 </DrawingImage>
122
123 </Image.Source>
124
125 </Image>
126
127 </Grid>
128
129 </Grid>
130
131 <ToggleButton Content="Click"
132
133 VerticalAlignment="Top"
134
135 Width="40"
136
137 Height="30"
138
139 x:Name="btnSwitch"
140
141 Click="ToggleButton_Click"></ToggleButton>
142
143 </Grid>
144
145
146
147
后台代码：
1 public Window3()
2 {
3 InitializeComponent();
4 grid.Loaded += new RoutedEventHandler(grid_Loaded);
5 }
6
7
8
9 private bool isCollapsed ;//标识动画是否收起
10 private DoubleAnimation m_MyDoubleAnimation1;
11 private DoubleAnimation m_MyDoubleAnimation2;
12 private double m_ScreenWidth; //获取窗体的宽
13 private double m_ScreenHeight; //获取窗体的高
14
15
16
17 void grid_Loaded(object sender, RoutedEventArgs e)
18 {
19 Set();
20 }
21
22
23
24 private void ToggleButton_Click(object sender, RoutedEventArgs e)
25 {
26 Storyboard stb = (Storyboard)FindResource("stb");
27
28
29 if (btnSwitch.IsChecked == true)
30 {
31
32 isCollapsed = false;
33 Show();
34 }
35 else
36 {
37 isCollapsed = true;
38 Hide();
39 }
40 stb.Completed += new EventHandler(stb_Completed);
41 stb.Begin();
42 }
43
44
45
46 //动画完成后事件
47
48 void stb_Completed(object sender, EventArgs e)
49 {
50 if (isCollapsed)
51 {
52 Set();//收起动画完成后重置动画参数
53
54 }
55 else
56 {
57 grid.Clip = null;//显示动画完成后去除Clip
58
59 }
60
61 }
62
63
64
65 //设置相关属性
66
67 private void Set()
68 {
69 Storyboard stb = (Storyboard)FindResource("stb");
70 m_ScreenWidth = SystemParameters.PrimaryScreenWidth;
71 m_ScreenHeight = SystemParameters.PrimaryScreenHeight;
72 ellipse.RadiusX = 0;//设置圆的X轴半径
73 ellipse.RadiusY = 0;//设置圆的Y轴半径
74 ellipse.Center = new Point(m_ScreenWidth / 2, 0);//设置圆心位置
75 grid.Clip = ellipse;
76 m_MyDoubleAnimation1 = (DoubleAnimation)stb.Children[0];
77 m_MyDoubleAnimation2 = (DoubleAnimation)stb.Children[1];
78 }
79
80
81
82 //显示时的动画参数设置
83 private void Show()
84 {
85 ellipse.RadiusX = 0;
86 ellipse.RadiusY = 0;
87 m_MyDoubleAnimation1.From = 0;
88 m_MyDoubleAnimation2.From = 0;
89 m_MyDoubleAnimation1.To = m_ScreenHeight;//X轴半径由0慢慢变成 m_ScreenHeight
90 m_MyDoubleAnimation2.To = -m_ScreenHeight;//Y轴半径由0慢慢变成 m_ScreenHeight
91
92 }
93
94 //隐藏时的动画参数设置
95
96 private void Hide()
97 {
98 ellipse.RadiusX = m_ScreenHeight;
99 ellipse.RadiusY = -m_ScreenHeight;
100 grid.Clip = ellipse;
101 m_MyDoubleAnimation1.From = m_ScreenHeight;
102 m_MyDoubleAnimation2.From = -m_ScreenHeight;
103 m_MyDoubleAnimation1.To = 0;
104 m_MyDoubleAnimation2.To = 0;
105 }
106
107
108
109 //当屏幕改变分辨率时重新获取窗体宽高
110
111 private void Window_SizeChanged(object sender, SizeChangedEventArgs e)
112 {
113 m_ScreenWidth = SystemParameters.PrimaryScreenWidth;
114 m_ScreenHeight = SystemParameters.PrimaryScreenHeight;
115 }
116
117
118
119
120
