WPF点击按钮实现边框游走高亮动画，3秒后定位随机网格求助

Alright, let's figure out how to get that smooth traveling border highlight animation working in your WPF app—you know, the one where the highlight zips through your Grids before landing on a random one after 3 seconds. Here's a solid solution tailored to your existing code:

Core Idea #

Your current timer only triggers once after 3 seconds to set the final highlight. To create the traveling effect, we'll use a faster repeating timer to cycle through your Grids continuously, while tracking elapsed time to stop exactly at the 3-second mark and lock onto the random Grid.

Modified Code Implementation #

Here's the updated version of your FilePage class with full animation logic:

public sealed partial class FilePage : Page 
{ 
    DataPage value = new DataPage(); 
    Random _random = new Random(); 
    private int _currentHighlightedGrid = 1; // Start with the first grid
    private int _elapsedTimeMs = 0;
    private const int TotalAnimationLength = 3000; // 3 seconds total
    private const int TravelSpeedMs = 100; // Adjust this to make the highlight move faster/slower
    DispatcherTimer _travelTimer; 

    public FilePage() 
    { 
        this.InitializeComponent(); 
        // Reset all grids to black borders on load (you can also set this in XAML)
        ResetAllGridBorders();
    } 

    private void ButtonClick1(object sender, RoutedEventArgs e) 
    { 
        // Reset state before starting the animation
        ResetAllGridBorders();
        _elapsedTimeMs = 0;
        _currentHighlightedGrid = 1;
        SetGridBorderColor(_currentHighlightedGrid, Colors.White);

        // Start the fast travel timer
        _travelTimer = new DispatcherTimer(); 
        _travelTimer.Interval = TimeSpan.FromMilliseconds(TravelSpeedMs); 
        _travelTimer.Tick += TravelTimer_Tick; 
        _travelTimer.Start(); 

        // Update UI elements as needed
        SpinnerSecond.Visibility = Visibility.Visible;
        RollKnop.Visibility = Visibility.Collapsed;
    } 

    private void TravelTimer_Tick(object sender, object e) 
    { 
        _elapsedTimeMs += TravelSpeedMs;

        // Check if we've hit the 3-second mark
        if (_elapsedTimeMs >= TotalAnimationLength)
        {
            _travelTimer.Stop();
            // Reset all borders then highlight the random grid
            ResetAllGridBorders();
            int randomGridNum = _random.Next(1, 13);
            SetGridBorderColor(randomGridNum, Colors.White);
            DataWatch.valueWatch = randomGridNum;
            SpinnerSecond.Visibility = Visibility.Collapsed;
            RollKnop.Visibility = Visibility.Visible;
            return;
        }

        // Move the highlight to the next grid
        SetGridBorderColor(_currentHighlightedGrid, Colors.Black); // Un-highlight previous
        _currentHighlightedGrid++;
        if (_currentHighlightedGrid > 12) // Loop back to the first grid when we reach the end
        {
            _currentHighlightedGrid = 1;
        }
        SetGridBorderColor(_currentHighlightedGrid, Colors.White); // Highlight next grid
    }

    // Helper to reset all grids to black borders
    private void ResetAllGridBorders()
    {
        for (int i = 1; i <= 12; i++)
        {
            SetGridBorderColor(i, Colors.Black);
        }
    }

    // Helper to set a specific grid's border color
    private void SetGridBorderColor(int gridNumber, Color color)
    {
        if (gMainGrid.FindName($"g{gridNumber}") is Grid targetGrid)
        {
            targetGrid.BorderBrush = new SolidColorBrush(color);
            // Important: Make sure your grids have BorderThickness set in XAML (e.g., BorderThickness="2")
        }
    }
}

Key Tips for Success #

• Adjust Travel Speed: Tweak TravelSpeedMs to control how fast the highlight moves—smaller values mean quicker transitions between grids.
• XAML Setup: Double-check that all your target Grids (g1 to g12) have BorderThickness set in XAML (like <Grid Name="g1" BorderThickness="2" .../>). Without this, the border won't show up even if you set the brush.
• State Cleanup: The ResetAllGridBorders() method ensures no leftover highlights from previous animation runs mess up the new one.

How It Works #

1. When you click the button, we reset all borders and start a fast timer that ticks every 100ms (adjustable).
2. On each tick, we move the white highlight to the next Grid, looping back to the first after the last one.
3. Once 3 seconds pass, we stop the timer, reset all borders, then lock the highlight onto the randomly selected Grid.

内容的提问来源于stack exchange，提问作者A D