如何在UWP边框中包含重复元素？

Question

我想创建一个看起来像突出显示的whammy边框-highlighted whammy的XAML边框。我已经写了基本的Border（下面的代码），但是不确定如何更改BorderBrush，这样我就可以在边框周围重复发光。有没有一种方法可以使用 UWP XAML？假设我不能使用自定义画笔（并且我没有找到合适的画笔），是否可以使用网格？

<Border
    BorderBrush="Gold"
    BorderThickness="{Binding ElementName=slide0, Path=(behaviors:CustomAttributesBehavior.BorderThickness)}"
    CornerRadius="{Binding ElementName=slide0, Path=(behaviors:CustomAttributesBehavior.BorderCornerRadius)}"
    Visibility="{Binding IsHighlighted, Mode=OneWay}"
    />

Answer 1

  

如何更改BorderBrush，以便边框周围有重复的灯光。

简而言之，您需要制作一个自定义面板来满足您的要求。您需要从Panel类派生自定义类，并覆盖MeasureOverride和ArrangeOverride方法。在MeasureOverride和ArrangeOverride方法中，您可以定义自己的逻辑来测量和排列子元素。

请检查XAML custom panels overview和BoxPanel, an example custom panel了解更多详细信息。

在这里，根据您的描述，我制作了一个简单的代码示例供您参考。这只是我的简单代码示例。根据您的需求，您需要做更多的计算来布置子元素。

class CustomPanel : Panel
{
    int ellipesHorizontalAlignmentTopCount, ellipesVerticalAlignmentleftCount, ellipesHorizontalAlignmentButtomCount, ellipesVerticalAlignmentrightCount;
    double ellipesHeigh = 20;
    double ellipesWidth = 20;
    SolidColorBrush ellipesColor = new SolidColorBrush(Colors.LimeGreen);

    public CustomPanel()
    {
        this.Background = new SolidColorBrush(Colors.Yellow);
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
        double ex = 0;
        double ey =0;
        double imagex, imagey;
        foreach (UIElement child in Children)
        {
            if (child.GetType() == typeof(Ellipse))
            {

                if (ellipesHorizontalAlignmentTopCount>1)
                {
                    Point anchorPoint = new Point(ex, ey);
                    child.Arrange(new Rect(anchorPoint, child.DesiredSize));
                    ex += 40;
                    ellipesHorizontalAlignmentTopCount--;
                    continue;
                }
                if (ellipesVerticalAlignmentrightCount >1)
                {
                    Point anchorPoint = new Point(ex, ey);
                    child.Arrange(new Rect(anchorPoint, child.DesiredSize));
                    ey += 40;
                    ellipesVerticalAlignmentrightCount--;
                    continue;
                }
                if (ellipesHorizontalAlignmentButtomCount>1)
                {
                    Point anchorPoint = new Point(ex, ey);
                    child.Arrange(new Rect(anchorPoint, child.DesiredSize));
                    ex -= 40;
                    ellipesHorizontalAlignmentButtomCount--;
                    continue;
                }
                if (ellipesVerticalAlignmentleftCount>1)
                {
                    Point anchorPoint = new Point(ex, ey);
                    child.Arrange(new Rect(anchorPoint, child.DesiredSize));
                    ey -= 40;
                    ellipesVerticalAlignmentleftCount--;
                    continue;
                }
            }
            else
            {
                imagex = ellipesWidth;
                imagey = ellipesHeigh;
                Point anchorPoint = new Point(imagex, imagey);
                child.Arrange(new Rect(anchorPoint, child.DesiredSize));
            }


        }
        return finalSize;
    }

    protected override Size MeasureOverride(Size availableSize)
    {
        ellipesHorizontalAlignmentTopCount=ellipesHorizontalAlignmentButtomCount = Convert.ToInt32(availableSize.Width / (ellipesWidth*2));
        ellipesVerticalAlignmentleftCount=ellipesVerticalAlignmentrightCount = Convert.ToInt32(availableSize.Height/ (ellipesWidth * 2));

        for (int i = 0; i < (ellipesVerticalAlignmentleftCount + ellipesHorizontalAlignmentButtomCount + ellipesVerticalAlignmentrightCount + ellipesHorizontalAlignmentTopCount); i++)
        {
            this.Children.Add(new Ellipse() { Fill = ellipesColor, Width = ellipesWidth, Height = ellipesHeigh });
        }

        foreach (UIElement child in Children)
        {
            if (child.GetType() == typeof(Image))
            {
                child.Measure(new Size(availableSize.Width - (ellipesWidth * 2), availableSize.Height - (ellipesWidth * 2)));
            }
            else
            {
                child.Measure(new Size(ellipesWidth,ellipesHeigh));
            }
        }
        return availableSize;
    }
}

<local:CustomPanel Height="300" Width="300">
        <Image Source="Assets/animals.jpg" >
        </Image>
</local:CustomPanel>