wpf - 创建循环 GUI

Question

所以我最近的一个副项目是开发一个应用程序检测和填充助手。以编程方式，我完全可以为我想要完成的任务填充后端代码。但是我在 GUI 上遇到了障碍。我需要一个从任务栏延伸到标准 Windows 操作系统右下角的四分之一圆的 GUI。当用户双击应用程序时，圆圈会旋转到 View 中。我可以使用具有透明背景和精美背景图像的典型 Windows 窗体来做到这一点。但是当用户打开应用程序时，表单的正方形属性仍然适用。而且我不想在圈子打开时阻止用户使用更高优先级的应用程序。



我并没有真正停留在任何一种特定的编程语言上。虽然，我更希望它不包含太多 3d 渲染，因为它应该是一个计算助手，并且在用户浏览时不应该保持大量的 RAM/CPU 消耗。

其次，我希望外环的槽口可以移动，并延伸到 gui 之外仅一厘米左右。

如果我没有在互联网上搜索有关此功能的方向，我就不会在这里。但我发现这种性质的应用程序 GUI 往往最常用于移动环境。

所以我的问题是:我怎样才能做到这一点？我可以用什么编程语言写这个？这是当前可用的功能吗？我是否必须为了设计而牺牲用户控制？

Answer 1

我写了一些代码做一些接近你描述的事情。

我不确定你是否希望圆圈出现，所以我只是让它的一部分始终可见。
我没有得到关于移动外环的部分。



创建和放置窗口

XAML 非常简单，它只需要一个网格来承载圆圈的部分，以及一些用于删除窗口装饰和任务栏图标的属性:

<Window x:Class="circle.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Circle"
        Width="250"
        Height="250"
        AllowsTransparency="True"
        Background="Transparent"
        MouseDown="WindowClicked"
        ShowInTaskbar="False"
        WindowStyle="None">
    <Grid Name="Container"/>
</Window>

要将窗口放置在右下角，可以在构造函数中使用 SystemParameters.WorkArea:

public MainWindow()
{
    InitializeComponent();

    var desktopDim = SystemParameters.WorkArea;
    Left = desktopDim.Right - Width;
    Top = desktopDim.Bottom - Height;
}

创建形状

我将圆构建为一堆圆片，这些圆片是从后面的代码生成的:

private Path CreateCirclePart()
        {
            var circle = new CombinedGeometry
                {
                    GeometryCombineMode = GeometryCombineMode.Exclude,
                    Geometry1 = new EllipseGeometry { Center = _center, RadiusX = _r2, RadiusY = _r2 },
                    Geometry2 = new EllipseGeometry { Center = _center, RadiusX = _r1, RadiusY = _r1 }
                };

            var sideLength = _r2 / Math.Cos((Math.PI/180) * (ItemAngle / 2.0));
            var x = _center.X - Math.Abs(sideLength * Math.Cos(ItemAngle * Math.PI / 180));
            var y = _center.Y - Math.Abs(sideLength * Math.Sin(ItemAngle * Math.PI / 180));
            var triangle = new PathGeometry(
                new PathFigureCollection(new List<PathFigure>{
                    new PathFigure(
                        _center,
                        new List<PathSegment>
                            {
                                new LineSegment(new Point(_center.X - Math.Abs(sideLength),_center.Y), true),
                                new LineSegment(new Point(x,y), true)
                            },
                        true)
                }));

            var path = new Path
                {
                    Fill = new SolidColorBrush(Colors.Cyan),
                    Stroke = new SolidColorBrush(Colors.Black),
                    StrokeThickness = 1,
                    RenderTransformOrigin = new Point(1, 1),
                    RenderTransform = new RotateTransform(0),
                    Data = new CombinedGeometry
                        {
                            GeometryCombineMode = GeometryCombineMode.Intersect,
                            Geometry1 = circle,
                            Geometry2 = triangle
                        }
                };

            return path;
        }

第一步是构建两个同心圆并将它们组合在一个 CombinedGeometry 中，并设置为排除 CombineMode。然后我创建一个足够高的三角形来包含我想要的环部分，并保持这些形状的交集。

在将第二个 CombineMode 设置为 xor 的情况下看到它可能会澄清:



建立圈子

上面的代码使用了一些使其通用的实例字段:您可以更改圆中的 block 数或它们的半径；它总是会填满角落。

然后我用所需数量的形状填充一个列表，并将它们添加到网格中:

private const double MenuWidth = 80;
private const int ItemCount = 6;
private const double AnimationDelayInSeconds = 0.3;

private readonly Point _center;
private readonly double _r1, _r2;
private const double ItemSpacingAngle = 2;
private const double ItemAngle = (90.0 - (ItemCount - 1) * ItemSpacingAngle) / ItemCount;

private readonly List<Path> _parts = new List<Path>();
private bool _isOpen;

public MainWindow()
{
    InitializeComponent();

    // window in the lower right desktop corner
    var desktopDim = SystemParameters.WorkArea;
    Left = desktopDim.Right - Width;
    Top = desktopDim.Bottom - Height;

    _center = new Point(Width, Height);
    _r2 = Width;
    _r1 = _r2 - MenuWidth;

    Loaded += (s, e) => CreateMenu();
}

private void CreateMenu()
{
    for (var i = 0; i < ItemCount; ++i)
    {
        var part = CreateCirclePart();
        _parts.Add(part);
        Container.Children.Add(part);
    }
}

ItemSpacingAngle 定义两个连续片段之间的空白。

动画圆

最后一步是展开圆圈。在路径 rendertransform 上使用 rotateAnimation 可以轻松实现。
请记住 CreateCirclePart 函数的这一部分:

RenderTransformOrigin = new Point(1, 1),
RenderTransform = new RotateTransform(0),

RenderTransform 告诉我们要执行的动画是一个旋转，RenderTransformOrigin 将旋转原点设置在形状的右下角(单位是百分比)。
我们现在可以在点击事件上对其进行动画处理:

private void WindowClicked(object sender, MouseButtonEventArgs e)
        {
            for (var i = 0; i < ItemCount; ++i)
            {
                if (!_isOpen)
                    UnfoldPart(_parts[i], i);
                else
                    FoldPart(_parts[i], i);
            }
            _isOpen = !_isOpen;
        }

        private void UnfoldPart(Path part, int pos)
        {
            var newAngle = pos * (ItemAngle + ItemSpacingAngle);
            var rotateAnimation = new DoubleAnimation(newAngle, TimeSpan.FromSeconds(AnimationDelayInSeconds));
            var tranform = (RotateTransform)part.RenderTransform;
            tranform.BeginAnimation(RotateTransform.AngleProperty, rotateAnimation);
        }

        private void FoldPart(Path part, int pos)
        {
            var rotateAnimation = new DoubleAnimation(0, TimeSpan.FromSeconds(AnimationDelayInSeconds));
            var tranform = (RotateTransform)part.RenderTransform;
            tranform.BeginAnimation(RotateTransform.AngleProperty, rotateAnimation);
        }