本帖最后由 xxlost 于 2016-8-10 17:39 编辑

Hello大家好!最近在做JJChat时需要实现一个类似QQ那样的拖动删除功能，无奈我没有找到这样的现成demo。那就自己动手做一个吧；
根据效果来看应该是俩圆加上一个闭合的贝塞尔曲线，OK 但是，Xmal里圆时不能放textblock的，那就只有用border咯。
By the way：今天突然想到控件的扩展属性在后台怎么访问；比如Canvas.Top;是这样的：Canvas.SetTop(Element,Value)
好了，废话就不多说了，直接上代码：
Xmal：
<UserControl
x:Class=“App1.MyUserControl1“
xmlns=“http://schemas.microsoft.com/winfx/2006/xaml/presentation“
xmlns:x=“http://schemas.microsoft.com/winfx/2006/xaml“
xmlns:local=“using:App1“
xmlns:d=“http://schemas.microsoft.com/expression/blend/2008“
xmlns:mc=“http://schemas.openxmlformats.org/markup-compatibility/2006“
mc:Ignorable=“d“
d:DesignHeight=“300“
d:DesignWidth=“400“>
<Grid>
<Canvas Name=“grid“ Width=“{x:Bind Radius}“ Height=“{x:Bind Radius}“>
<Border x:Name=“down“ Width=“{x:Bind Radius}“ Height=“{x:Bind Radius}“ Background=“Red“ VerticalAlignment=“Top“ HorizontalAlignment=“Left“/>
<Path x:Name=“path“ StrokeThickness=“1“ Fill=“Red“ VerticalAlignment=“Top“ HorizontalAlignment=“Left“ >
<Path.Data>
<GeometryGroup FillRule=“EvenOdd“>

<PathGeometry >
<PathGeometry.Figures>
<PathFigureCollection>

<PathFigure x:Name=“start1“ >
<PathFigure.Segments>
<PathSegmentCollection>
<BezierSegment x:Name=“ber1“ />
<LineSegment Point=“{Binding ElementName=ber2,Path=Point3,Mode=OneWay}“/>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
<PathFigure x:Name=“start2“ >
<PathFigure.Segments>
<PathSegmentCollection>
<BezierSegment x:Name=“ber2“/>
<LineSegment Point=“{Binding ElementName=ber1,Path=Point3,Mode=OneWay}“/>

</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>

</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</GeometryGroup>
</Path.Data>
</Path>

<Border x:Name=“top“ Width=“{x:Bind Radius}“ Height=“{x:Bind Radius}“ ManipulationMode=“All“ ManipulationDelta=“top_ManipulationDelta“ VerticalAlignment=“Top“ HorizontalAlignment=“Left“ Background=“Red“ RenderTransformOrigin=“0.5,0.5“ ManipulationCompleted=“top_ManipulationCompleted“>

<TextBlock x:Name=“MsgCount“ Text=“1“ Foreground=“White“ VerticalAlignment=“Center“ HorizontalAlignment=“Center“/>
</Border>

</Canvas>
</Grid>
</UserControl>

CS：
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The User Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234236

namespace App1
{
public sealed partial class MyUserControl1 : UserControl
{
TranslateTransform translate;
CompositeTransform scale;
TranslateTransform pathtrans;
double center;
double r ;
private double distans;
/// <summary>
/// 已拖动距离
/// </summary>
public double Distans { get { return distans; } }
/// <summary>
/// 消除距离
/// </summary>
public double MaxDistans { set { r = value; } }
/// <summary>
/// 颜色
/// </summary>
public new Brush Background
{
get { return top.Background; }
set
{
top.Background = down.Background = path.Fill = value;
}
}
/// <summary>
/// 字体颜色
/// </summary>
public new Brush Foreground
{
get { return MsgCount.Foreground; }
set { MsgCount.Foreground = value; }
}
/// <summary>
/// 文字
/// </summary>
public string Text
{
get { return MsgCount.Text; }
set { MsgCount.Text = value; }
}
/// <summary>
/// 大小： 直径
/// </summary>
public double Radius
{
get { return top.Width; }
set
{
top.Width = top.Height = down.Width = down.Height = grid.Width = grid.Height = value;

}
}
/// <summary>
/// 圆角
/// </summary>
public CornerRadius CornerRadius
{
get { return top.CornerRadius; }
set { top.CornerRadius = down.CornerRadius = value; }
}

public MyUserControl1()
{
this.InitializeComponent();
translate = new TranslateTransform();
scale = new CompositeTransform();
pathtrans = new TranslateTransform();
path.RenderTransform = pathtrans;

top.RenderTransform = translate;
down.RenderTransform = scale;

}
private void top_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
center = Radius /2;
scale.CenterX = scale.CenterY = Radius / 2;
if (!e.IsInertial)
{
translate.X += e.Delta.Translation.X;
translate.Y += e.Delta.Translation.Y;

distans = Math.Sqrt(translate.X * translate.X + translate.Y * translate.Y);

if (distans < r)
{
scale.ScaleX = scale.ScaleY = (r - distans) / r;

TransformPath();
}
else
{
path.Fill = null;
down.Background = null;
}

}

}
async private void TransformPath()
{
distans += Math.Sqrt((1 - scale.ScaleY) * down.ActualHeight * (1 - scale.ScaleY) * down.ActualHeight * 2);

double cos = translate.Y / distans;
double sin = translate.X / distans;
double rdown = Radius / 2 * scale.ScaleY;
double rtop = Radius / 2;
await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.High, () =>
{

start1.StartPoint = new Point(center - rdown * cos, center + rdown * sin);
ber1.Point3 = new Point(center + translate.X - (rtop) * cos, center + translate.Y + (rtop) * sin);
ber1.Point1 = new Point(translate.X * 1 / 3 + center - (rdown / 2) * cos, translate.Y * 1 / 3 + center + rdown / 2 * sin);
ber1.Point2 = new Point(translate.X * 2 / 3 + center - (rdown / 2) * cos, translate.Y * 2 / 3 + center + rdown / 2 * sin);

start2.StartPoint = new Point(center + translate.X + (rtop) * cos, center + translate.Y - (rtop) * sin);//

ber2.Point3 = new Point(center + rdown * cos, center - rdown * sin);

ber2.Point1 = new Point(translate.X * 2 / 3 + center + rdown / 2 * cos, translate.Y * 2 / 3 + center - rdown / 2 * sin);

ber2.Point2 = new Point(translate.X * 1 / 3 + center + rdown / 2 * cos, translate.Y * 1 / 3 + center - rdown / 2 * sin);
path.Fill = top.Background;
down.Background = top.Background;

});
}
private void top_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
translate.X = translate.Y = 0;
scale.ScaleX = scale.ScaleY = (r - distans) / r;
TransformPath();

}
}
}
做成一个Usercontorl，这样就可以在其他地方直接用啦！当然如果你还有更好的实现方法，请告诉我！
这里没有做动画，如果需要的话可以加上动画哦
<local:MyUserControl1 />
今天吹牛到此结束！
***图片停止解析***