title | author | date | CreateTime | categories |
win10 uwp 气泡 | lindexi | 2018-08-10 19:16:50 +0800 | 2018-2-13 17:23:3 +0800 | Win10 UWP |
如果做聊天工具，需要气泡。 本文，如果写一个气泡控件需要如何做
## WPF 气泡
先说如何在 WPF 做一个气泡。
可以看到，气泡就是一个和 Grid 差不多的东西，只是有边框，边框是一个气泡
如何去写一个外框？
可以新建一个类，继承 Decorator ，就可以啦
现在的难点是如何获得子元素的大小。
可以看到一个气泡是尖的气泡和一个矩形组成
我做了一些修改，先做一个像这样的气泡
气泡分为两部分，一个是尖头一个矩形
可以看到，尖头大小可以固定，但是矩形必须使用子控件的大小
于是先假如子元素的宽度是100，高度 50 ，这样来画一个气泡。
如何画一个三角？
假设尖头宽度 10 高度 5 ，那么可以看到第一个点是 （0，5） 第二个点是 （5，0） 第三个点是 （10，5）
需要知道， WPF 使用的布局不是和以前课本说的一样
但是除了尖头，还需要添加矩形的距离
添加的距离是矩形宽度的一半减去5，看到这里一般不会觉得有困难。
于是添加到实际的值，这里矩形宽度为 100 于是最后的值就是 （45，5） ，第二个点是 （50，0） 第三个点是 （55，5）
接下来就是计算矩形的值，矩形的值就是 x=0 y=5 ，宽度 100 高度 50
计算出来，就需要画出来。
PathFigure 可以画线，也就是通过他给他三个点就好
把上面的几个点写出来
new PathFigure
{
IsClosed = false,
StartPoint = new Point(45, 5),
Segments = new PathSegmentCollection()
{
new LineSegment(new Point(50), 0), true),
new LineSegment(new Point(55, 5), true)
}
}
但需要把三角加到 PathGeometry 才可以显示
Geometry1 = new PathGeometry()
{
Figures = new PathFigureCollection()
{
new PathFigure
{
IsClosed = false,
StartPoint = new Point(45, 5),
Segments = new PathSegmentCollection()
{
new LineSegment(new Point(50), 0), true),
new LineSegment(new Point(55, 5), true)
}
}
}
}
这样写在界面path，可以看到显示出来三角形，因为没有设置线条，所以没有把鼠标移到三角是看不到的
接着需要画矩形
Geometry2 = new RectangleGeometry(new Rect(0, 5, 100,
50)
, 0, 0)
但是如何直接把两个显示，看起来是不对的，因为是一个矩形和三角，不是气泡
所以组合一下图形就好
var cg = new CombinedGeometry
{
Geometry1 ,
Geometry2 ,
GeometryCombineMode = GeometryCombineMode.Xor
};
但是实际需要获得子元素的大小，也需要显示，那么显示可以先重写 OnRender
从 OnRender 画出的方法很简单
GuidelineSet guideLines = new GuidelineSet();
drawingContext.PushGuidelineSet(guideLines);
drawingContext.DrawGeometry(brush, pen, cg);
其中的 颜色自己定义，cg就是上面的图形。
但是这样的自定义控件需要设置宽高，如何使用子元素的宽高加上自己的padding？
如果只是重新显示，那么界面是不知道气泡的大小，所以得到的是没显示，为了让气泡可以显示，先给他一个宽高，这样就可以演示。
但是我需要直接就写如何获取子元素的大小，把他作为气泡的大小。
获取子元素可以通过重写 MeasureOverride
第一步，测量子元素，通过子元素可以获得高度宽度
Child.Measure(constraint);
定义自己的 padding ，这个值先随意给，表示气泡离元素距离
那么计算得到自己的大小就是 子元素的宽高加上 padding 加上气泡需要的外框
因为对于高度，需要加上气泡的高度 5 才可以，代码很容易就看懂，我就不说啦
protected override Size MeasureOverride(Size constraint)
{
Thickness padding = Padding;
Size result = new Size();
if (Child != null)
{
//测量子控件的大小
Child.Measure(constraint);
result.Width = Child.DesiredSize.Width + padding.Left + padding.Right;
result.Height = Child.DesiredSize.Height + padding.Top + padding.Bottom + 5;
}
return result;
}
拿到了子控件的高度，还需要重写自己的布局
protected override Size ArrangeOverride(Size arrangeSize)
{
Thickness padding = Padding;
if (Child != null)
{
Size result = new Size();
Child.Arrange(new Rect(new Point(padding.Left, 5 + padding.Top), Child.DesiredSize));
result.Width = Child.DesiredSize.Width + padding.Left + padding.Right;
result.Height = Child.DesiredSize.Height + padding.Top + padding.Bottom + 5;
return result;
}
return arrangeSize;
}
这里出现很多个 5 ，意思就是气泡高度，为了设置气泡高度，所以给他一个属性。
public double HeadHeight
{
get
{
return (double)GetValue(HeadHeightProperty);
}
set
{
SetValue(HeadHeightProperty, value);
}
}
/// <summary>
/// 标识 <see cref="HeadHeight" /> 的依赖项属性。
/// </summary>
public static readonly DependencyProperty HeadHeightProperty = DependencyProperty.Register(
"HeadHeight", typeof(double), typeof(PeakedAdorner), new PropertyMetadata(5d));
现在可以修改一下代码，让他可以自动适应
矩形的宽高可以通过自己的大小计算
Geometry2 = new RectangleGeometry(new Rect(0, HeadHeight, ActualWidth,
ActualHeight - HeadHeight)
, 0, 0)
可以看到 坐标没有变化，有变化的是高度，宽度，可以通过获得自己的大小设置，因为在计算大小已经从子元素加上自己的需要大小，所以得到的大小可以设置
那么现在的 OnRender 可以写为
protected override void OnRender(DrawingContext drawingContext)
{
Pen pen = new Pen();
pen.Brush = BorderBrush;
pen.Thickness = BorderThickness;
var leftpad = (ActualWidth - HeadWidth) / 2;
var cg = new CombinedGeometry
{
Geometry1 = new PathGeometry()
{
Figures = new PathFigureCollection()
{
new PathFigure
{
IsClosed = false,
StartPoint = new Point(leftpad, HeadHeight),
Segments = new PathSegmentCollection()
{
new LineSegment(new Point(leftpad + (HeadWidth / 2), 0), true),
new LineSegment(new Point(leftpad + HeadWidth, HeadHeight), true)
}
}
}
},
Geometry2 = new RectangleGeometry(new Rect(0, HeadHeight, ActualWidth,
ActualHeight - HeadHeight)
, 0, 0),
GeometryCombineMode = GeometryCombineMode.Xor
};
GuidelineSet guideLines = new GuidelineSet();
drawingContext.PushGuidelineSet(guideLines);
drawingContext.DrawGeometry(Background, pen, cg);
}
BorderBrush 也是自己设置的 ，BorderThickness 也是，于是继续设置背景色 Background 和其它的如圆角
现在看起来的属性是
public static readonly DependencyProperty BackgroundProperty =
DependencyProperty.Register("Background", typeof(Brush), typeof(PeakedAdorner)
, new PropertyMetadata(new SolidColorBrush(Color.FromRgb(255, 255, 255))));
public static readonly DependencyProperty PaddingProperty =
DependencyProperty.Register("Padding", typeof(Thickness), typeof(PeakedAdorner)
, new PropertyMetadata(new Thickness(10, 5, 10, 5)));
public static readonly DependencyProperty BorderBrushProperty =
DependencyProperty.Register("BorderBrush", typeof(Brush), typeof(PeakedAdorner)
, new PropertyMetadata(new SolidColorBrush(Colors.Black)));
public static readonly DependencyProperty BorderThicknessProperty =
DependencyProperty.Register("BorderThickness", typeof(double), typeof(PeakedAdorner),
new PropertyMetadata(1d));
/// <summary>
/// 标识 <see cref="HeadWidth" /> 的依赖项属性。
/// </summary>
public static readonly DependencyProperty HeadWidthProperty = DependencyProperty.Register(
"HeadWidth", typeof(double), typeof(PeakedAdorner), new PropertyMetadata(0d));
/// <summary>
/// 标识 <see cref="HeadHeight" /> 的依赖项属性。
/// </summary>
public static readonly DependencyProperty HeadHeightProperty = DependencyProperty.Register(
"HeadHeight", typeof(double), typeof(PeakedAdorner), new PropertyMetadata(5d));
public static readonly DependencyProperty CornerRadiusProperty =
DependencyProperty.Register("CornerRadius", typeof(CornerRadius)
, typeof(PeakedAdorner), new PropertyMetadata(new CornerRadius(0)));
/// <summary>
/// 背景色
/// </summary>
public Brush Background
{
get
{
return (Brush)GetValue(BackgroundProperty);
}
set
{
SetValue(BackgroundProperty, value);
}
}
/// <summary>
/// 内边距
/// </summary>
public Thickness Padding
{
get
{
return (Thickness)GetValue(PaddingProperty);
}
set
{
SetValue(PaddingProperty, value);
}
}
/// <summary>
/// 边框颜色
/// </summary>
public Brush BorderBrush
{
get
{
return (Brush)GetValue(BorderBrushProperty);
}
set
{
SetValue(BorderBrushProperty, value);
}
}
/// <summary>
/// 边框大小
/// </summary>
public double BorderThickness
{
get
{
return (double)GetValue(BorderThicknessProperty);
}
set
{
SetValue(BorderThicknessProperty, value);
}
}
/// <summary>
/// 获取或设置尖角width
/// </summary>
public double HeadWidth
{
get
{
return (double)GetValue(HeadWidthProperty);
}
set
{
SetValue(HeadWidthProperty, value);
}
}
/// <summary>
/// 获取或设置尖角
/// </summary>
public double HeadHeight
{
get
{
return (double)GetValue(HeadHeightProperty);
}
set
{
SetValue(HeadHeightProperty, value);
}
}
/// <summary>
/// 边框大小
/// </summary>
public CornerRadius CornerRadius
{
get
{
return (CornerRadius)GetValue(CornerRadiusProperty);
}
set
{
SetValue(CornerRadiusProperty, value);
}
}
如何使用？
<local:PeakedAdorner CornerRadius="5" Margin="0,0,0.4,-0.2" >
<TextBlock Text="林德熙"></TextBlock>
</local:PeakedAdorner>
这样就好了，里面的控件可以是任何的，你想要的，如Grid ，textBox
现在看起来就是这样
这样就做好气泡，如果需要气泡显示在其他的，那么可以通过自己计算，所有的值需要放在哪
