wpf 客戶端【JDAgent桌面助手】開發詳解（一）主窗口 圓形菜單

 目錄區域：

wpf 客戶端【JDAgent桌面助手】業余開發的終於完工了。。曬曬截圖
wpf 客戶端【JDAgent桌面助手】開發詳解-開篇

---

內容區域：

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

1.如果你用winform如何開發呢？ 如果用wpf怎么開發呢？

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

 

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

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

上圖：

 

 

第一步 布局背景圖：

我們先設定好容器gird 為380px 三個正圓形 一個是最外面的藍色光環，一個是中間的藍色光環，一個是最內部的有點灰色的圓形，在加一個 中間的小狗 Ok 簡單布局就好了:

 <Grid Height="380"
                  Width="380"
                  Name="menuGrid">
                <Ellipse  Name="menuRoundBig"
                          Fill="#F4F8FB"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center"
                          Stroke="#E0E0E0"
                          StrokeThickness="1"
                          Height="380"
                          Width="380">
                    <Ellipse.Effect>
                        <DropShadowEffect BlurRadius="20"
                                          ShadowDepth="0"
                                          Color="#52D3EC" />
                    </Ellipse.Effect>
                </Ellipse>
                <Ellipse   Name="menuRoundSmall"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center"
                           Stroke="#E0E0E0"
                           StrokeThickness="0"
                           Height="300"
                           Width="300">
                    <Ellipse.Effect>
                        <DropShadowEffect BlurRadius="50"
                                          ShadowDepth="0"
                                          Color="#52D3EC" />
                    </Ellipse.Effect>
                    <Ellipse.Fill>
                        #DFE2E5
                    </Ellipse.Fill>
                </Ellipse>
                <Ellipse Name="menuRoundCenter"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
                         Stroke="#E0E0E0"
                         StrokeThickness="0"
                         Height="300"
                         Width="300">
                    <Ellipse.Fill>
                        <RadialGradientBrush RadiusX="1"
                                             RadiusY="1"
                                             GradientOrigin="0.7,0.3">
                            <GradientStop Color="White"
                                          Offset="0"></GradientStop>
                            <GradientStop Color="#DFE2E5"
                                          Offset="1"></GradientStop>
                        </RadialGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <Image Name="menuCenterimg"
                       Source="/img.png"
                       Height="120"
                       Stretch="Uniform">
                </Image>
                <Canvas Name="MenuCanvas"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Height="340"
                        Width="340">
                </Canvas>
            </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 會自動處理內容控件的寬高等比例縮放！是不是很方便很強大呢。

第四部 上截圖，上代碼了：



下載：（由於博客園只提供30M的空間，用完后就得自己傳到網盤里了，所以提供csdn下載，但是0積分啊親。。。哎這年月容易么，上個碼還不敢要分，感覺好的親們。。推薦一個唄。。。）
http://download.csdn.net/detail/gwxyyuqiang/6962087