wpf 圆形菜单

没有想象中的简单奥，咋样布局6个按钮坐标才能在正确的对应位置呢，漂亮是漂亮，如果窗口宽度高度改变了，它能等比例改变宽高大小么

内容区域：

这里开始主窗口 圆形菜单制作的过程，首先请大家看看下面的截图，想一想

1.如果你用winform如何开发呢？ 如果用wpf怎么开发呢？

2.布局看起来不难做啊。但是真的很简单么？

3.我的窗体不是想金山毒霸哪有的窗口大小宽高固定的，那如果窗口最大化或者改变了宽高，中间的圆形菜单还是原来的大小，岂不是中间那么大区域就这么一个小圈太难看了吧？

大家思考5min后。。继续向下看。。。程序员最享受的是思考过程，静心思考，如果有更好的解决或者实现方法，或者发行我实现的方法有漏洞是留言。。。。

上图：

第一步 布局背景图：

我们先设定好容器gird 为380px 三个正圆形 一个是最外面的蓝色光环，一个是中间的蓝色光环，一个是最内部的有点灰色的圆形，在加一个 中间的小狗 Ok 简单布局就好了:

1  <Grid Height="380" 2                   Width="380" 3                   Name="menuGrid"> 4                 <Ellipse  Name="menuRoundBig" 5                           Fill="#F4F8FB" 6                           HorizontalAlignment="Center" 7                           VerticalAlignment="Center" 8                           Stroke="#E0E0E0" 9                           StrokeThickness="1"10                           Height="380"11                           Width="380">12                     <Ellipse.Effect>13                         <DropShadowEffect BlurRadius="20"14                                           ShadowDepth="0"15                                           Color="#52D3EC" />16                     </Ellipse.Effect>17                 </Ellipse>18                 <Ellipse   Name="menuRoundSmall"19                            HorizontalAlignment="Center"20                            VerticalAlignment="Center"21                            Stroke="#E0E0E0"22                            StrokeThickness="0"23                            Height="300"24                            Width="300">25                     <Ellipse.Effect>26                         <DropShadowEffect BlurRadius="50"27                                           ShadowDepth="0"28                                           Color="#52D3EC" />29                     </Ellipse.Effect>30                     <Ellipse.Fill>31                         #DFE2E532                     </Ellipse.Fill>33                 </Ellipse>34                 <Ellipse Name="menuRoundCenter"35                          HorizontalAlignment="Center"36                          VerticalAlignment="Center"37                          Stroke="#E0E0E0"38                          StrokeThickness="0"39                          Height="300"40                          Width="300">41                     <Ellipse.Fill>42                         <RadialGradientBrush RadiusX="1"43                                              RadiusY="1"44                                              GradientOrigin="0.7,0.3">45                             <GradientStop Color="White"46                                           Offset="0"></GradientStop>47                             <GradientStop Color="#DFE2E5"48                                           Offset="1"></GradientStop>49                         </RadialGradientBrush>50                     </Ellipse.Fill>51                 </Ellipse>52                 <Image Name="menuCenterimg"53                        Source="/img.png"54                        Height="120"55                        Stretch="Uniform">56                 </Image>57                 <Canvas Name="MenuCanvas"58                         HorizontalAlignment="Center"59                         VerticalAlignment="Center"60                         Height="340"61                         Width="340">62                 </Canvas>63             </Grid>

第二步 布局按钮图：

在这里要用到勾股定理计算6个按钮的坐标，计算过程我就不写了，本来想弄个图的。。弄的也不好。。。这个写博客真是费劲啊。。

就下面的图凑合看吧。。。360度。。总共6个角度所以每个角度60度。

     第三步 在窗口大小改变时如何自适应，而能够保持合适的大小;

     两点 ：

<Grid>                                <Grid.RowDefinitions>                                    <RowDefinition Height="1*"></RowDefinition>                                    <RowDefinition Height="5*"></RowDefinition>                                    <RowDefinition  Height="1*"></RowDefinition>                                </Grid.RowDefinitions>  <Viewbox Name="viewboxAnimUI"                                         Grid.Row="1"></Viewbox><!--  这里放置刚才第一步的代码  --> </Grid>

     看出来了吗：1:5:1  上下空1比例的尺寸 ，中间留5比例尺寸。。。合适的大小；

      加个

Viewbox 这样 wpf 会自动处理内容控件的宽高等比例缩放！是不是很方便很强大呢。 第四部 上截图，上代码了：