我想在我的应用程序上有一个边框突出显示动画答案

【问题标题】：I want to have a border highlight animation on my app我想在我的应用程序上有一个边框突出显示动画
【发布时间】：2019-10-30 10:50:12
【问题描述】：

我希望在单击按钮后出现一个动画并落在图片上，该图片是 _random 的编号，但我在 google 上找不到任何东西

我尝试谷歌并四处询问，但仍然没有得到我想要的东西

public sealed partial class FilePage : Page
    {
        DataPage value = new DataPage();
        Random _random = new Random();
        private int time = 0;
        DispatcherTimer Timer;

        public FilePage()
        {
            this.InitializeComponent();
        }

        private void ButtonClick1(object sender, RoutedEventArgs e)
        {

 //////////
 //////////cut some off to keep this short (turning the border black again)
 //////////


            Timer = new DispatcherTimer();
            Timer.Interval = new TimeSpan(0, 0, 3);
            Timer.Tick += Timer_Tick;
            Timer.Start();
        }

        public void Timer_Tick(object sender, object e)
        {
            int value = _random.Next(1, 13);
            ((Grid)gMainGrid.FindName($"g{value}")).BorderBrush = new SolidColorBrush(Colors.White);
            Timer.Stop();
            SpinnerSecond.Visibility = Visibility.Collapsed;

            DataWatch.valueWatch = value;
            RollKnop.Visibility = Visibility.Visible;



        }
    }
}

所以我想要一个像这样跨越边界的动画： https://docs.microsoft.com/en-us/windows/apps/images/fluent/traveling-focus-fullscreen-light-rf.gif 3 秒钟然后降落在正确的位置，如果我听起来像一个需求者，我很抱歉，但我已经在谷歌上搜索了 2 天

【问题讨论】：

13 张图片，窗口上有 1 个按钮

标签： c# loops animation uwp border

【解决方案1】：

如果图片在图片框中，请务必使用 ControlPaint.DrawBorder，为一张图片绘制，经过短暂的延迟后将其删除，然后在另一张上绘制，等等
3 秒后，你继续，直到它落在好图片上，然后你停止一切

编辑：您可能需要检查是否尚未完成：How Do I Create a Colored Border on a PictureBox Control?

【讨论】：

我的图片在网格中：我需要改变它吗？对不起，不是最好的程序员。
好吧，我不是 WPF 应用程序的专业人士，但我发现，它可能会对您有所帮助：stackoverflow.com/questions/2769291/…>

【解决方案2】：

简而言之，您可以创建一个循环来遍历容器内的元素并为它们设置BorderBrush 和BorderThickness。

这是一个简单的代码示例：

ColorBorderPage.xaml

<StackPanel>
    <controls:WrapPanel x:Name="ItemsContainer" HorizontalAlignment="Center" Width="160" Height="120" Margin="0,50">
        <StackPanel Background="Gray" Width="100" Height="50" Margin="0,0,10,10"/>
        <StackPanel Background="Gray" Width="50" Height="50" Margin="0,0,0,10"/>
        <StackPanel Background="Gray" Width="160" Height="50"/>
    </controls:WrapPanel>
    <Button Content="Click Me" Click="Button_Click" HorizontalAlignment="Center"/>
</StackPanel>

我创建了一个名为ItemsContainer 的面板，它将图像替换为StackPanel，并添加了一个按钮来触发动画。

ColorBorderPage.xaml.cs

private async void Button_Click(object sender, RoutedEventArgs e)
{
    int count = ItemsContainer.Children.Count;
    int index = 0;
    while (true)
    {
        var item = ItemsContainer.Children[index] as StackPanel;
        item.BorderBrush = new SolidColorBrush(Colors.LightGreen);
        item.BorderThickness = new Thickness(3);
        await Task.Delay(3000);
        item.BorderThickness = new Thickness(0);
        index = index == count - 1 ? 0 : index + 1;
    }
}

在代码中，通过先获取容器中子元素的个数，然后通过while循环将Border一个一个设置，循环到结束时重新启动。

根据你的动画需求，可以使用Task.Delay()，会延迟指定时间再进行下一步。

这只是一个例子，但它应该能够满足您的需求，您只需将StackPanel替换为Image即可。

最好的问候。

【讨论】：