實現效果如下：
思路：扇形自定義控制項組合成半圓型選單，再通過clip實現選單的展開和摺疊。
步驟：1、扇形自定義控制項circularsectorcontrol
窗體布局xaml：
互動邏輯：
public static readonly dependencyproperty displayimageproperty = dependencyproperty.register("displayimage", typeof(imagesource), typeof(circularsectorcontrol), new propertymetadata(null));
public imagesource displayimage
set
}public static readonly dependencyproperty backgroundcolorproperty = dependencyproperty.register("backgroundcolor", typeof(solidcolorbrush), typeof(circularsectorcontrol), new propertymetadata(null));
public solidcolorbrush backgroundcolor
set
}public circularsectorcontrol()
private www.cppcns.comvoid maingrid_mouseenter(object sender, mouseeventargs e)
private void maingrid_mousele**e(object sender, mouseeventargs e)
2、半圓型選單控制項
窗體布局xaml：
bagfmklarsectorcontrol backgroundcolor="#f45757" displayimage="images/4.png">
互動邏輯：
//委託
public delegate void eventhandle(bool isshow);
public event eventhandle showclickevent;
private storyboard storyboard = new storyboard();
程式設計客棧
public roundmenucontrol()
private void updateellipse(object sender, eventargs e)
private void bottomgrid_mouseleftbuttondown(object sender, mousebuttoneventargs e)
else
}3、主窗體呼叫
窗體布局xaml：
bagfmk=""
xmlns:x=""
xmlns:d=""
xmlns:mc=""
xmlns:local="clr-namespace:roundmenu"
title="mainwindow" width="650" height="400" background="#f6c06d" windowstartuplocation="centerscreen">
互動邏輯：
public mainwindow()
private void roundmenu_showclickevent(bool isshow)
本文標題: wpf實現半圓形導航選單
本文位址:
半圓形進度條 vue
circle progress canvas width 150 height 150 canvas div template export default mounted methods smallcircle2 cx,cy,r 畫圓 circle cx,cy,r 畫弧線 sector cx,cy...
Kotlin實現的半圓形進度條
github位址 compile com.blackflagbin semicircleprogressview 0.0.3 複製 android id id progress android layout width 300dp android layout height wrap content...
css3 給頁面加個半圓形導航條
主要是利用了css3的 rolate 旋轉 和 skew 傾斜 樣式 先上 html 很簡單 這裡的i標籤 用了乙個第三方庫 接下來是css 先來個半圓形button cn button主要起作用的是 border radius 50 可以試一下,如果想把乙個div變成圓形,就用這行 那半圓呢?你把...