WPF實(shí)現(xiàn)半圓形導(dǎo)航菜單
更新時(shí)間：2020年08月28日 14:33:01 作者：RunnerDNA
這篇文章主要為大家詳細(xì)介紹了WPF實(shí)現(xiàn)半圓形導(dǎo)航菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了WPF實(shí)現(xiàn)半圓形導(dǎo)航菜單的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)效果如下：
思路：
扇形自定義控件組合成半圓型菜單，再通過clip實(shí)現(xiàn)菜單的展開和折疊。
步驟：
1、扇形自定義控件CircularSectorControl
窗體布局xaml：
<Grid x:Name="mainGrid" MouseEnter="MainGrid_MouseEnter" MouseLeave="MainGrid_MouseLeave">
<Path x:Name="sectorPath" Data="M 200,200 0,200 A 200,200 0 0 1 58.6,58.6z" Fill="{Binding ElementName=sector, Path=BackgroundColor}"></Path>
<Image Source="{Binding ElementName=sector, Path=DisplayImage}" Stretch="Fill" Width="35" Height="35" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="40,10">
<Image.RenderTransform>
<RotateTransform Angle="-67.5"></RotateTransform>
</Image.RenderTransform>
</Image>
</Grid>
交互邏輯：
public static readonly DependencyProperty DisplayImageProperty = DependencyProperty.Register("DisplayImage", typeof(ImageSource), typeof(CircularSectorControl), new PropertyMetadata(null));
public ImageSource DisplayImage
{
get { return (ImageSource)GetValue(DisplayImageProperty); }
set { SetValue(DisplayImageProperty, value); }
}
public static readonly DependencyProperty BackgroundColorProperty = DependencyProperty.Register("BackgroundColor", typeof(SolidColorBrush), typeof(CircularSectorControl), new PropertyMetadata(null));
public SolidColorBrush BackgroundColor
{
get { return (SolidColorBrush)GetValue(BackgroundColorProperty); }
set { SetValue(BackgroundColorProperty, value); }
}
public CircularSectorControl()
{
InitializeComponent();
}
private void MainGrid_MouseEnter(object sender, MouseEventArgs e)
{
this.sectorPath.Fill = new SolidColorBrush(Color.FromRgb(246,111,111));
}
private void MainGrid_MouseLeave(object sender, MouseEventArgs e)
{
this.sectorPath.Fill = BackgroundColor;
}
2、半圓型菜單控件
窗體布局xaml：
<UserControl.Resources>
<Storyboard x:Key="stbShow">
<DoubleAnimation Storyboard.TargetName="myEllipseGeometry"
Storyboard.TargetProperty="RadiusX"
Duration="0:0:0.5" From="0" To="200"
FillBehavior="HoldEnd"/>
<DoubleAnimation Storyboard.TargetName="myEllipseGeometry"
Storyboard.TargetProperty="RadiusY"
Duration="0:0:0.5" From="0" To="200"
FillBehavior="HoldEnd" />
</Storyboard>
<Storyboard x:Key="stbHide">
<DoubleAnimation Storyboard.TargetName="myEllipseGeometry"
Storyboard.TargetProperty="RadiusX"
Duration="0:0:0.5" From="200" To="0"
FillBehavior="HoldEnd"/>
<DoubleAnimation Storyboard.TargetName="myEllipseGeometry"
Storyboard.TargetProperty="RadiusY"
Duration="0:0:0.5" From="200" To="0"
FillBehavior="HoldEnd" />
</Storyboard>
</UserControl.Resources>
<Canvas x:Name="mainCanvas" Cursor="Hand" ClipToBounds="True">
<Canvas x:Name="sectorCanvas">
<local:CircularSectorControl BackgroundColor="#F44E4E" DisplayImage="Images/1.png"></local:CircularSectorControl>
<local:CircularSectorControl BackgroundColor="#F45757" DisplayImage="Images/2.png">
<local:CircularSectorControl.RenderTransform>
<RotateTransform Angle="45" CenterX="200" CenterY="200"></RotateTransform>
</local:CircularSectorControl.RenderTransform>
</local:CircularSectorControl>
<local:CircularSectorControl BackgroundColor="#F44E4E" DisplayImage="Images/3.png">
<local:CircularSectorControl.RenderTransform>
<RotateTransform Angle="90" CenterX="200" CenterY="200"></RotateTransform>
</local:CircularSectorControl.RenderTransform>
</local:CircularSectorControl>
<local:CircularSectorControl BackgroundColor="#F45757" DisplayImage="Images/4.png">
<local:CircularSectorControl.RenderTransform>
<RotateTransform Angle="135" CenterX="200" CenterY="200"></RotateTransform>
</local:CircularSectorControl.RenderTransform>
</local:CircularSectorControl>
</Canvas>
<Path>
<Path.Data>
<EllipseGeometry x:Name="myEllipseGeometry" RadiusX="0" RadiusY="0" Center="200,200"></EllipseGeometry>
</Path.Data>
</Path>
<Grid x:Name="bottomGrid" Canvas.Left="150" Canvas.Top="150" MouseLeftButtonDown="BottomGrid_MouseLeftButtonDown">
<Path Data="M 0,0 A 100,100 1 0 1 200,0z" Fill="White" Stretch="Fill" Width="100" Height="50"/>
<TextBlock x:Name="bottomTB" Text="+" FontSize="38" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Grid>
</Canvas>
交互邏輯：
//委托
public delegate void EventHandle(bool isShow);
public event EventHandle ShowClickEvent;
private Storyboard storyboard = new Storyboard();
public RoundMenuControl()
{
InitializeComponent();
CompositionTarget.Rendering += UpdateEllipse;
}
private void UpdateEllipse(object sender, EventArgs e)
{
this.sectorCanvas.Clip = this.myEllipseGeometry;
}
private void BottomGrid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (this.bottomTB.Text == "+")
{
this.bottomTB.Text = "-";
Storyboard stbShow = (Storyboard)FindResource("stbShow");
stbShow.Begin();
ShowClickEvent?.Invoke(true);
}
else
{
this.bottomTB.Text = "+";
Storyboard stbHide = (Storyboard)FindResource("stbHide");
stbHide.Begin();
ShowClickEvent?.Invoke(false);
}
}
3、主窗體調(diào)用
窗體布局xaml：
<Window x:Class="RoundMenu.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:RoundMenu"
Title="MainWindow" Width="650" Height="400" Background="#f6c06d" WindowStartupLocation="CenterScreen">
<Grid>
<local:RoundMenuControl x:Name="roundMenu" Margin="125,170,100,0"></local:RoundMenuControl>
</Grid>
</Window>
交互邏輯：
public MainWindow()
{
InitializeComponent();
this.roundMenu.ShowClickEvent += RoundMenu_ShowClickEvent;
}
private void RoundMenu_ShowClickEvent(bool isShow)
{
if (isShow)
this.Background = new SolidColorBrush(Color.FromRgb(255, 128, 79));
else
this.Background = new SolidColorBrush(Color.FromRgb(246, 192, 109));
}
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在對(duì)類訪問使用時(shí)，常用到的有訪問類的成員、方法。本文就將通過示例為大家詳細(xì)講講C#中類的使用教程，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)學(xué)習(xí)2022-07-07
C#WinForm實(shí)現(xiàn)多語言切換的示例
本文主要介紹了C#WinForm實(shí)現(xiàn)多語言切換的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了c# 信號(hào)量和互斥體的相關(guān)資料,文中講解非常細(xì)致，示例代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
checkbox是VS2012的常用控件之一，可以方便的為某些功能取消或啟用，下面教你如何簡單使用checkbox。本文通過兩種方法給大家介紹，需要的朋友一起看看吧2015-09-09
C#實(shí)現(xiàn)讓窗體獲得焦點(diǎn)的方法示例
這篇文章主要介紹了C#實(shí)現(xiàn)讓窗體獲得焦點(diǎn)的方法,涉及C#窗體事件相關(guān)操作技巧,需要的朋友可以參考下2017-06-06
C#生成帶二維碼的專屬微信公眾號(hào)推廣海報(bào)實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于利用C#如何生成帶二維碼的專屬微信公眾號(hào)推廣海報(bào)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們一起來看看吧2018-12-12
本文主要介紹了使用VS2019生成C#應(yīng)用安裝包的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
WPF實(shí)現(xiàn)帶模糊搜索的DataGrid的示例代碼
這篇文章主要為大家詳細(xì)介紹了WPF如何實(shí)現(xiàn)帶模糊搜索的DataGrid，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，需要的可以參考一下2023-02-02
這篇文章介紹了使用C#中的Flags特性，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
C#實(shí)現(xiàn).net頁面之間傳值傳參方法匯總
這篇文章主要介紹了C#實(shí)現(xiàn).net頁面之間傳值傳參方法,實(shí)例匯總了幾類常見的傳值傳參的方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-10-10