WPF 实现 Gitee 气泡菜单（一）
气泡菜单（一）
作者：WPFDevelopersOrg
原文链接： https://github.com/WPFDevelopersOrg/WPFDevelopers
框架使用大于等于
.NET40；Visual Studio 2022;项目使用 MIT 开源许可协议；
需要实现气泡菜单需要使用Canvas画布进行添加内容；
但是为了使用方便需要在ListBox中使用Canvas做为ItemsPanelTemplate；
使用时只需要在ListBox中添加ListBoxItem就行；
1） BubbleControl.cs 代码如下；
BubbleControl.cs 继承 Control创建依赖属性Content；
根据Content集合循环随机生成Width、Height在生成SetLeft、SetTop 需要判断重叠面积不能超过当前面积的百分之六十~九十；
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Diagnostics;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
using WPFDevelopers.Helpers;
namespace WPFDevelopers.Controls
{
[TemplatePart(Name = BorderTemplateName, Type = typeof(Border))]
public class BubbleControl : ContentControl
{
private const string BorderTemplateName = "PART_Border";
public new static readonly DependencyProperty ContentProperty =
DependencyProperty.Register("Content", typeof(ObservableCollection<BubbleItem>), typeof(BubbleControl),
new PropertyMetadata(null));
public new static readonly DependencyProperty BorderBackgroundProperty =
DependencyProperty.Register("BorderBackground", typeof(Brush), typeof(BubbleControl),
new PropertyMetadata(null));
private Border _border;
private double _bubbleItemX, _bubbleItemY;
private Ellipse _ellipse;
private int _number;
private readonly List<Rect> _rects = new List<Rect>();
private RotateTransform _rotateTransform;
private double _size;
private const int _maxSize = 120;
static BubbleControl()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(BubbleControl),
new FrameworkPropertyMetadata(typeof(BubbleControl)));
}
public BubbleControl()
{
Loaded += delegate
{
double left = 0d, top = 0d;
for (var y = 0; y < (int)Height / _maxSize; y++)
{
double yNum = y + 1;
yNum = _maxSize * yNum;
for (var x = 0; x < (int)Width / _maxSize; x++)
{
if (_number > Content.Count - 1)
return;
var item = Content[_number];
if (double.IsNaN(item.Width) || double.IsNaN(item.Height))
SetBubbleItem(item);
_bubbleItemX = Canvas.GetLeft(item);
_bubbleItemY = Canvas.GetTop(item);
if (double.IsNaN(_bubbleItemX) || double.IsNaN(_bubbleItemY))
{
double xNum = x + 1;
xNum = _maxSize * xNum;
_bubbleItemX = ControlsHelper.NextDouble(left,xNum - _size * ControlsHelper.NextDouble(0.6,0.9));
var _width = _bubbleItemX + _size;
_width = _width > Width ? Width - (Width - _bubbleItemX) - _size : _bubbleItemX;
_bubbleItemX = _width;
_bubbleItemY = ControlsHelper.NextDouble(top,yNum - _size * ControlsHelper.NextDouble(0.6, 0.9));
var _height = _bubbleItemY + _size;
_height = _height > Height ? Height - (Height - _bubbleItemY) - _size : _bubbleItemY;
_bubbleItemY = _height;
}
Canvas.SetLeft(item, _bubbleItemX);
Canvas.SetTop(item, _bubbleItemY);
left = left + _size;
if (item.Background is null)
item.Background = ControlsHelper.RandomBrush();
_rects.Add(new Rect(_bubbleItemX, _bubbleItemY, _size, _size));
_number++;
}
left = 0d;
top = top + _maxSize;
}
};
}
public new ObservableCollection<BubbleItem> Content
{
get => (ObservableCollection<BubbleItem>)GetValue(ContentProperty);
set => SetValue(ContentProperty, value);
}
public Brush BorderBackground
{
get => (Brush)this.GetValue(BorderBackgroundProperty);
set => this.SetValue(BorderBackgroundProperty, (object)value);
}
private void SetBubbleItem(BubbleItem item)
{
if (item.Text.Length >= 4)
_size = ControlsHelper.GetRandom.Next(80, _maxSize);
else
_size = ControlsHelper.GetRandom.Next(50, _maxSize);
item.Width = _size;
item.Height = _size;
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
_border = GetTemplateChild(BorderTemplateName) as Border;
}
public override void BeginInit()
{
Content = new ObservableCollection<BubbleItem>();
base.BeginInit();
}
}
}2） ControlsHelper.cs 代码如下；
随机Double值；
随机颜色；
private static long _tick = DateTime.Now.Ticks;
public static Random GetRandom = new Random((int)(_tick & 0xffffffffL) | (int)(_tick >> 32));
public static double NextDouble(double miniDouble, double maxiDouble)
{
if (GetRandom != null)
{
return GetRandom.NextDouble() * (maxiDouble - miniDouble) + miniDouble;
}
else
{
return 0.0d;
}
}
public static Brush RandomBrush()
{
var R = GetRandom.Next(255);
var G = GetRandom.Next(255);
var B = GetRandom.Next(255);
var color = Color.FromRgb((byte)R, (byte)G, (byte)B);
var solidColorBrush = new SolidColorBrush(color);
return solidColorBrush;
}3） BubbleItem.cs 代码如下；
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
namespace WPFDevelopers
{
public class BubbleItem : ListBoxItem
{
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register("Text", typeof(string), typeof(BubbleItem),
new PropertyMetadata(string.Empty));
public static readonly DependencyProperty SelectionCommandProperty =
DependencyProperty.Register("SelectionCommand", typeof(ICommand), typeof(BubbleItem),
new PropertyMetadata(null));
static BubbleItem()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(BubbleItem),
new FrameworkPropertyMetadata(typeof(BubbleItem)));
}
public string Text
{
get => (string)GetValue(TextProperty);
set => SetValue(TextProperty, value);
}
public ICommand SelectionCommand
{
get => (ICommand)GetValue(SelectionCommandProperty);
set => SetValue(SelectionCommandProperty, value);
}
}
}4） BubbleControl.xaml 代码如下；
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:WPFDevelopers.Controls">
<Style TargetType="{x:Type controls:BubbleControl}">
<Setter Property="Width" Value="400"/>
<Setter Property="Height" Value="400"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:BubbleControl">
<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
<Border BorderBrush="#E9E9E9" BorderThickness="1"
Background="#FAFAFA"
Margin="45"
CornerRadius="400"
x:Name="PART_Border">
<Ellipse Fill="#FFFFFF" Margin="20"/>
</Border>
<ListBox ItemsSource="{TemplateBinding Content}"
Background="Transparent" BorderBrush="Transparent"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type local:BubbleItem}">
<Setter Property="Canvas.Left" Value="{Binding (Canvas.Left)}"/>
<Setter Property="Canvas.Top" Value="{Binding (Canvas.Top)}"/><ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:WPFDevelopers.Controls">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Basic/ControlBasic.xaml"/>
<ResourceDictionary Source="Basic/Animations.xaml"/>
</ResourceDictionary.MergedDictionaries>
<Style TargetType="{x:Type controls:BubbleControl}" BasedOn="{StaticResource ControlBasicStyle}">
<Setter Property="Width" Value="400"/>
<Setter Property="Height" Value="400"/>
<Setter Property="Background" Value="{StaticResource WhiteSolidColorBrush}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="{StaticResource SecondaryTextSolidColorBrush}"/>
<Setter Property="BorderBackground" Value="{StaticResource BaseSolidColorBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:BubbleControl">
<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding BorderBackground}"
Margin="45"
CornerRadius="400"
x:Name="PART_Border">
<Ellipse Fill="{TemplateBinding Background}" Margin="20"/>
</Border>
<ListBox ItemsSource="{TemplateBinding Content}"
Background="Transparent" BorderBrush="Transparent"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
Style="{x:Null}">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type controls:BubbleItem}">
<Setter Property="Canvas.Left" Value="{Binding (Canvas.Left)}"/>
<Setter Property="Canvas.Top" Value="{Binding (Canvas.Top)}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:BubbleItem">
<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
<Ellipse Fill="{TemplateBinding Background}" Opacity=".6"/>
<TextBlock VerticalAlignment="Center"
HorizontalAlignment="Center"
Padding="10,0">
<Hyperlink
Foreground="{StaticResource BlackSolidColorBrush}"
Command="{TemplateBinding SelectionCommand}">
<TextBlock Text="{TemplateBinding Text}"
TextAlignment="Center"
TextTrimming="CharacterEllipsis"
ToolTip="{TemplateBinding Text}"/>
</Hyperlink>
</TextBlock>
</Grid>
<ControlTemplate.Triggers>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas IsItemsHost="True" Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>5） BubbleControlExample.xaml 代码如下；
<local:BubbleControl x:Name="MyBubbleControl">
<wpfdev:BubbleControl.Content>
<wpfdev:BubbleItem Text="WPF"
SelectionCommand="{Binding WPFCommand,RelativeSource={RelativeSource AncestorType=local:BubbleControlExample}}"/>
<wpfdev:BubbleItem Text="ASP.NET"/>
<wpfdev:BubbleItem Text="WinUI"/>
<wpfdev:BubbleItem Text="WebAPI"/>
<wpfdev:BubbleItem Text="Blazor"/>
<wpfdev:BubbleItem Text="MAUI"
SelectionCommand="{Binding MAUICommand,RelativeSource={RelativeSource AncestorType=local:BubbleControlExample}}"/>
<wpfdev:BubbleItem Text="Xamarin"/>
<wpfdev:BubbleItem Text="WinForm"/>
<wpfdev:BubbleItem Text="UWP"/>
</wpfdev:BubbleControl.Content>
</local:BubbleControl>6） BubbleControlExample.xaml.cs 代码如下；
using System.Windows.Controls;
using System.Windows.Input;
using WPFDevelopers.Samples.Helpers;
namespace WPFDevelopers.Samples.ExampleViews
{
/// <summary>
/// BubbleControlExample.xaml 的交互逻辑
/// </summary>
public partial class BubbleControlExample : UserControl
{
public BubbleControlExample()
{
InitializeComponent();
}
public ICommand WPFCommand => new RelayCommand(delegate
{
WPFDevelopers.Minimal.Controls.MessageBox.Show("点击了“WPF开发者”.", "提示");
});
public ICommand MAUICommand => new RelayCommand(delegate
{
WPFDevelopers.Minimal.Controls.MessageBox.Show("点击了“MAUI开发者”.", "提示");
});
}
}
扫一扫
1123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
