UWP C＃System.InvalidCastException

Question

I have previously asked on a post regarding how to dynamically add buttons . Now I have added additional image beside the button to indicate the connection status of the client(s) . I have 2 buttons one to add and another to delete the button and image . Once clicked there will be a menuflyout to select the respective button to be deleted. My problem is I manage to add the status image but when comes to clicking at the delete button , the menuflyout runs into exception which says System.InvalidCastException .

My code as follow; please help. Thanks.

public Uri connectedUri = new Uri("ms-appx:///Assets/icon-connected.png");
public Uri disconnectedUri = new Uri("ms-appx:///Assets/icon-disconnected.png");

private void AddMenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
    var item = sender as MenuFlyoutItem;
    var deviceName = item.Text;
    var deviceIP = item.Tag;

    Button b = new Button();
    b.Height = 30;
    b.Width = 100;
    b.VerticalAlignment = VerticalAlignment.Top;
    b.HorizontalAlignment = HorizontalAlignment.Left;
    b.Margin = new Thickness(20, 20, 0, 0);
    b.Content = deviceName;   // "Button " + buttonCounter;
    b.Tag = deviceIP;
    b.Click += AddMenuButton_Click;


    Image stsImg = new Image();
    BitmapImage bitmapImage = new BitmapImage();
    //Uri connectedUri = new Uri("ms-appx:///Assets/icon-connected");
    //Uri disconnectedUri = new Uri("ms-appx:///Assets/icon-disconnected");
    bitmapImage.UriSource = connectedUri;
    stsImg.Source = bitmapImage;
    stsImg.Width = 20;
    stsImg.Height = 20;
    stsImg.VerticalAlignment = VerticalAlignment.Top;
    stsImg.HorizontalAlignment = HorizontalAlignment.Left;
    stsImg.Margin = new Thickness(130, 20, 0, 0);
    stsImg.Name = deviceName;
    stsImg.Tag = deviceIP;

    //Calculate the place of the button
    int column = (int)(buttonCounter / 4);
    int row = buttonCounter % 4;

    //Check if you need to add a columns
    if (row == 0)
    {
        ColumnDefinition col = new ColumnDefinition();
        col.Width = new GridLength(column, GridUnitType.Auto);
        myGrid.ColumnDefinitions.Add(col);
    }

    //Add the button
    myGrid.Children.Add(b);
    Grid.SetColumn(b, column);
    Grid.SetRow(b, row);

    myGrid.Children.Add(stsImg);
    Grid.SetColumn(stsImg, column);
    Grid.SetRow(stsImg, row);
    buttonCounter++;
}

private void RemoveButton_Click(object sender, RoutedEventArgs e)
{
    var menuFlyout = new MenuFlyout();

    try
    {
        foreach (Button btn in myGrid.Children)
        {
            var row = Grid.GetRow(btn);
            var col = Grid.GetColumn(btn);
            //ButtonRow.Add(btn.Content.ToString(), row.ToString());
            //ButtonCol.Add(btn.Content.ToString(), col.ToString());
            var menuFlyoutItem = new MenuFlyoutItem() { Name = btn.Tag.ToString(), Text = btn.Content.ToString() };
            menuFlyoutItem.Tag = btn.Content.ToString();
            menuFlyoutItem.Click += RemoveMenuFlyoutItem_Click;
            menuFlyout.Items.Add(menuFlyoutItem);
        }
        RemoveButton.Flyout = menuFlyout;
    }
    catch (Exception)
    {

    }
}

Answer 1

The problem is the foreach :

foreach (Button btn in myGrid.Children)

When written like this, it tries to cast all children of the Grid to Button . This is not possible, because some of the children are not buttons. You can however write the loop like this:

foreach (Button btn in myGrid.Children.OfType<Button>())

The OfType<T> LINQ extension method will filter the input enumerable only to those items which are of a given type.

Answer 2

Are all the children of myGrid , of Type Button ?

 foreach (Button btn in myGrid.Children)

No, because myGrid.Children.Add(stsImg);

When you try to get stsImg as a Button , you have that exception, because stsImg is not of type Button .

You need to filter only the buttons.

foreach (Button btn in myGrid.Children.OfType<Button>()){
// do stuff
}