How to retrieve an element from ItemsControl c# and Xaml?

Question

I am creating a simple game for windows store using c# and xaml. I want to change the colour of a rectangle when clicked. I tried different method of conversion from sender object but I was unable to fix the bug. Please help me out. I have "onTapped" event for ItemsControl. Xaml File :

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <ItemsControl Grid.Row="1" x:Name="rectangleItems" Tapped="RectTapped">
        <ItemsControl.ItemContainerTransitions>
            <TransitionCollection>
            <EntranceThemeTransition/>
            </TransitionCollection>
        </ItemsControl.ItemContainerTransitions>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapGrid  x:Name="myWrapGrid" Height="400" 
                 HorizontalAlignment="Center" VerticalAlignment="Center"  />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <!-- The sequence children appear depends on their order in 
     the panel's children, not necessarily on where they render
     on the screen. Be sure to arrange your child elements in
     the order you want them to transition into view. -->
        <ItemsControl.Items  >
            <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
            <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
            <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
            <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
            <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
            <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
            <Rectangle Fill="Red" Width="100" Height="100" Margin="10" />
            <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
            <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        </ItemsControl.Items>
    </ItemsControl>
</Grid>

This is the code for ItemsControl event.

private void RectTapped(object sender, TappedRoutedEventArgs e)
{
     SolidColorBrush mySolidColorBrush = new SolidColorBrush();
     mySolidColorBrush.Color = Color.FromArgb(255, 0, 255, 0);
     Rectangle uiElement =  (Rectangle)rectangleItems.ContainerFromIndex(1);
     Rectangle rc = (Rectangle)uiElement;
     rc.Fill = mySolidColorBrush;            
}

In this case I have manually specified the element of index 1 but I would like to change the colour of the rectangle that was clicked. Thanks.

Answer 1

You should bind event to Rectangles, not the ItemControl, and then use sender object of the event as Rectangle to change it's properties:

private void RectEvent(object sender,EventArgs args)
{
    var rectangle = sender as Rectangle;
//rest of your code
}

In order to bind event to your rectangles you can iterate thought the "rectangleItems" collection that you have in your code.

If binding such event is not an option, then you can use GetPosition method from TappedRoutedEventArgs (see documentation here ) and then search for your rectangle by this value.