I want to have a border highlight animation on my app

Question

I want after the button i clicked that there comes a animation and lands on the picture that is the number of the _random but i cant find anything on the google

ive tried to google and ask around but still havent got what i want

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;



        }
    }
}

so i want to have a animation that goes over the borders like this: https://learn.microsoft.com/en-us/windows/apps/images/fluent/traveling-focus-fullscreen-light-rf.gif for like the 3 seconds and then land on the right one, im sorry if i sound like a demander but im already googling for 2 days

score 0 · Answer 1 · answered Oct 30 '19 at 10:55

0

Pretty sure that you have to use ControlPaint.DrawBorder if the pictures are in pictureboxes, you draw for one picture, after a short delay you remove it, then draw it on the other, etc
After 3 secondes, you keep that going until it lands on the good picture then you stop everything

EDIT : You might want to check that if that hasn't been already done : How Do I Create a Colored Border on a PictureBox Control?

answered Oct 30 '19 at 10:55

Cyril Krzyzowski

13
4

My pictures are in grids: Do i need to change that? sorry not the best programmer . – A D Oct 30 '19 at 11:11
Well, I'm not a pro in WPF apps, but I found that, it may help you : – Cyril Krzyzowski Oct 30 '19 at 11:54

score 0 · Answer 2 · answered Oct 30 '19 at 12:09

To short, you can create a loop that traverses the elements inside the container and sets the BorderBrush and BorderThickness for them.

This is a simple code example:

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>

I created a Panel called ItemsContainer, which replaces the image with a StackPanel and add a button to trigger the animation.

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;
    }
}

In the code, by first getting the number of child elements in the container, then setting the Border one by one through the while loop, and restarting when looping to the end.

According to your animation requirements, you can use Task.Delay(), which will delay the specified time before proceeding to the next step.

This is just an example, but it should be able to meet your needs, you just need to replace the StackPanel with an Image.

Best regards.

I want to have a border highlight animation on my app

2 Answers2