Grid animation (button color change)

Question

I would like to create an animation within my grid. I have a 5x5 Grid, each grid shows a button. After the grid is loaded one of the buttons should randomliy change his color to green. After 1 seconds this button should change back and another should change his color to green.

If the user is able to reach the this button within this 1 second with his mouse (mouseover) the button should change his color to red and stay red. The next button who changes his color to green should not be this one.

This should be a little game. My question is, what is the easiest way to implement this game.

Please help me!

<Page x:Class="LeapTest.Layout"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  xmlns:local="clr-namespace:LeapTest"
  mc:Ignorable="d" 
  d:DesignHeight="1050" d:DesignWidth="1000"
  Title="Layout">

<Page.Resources>
    <Style x:Key="pageTitle" TargetType="TextBlock">
        <Setter Property="Background" Value="DimGray"/>
        <Setter Property="FontSize"  Value="40"/>
        <Setter Property="FontFamily"  Value="Arial"/>
        <Setter Property="TextAlignment" Value="Center"/>
        <Setter Property="Padding" Value="0,5,0,5"/>
    </Style>

    <Style x:Key="Grid" TargetType="Grid">
        <Setter Property="Background" Value="White"/>
    </Style>

    <Style x:Key="Button" TargetType="Button">
        <Setter Property="Background" Value="White"/>
        <Setter Property="BorderBrush" Value="Green"/>
        <Setter Property="BorderThickness" Value="2"/>
    </Style>

</Page.Resources>

<Grid Style="{StaticResource Grid}">
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="200" />
        <RowDefinition Height="200" />
        <RowDefinition Height="200" />
        <RowDefinition Height="200" />
        <RowDefinition Height="200" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="200" />
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Column="0" Grid.ColumnSpan="5" Style="{StaticResource pageTitle}"> LEAP Motion </TextBlock>

    <Button Name ="BTN_0_0" Grid.Column="0" Grid.Row="1" Click="BTN_Click" Style="{StaticResource Button}"/>
    <Button Name ="BTN_0_1" Grid.Column="1" Grid.Row="1" Click="BTN_Click" Style="{StaticResource Button}"/>
    <Button Name ="BTN_0_2" Grid.Column="2" Grid.Row="1" Click="BTN_Click" Style="{StaticResource Button}"/>
    <Button Name ="BTN_0_3" Grid.Column="3" Grid.Row="1" Click="BTN_Click" Style="{StaticResource Button}"/>
    <Button Name ="BTN_0_4" Grid.Column="4" Grid.Row="1" Click="BTN_Click" Style="{StaticResource Button}"/>

    <Button Name ="BTN_1_0" Grid.Column="0" Grid.Row="2" Click="BTN_Click" Style="{StaticResource Button}"/>
    <Button Name ="BTN_1_1" Grid.Column="1" Grid.Row="2" Click="BTN_Click" Style="{StaticResource Button}"/>
    <Button Name ="BTN_1_2" Grid.Column="2" Grid.Row="2" Click="BTN_Click" Style="{StaticResource Button}"/>
    <Button Name ="BTN_1_3" Grid.Column="3" Grid.Row="2" Click="BTN_Click" Style="{StaticResource Button}"/>
    <Button Name ="BTN_1_4" Grid.Column="4" Grid.Row="2" Click="BTN_Click" Style="{StaticResource Button}"/>

    <Button Name ="BTN_2_0" Grid.Column="0" Grid.Row="3" Click="BTN_Click" Style="{StaticResource Button}"/>
    <Button Name ="BTN_2_1" Grid.Column="1" Grid.Row="3" Click="BTN_Click" Style="{StaticResource Button}"/>
    <Button Name ="BTN_2_2" Grid.Column="2" Grid.Row="3" Click="BTN_Click" Style="{StaticResource Button}"/>
    <Button Name ="BTN_2_3" Grid.Column="3" Grid.Row="3" Click="BTN_Click" Style="{StaticResource Button}"/>
    <Button Name ="BTN_2_4" Grid.Column="4" Grid.Row="3" Click="BTN_Click" Style="{StaticResource Button}"/>

    <Button Name ="BTN_3_0" Grid.Column="0" Grid.Row="4" Click="BTN_Click" Style="{StaticResource Button}"/>
    <Button Name ="BTN_3_1" Grid.Column="1" Grid.Row="4" Click="BTN_Click" Style="{StaticResource Button}"/>
    <Button Name ="BTN_3_2" Grid.Column="2" Grid.Row="4" Click="BTN_Click" Style="{StaticResource Button}"/>
    <Button Name ="BTN_3_3" Grid.Column="3" Grid.Row="4" Click="BTN_Click" Style="{StaticResource Button}"/>
    <Button Name ="BTN_3_4" Grid.Column="4" Grid.Row="4" Click="BTN_Click" Style="{StaticResource Button}"/>

    <Button Name ="BTN_4_0" Grid.Column="0" Grid.Row="5" Click="BTN_Click" Style="{StaticResource Button}"/>
    <Button Name ="BTN_4_1" Grid.Column="1" Grid.Row="5" Click="BTN_Click" Style="{StaticResource Button}"/>
    <Button Name ="BTN_4_2" Grid.Column="2" Grid.Row="5" Click="BTN_Click" Style="{StaticResource Button}"/>
    <Button Name ="BTN_4_3" Grid.Column="3" Grid.Row="5" Click="BTN_Click" Style="{StaticResource Button}"/>
    <Button Name ="BTN_4_4" Grid.Column="4" Grid.Row="5" Click="BTN_Click" Style="{StaticResource Button}"/>

</Grid>

//BackEnd Code
      private void BTN_Click(object sender, RoutedEventArgs e)
    {
        //BTN1.Background = Brushes.Green;

        Button btnTest = (Button)sender;
        if (btnTest.Background == Brushes.Green)
        {
            btnTest.Background = Brushes.White;
        }
        else
        {
            btnTest.Background = Brushes.Green;
        }
    }

Answer 1

you should loop over all the button controls on the form with a special name or tag. Save this in an array and select one at random and change it's color. if the mouseover finds the one with the right color recall the method to find a control at random and so on.

This should be pretty straight forward. And since this looks like homework. I won't solve it for you as you wouldn't learn anything. Think about what needs to be done and google each part seperately. try to understand it and then continue! goodluck!

Answer 2

EDIT : regarding your question in a strict way, you do not need animation to acheive what you want to do, unless your need is to animate color changes.

Here is a full working example not using MVVM but using a collection of models representing the buttons.

The main window/page code handling all the logic (Random, model changes, etc.):

public partial class MainWindow : Window, INotifyPropertyChanged
{
    private const int BTN_NUMBERS = 25;
    private ObservableCollection<ButtonModel> _buttonsCollection;
    private ButtonModel _currentTarget;

    public ObservableCollection<int> ExcludedItems
    {
        get { return _excludedItems; }
        private set { _excludedItems = value; OnPropertyChanged(); }
    }

    private Random _rnd;
    private Timer _timer;
    private ObservableCollection<int> _excludedItems = new ObservableCollection<int>();

    public MainWindow()
    {
        DataContext = this;

        InitializeComponent();
        ButtonsCollection = new ObservableCollection<ButtonModel>();
        for (int i = 0; i < BTN_NUMBERS; i++)
        {
            ButtonsCollection.Add(new ButtonModel() { ButtonNumber = i });
        }

        Start();
    }

    private void Start()
    {
        _currentTarget = null;
        foreach (var bm in ButtonsCollection)
        {
            bm.IsCurrentTarget = bm.IsReached = false;
        }
        ExcludedItems.Clear();
        _rnd = new Random(DateTime.Now.Second);
        _timer = new Timer(OnTargetChanged, null, 0, 1000);
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<ButtonModel> ButtonsCollection
    {
        get { return _buttonsCollection; }
        set { _buttonsCollection = value; OnPropertyChanged(); }
    }

    void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    private void Btn_candidate_OnMouseEnter(object sender, MouseEventArgs e)
    {
        ButtonModel model = ((Button)sender).DataContext as ButtonModel;
        if (model != null && model.IsCurrentTarget && !ExcludedItems.Contains(model.ButtonNumber))
        {
            model.IsReached = true;
            ExcludedItems.Add(model.ButtonNumber);
        }
    }

    private void ChangeTarget()
    {
        var target = GetNextTarget();
        if (target == -1)
        {

            if (_timer != null)
            {
                _timer.Dispose();
                _timer = null;
            }
            MessageBox.Show("All items have been reached ! Congratulations");
        }
        if (_currentTarget != null) _currentTarget.IsCurrentTarget = false;
        _currentTarget = ButtonsCollection[target];
        _currentTarget.IsCurrentTarget = true;
    }

    private int GetNextTarget()
    {
        if (ExcludedItems.Count == BTN_NUMBERS)
        {
            return -1;
        }
        var target = _rnd.Next(0, BTN_NUMBERS);
        if (ExcludedItems.Contains(target))
        {
            return GetNextTarget();
        }
        return target;
    }

    private void OnTargetChanged(object state)
    {
        this.Dispatcher.InvokeAsync(ChangeTarget);
    }

    private void Btn_startover_OnClick(object sender, RoutedEventArgs e)
    {
        Start();
    }
}

The model representing the buttons, that contains the code that triggers XAML changes :

    public class ButtonModel : INotifyPropertyChanged
{
    private bool _isCurrentTarget;
    private bool _isReached;

    public event PropertyChangedEventHandler PropertyChanged;

    public int ButtonNumber { get; set; }

    public bool IsCurrentTarget
    {
        get { return _isCurrentTarget; }
        set { _isCurrentTarget = value; OnPropertyChanged(); }
    }

    public bool IsReached
    {
        get { return _isReached; }
        set { _isReached = value; OnPropertyChanged(); }
    }

    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

And finally, and most importantly, the simplified XAML code :

<Window x:Class="GridAnimame.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:GridAnimame"
    mc:Ignorable="d"
    d:DataContext="{d:DesignInstance {x:Type local:MainWindow}}"
    Title="MainWindow" Height="500" Width="500">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="400"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="400"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <ItemsControl ItemsSource="{Binding ButtonsCollection}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button Name="btn_candidate"  MouseEnter="Btn_candidate_OnMouseEnter" Margin="1">
                    <Button.Template>
                        <ControlTemplate TargetType="Button">
                            <Border x:Name="brd_btn_layout" Background="LightGray" BorderBrush="Black" BorderThickness="1">
                                <TextBlock Text="{Binding ButtonNumber}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="Black"></TextBlock>
                            </Border>
                            <ControlTemplate.Triggers>
                                <DataTrigger Binding="{Binding IsCurrentTarget}" Value="true">
                                    <Setter TargetName="brd_btn_layout" Property="Background" Value="Green"></Setter>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding IsReached}" Value="true">
                                    <Setter TargetName="brd_btn_layout" Property="Background" Value="Red"></Setter>
                                </DataTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Button.Template>
                </Button>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

    <ListBox Grid.Row="0" Grid.Column="1" ItemsSource="{Binding ExcludedItems}"></ListBox>

    <Button x:Name="btn_startover" Grid.Row="1" Grid.Column="1" Content="Start Over !" Margin="2" Click="Btn_startover_OnClick"></Button>
</Grid>

Althought the logic could be improved, here are the key points of this sample :

• You don't declare all the buttons on a static way in the XAML. Instead, your main model holds a collection of models representing the buttons and containing all the data that will trigger the XAML (visual) changes. Thus, the control in XAML representing the grid is bound to this collection

• The logic is made throught code and the visual effect of this loggic is reflected using triggers declared in XAML

• Only 2 things still have to be done to have a clean approach : 1)The main window logic can now be easily be encapsulated into a real view model which will serve as the window data context and 2) the events should be replaced by DelegateCommands