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


 目錄區域:

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


內容區域:

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

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                         #DFE2E5
32                     </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 會自動處理內容控件的寬高等比例縮放!是不是很方便很強大呢。

第四部 上截圖,上代碼了:



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



 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM