wpf 圓形菜單

沒有想象中的簡單奧，咋樣布局6個(gè)按鈕坐標(biāo)才能在正確的對應(yīng)位置呢，漂亮是漂亮，如果窗口寬度高度改變了，它能等比例改變寬高大小么

內(nèi)容區(qū)域：

這里開始主窗口 圓形菜單制作的過程，首先請大家看看下面的截圖，想一想

1.如果你用winform如何開發(fā)呢？ 如果用wpf怎么開發(fā)呢？

2.布局看起來不難做啊。但是真的很簡單么？

3.我的窗體不是想金山毒霸哪有的窗口大小寬高固定的，那如果窗口最大化或者改變了寬高，中間的圓形菜單還是原來的大小，豈不是中間那么大區(qū)域就這么一個(gè)小圈太難看了吧？

大家思考5min后。。繼續(xù)向下看。。。程序員最享受的是思考過程，靜心思考，如果有更好的解決或者實(shí)現(xiàn)方法，或者發(fā)行我實(shí)現(xiàn)的方法有漏洞是留言。。。。

上圖：

第一步 布局背景圖：

我們先設(shè)定好容器gird 為380px 三個(gè)正圓形 一個(gè)是最外面的藍(lán)色光環(huán)，一個(gè)是中間的藍(lán)色光環(huán)，一個(gè)是最內(nèi)部的有點(diǎn)灰色的圓形，在加一個(gè) 中間的小狗 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>

第二步 布局按鈕圖：

在這里要用到勾股定理計(jì)算6個(gè)按鈕的坐標(biāo)，計(jì)算過程我就不寫了，本來想弄個(gè)圖的。。弄的也不好。。。這個(gè)寫博客真是費(fèi)勁啊。。

就下面的圖湊合看吧。。。360度。�？偣�6個(gè)角度所以每個(gè)角度60度。

     第三步 在窗口大小改變時(shí)如何自適應(yīng)，而能夠保持合適的大小;

     兩點(diǎn) ：

<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比例尺寸。。。合適的大小；

      加個(gè)

Viewbox 這樣 wpf 會自動(dòng)處理內(nèi)容控件的寬高等比例縮放！是不是很方便很強(qiáng)大呢。 第四部 上截圖，上代碼了：