Home > Enterprise >  I have two image buttons in my app but I am unable to click the second one (xaml C#)
I have two image buttons in my app but I am unable to click the second one (xaml C#)

Time:11-04

I am making a app for a collage project, it is wack a mole, I have to have two grids and I have them both set up, along with having an image button in both. In the first grid the image button works and when the user hit the mole they get 10pts, but in the second grid which is 5x5 the ikgbutton won't click for some reason.

I have try and search for someone having a similar problem but I can't seem to find and, I have tried many time deleting and re-coding it to see if I could get it to work, and have also tried working through it step by step but notting I have done seems to have worked.

Xaml Code

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WackAFlower.MainPage"
             Title="Wack A Flower"
             BackgroundImageSource="garden_field.png">
             
    


    <!--Main page-->
    <StackLayout>

            <!--Titile-->
        <StackLayout>
            <Label FontSize="Title"
                   BackgroundColor="Black"
                   TextColor="#ffeb3b"
                   HorizontalTextAlignment="Center"
                   Margin="0,25,0,0"
                   FontFamily="times"
                   >
                Wack A Flower        
            </Label>
        </StackLayout>

            <!--End game button-->
        <StackLayout>
            <Button Text="Start Game"
                    Margin="50,10,50,0"
                    TextColor="#ffeb3b"
                    BackgroundColor="Black"
                    FontFamily="times"
                    FontSize="Large"
                    Padding="20"
                    >
            </Button>
        </StackLayout>

            <!--Change Grid, Restart and socre-->
        <StackLayout Orientation="Horizontal">
            <Button Text="Change Grid"
                    TextColor="#ffeb3b"
                    BackgroundColor="Black"
                    FontSize="Small"
                    FontFamily="times"
                    Margin="50,25,15,0"
                    ></Button>

            <Button x:Name="BtnSwitch"
                    Clicked="BtnSwitch_Clicked"
                    Text="5x5"
                    TextColor="#ffeb3b"
                    BackgroundColor="Black"
                    FontSize="Small"
                    FontFamily="times"
                    Margin="5,25,15,0"
                ></Button>
            <Label x:Name="LblPoints"
                TextColor="#ffeb3b"
                VerticalTextAlignment="Center"
                Margin="10,25,15,0"
                Padding="15"
                BackgroundColor="Black"
                Text="00"
                ></Label>
            
        </StackLayout>

            <!--intro to the game-->
        <StackLayout>
            <Label Text="Welcome to Wack a Flower, You are a bee on the hunt for flowers, you will have to get a score of 100 to win, good luck have fun"
                   TextColor="#ffeb3b"
                   BackgroundColor="Black"
                   HorizontalTextAlignment="Center"
                   FontFamily="times"
                   FontSize="Medium"
                   FontAttributes="Bold"
                   Margin="25"
                   
                />
        </StackLayout>

            <!--Grid for game-->
        <StackLayout>

            <!--4x4 grid-->
            <Grid x:Name="GridMode4" IsVisible="true" IsEnabled="True"  
                HeightRequest="300" WidthRequest="300" HorizontalOptions="Center" VerticalOptions="Center" Padding="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                    <!--Mole Holes-->
                <!--first row-->
                <!--<Button BorderWidth="5" BorderColor="Black" HeightRequest="50" WidthRequest="5" Grid.Row="0" Grid.Column="0" BackgroundColor="red" Text="0,0"/> this is how i was making the grid before-->
                <BoxView Grid.Row="0" Grid.Column="0"  WidthRequest="60" HeightRequest="60"  Margin="10" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="0" Grid.Column="1"  WidthRequest="60" HeightRequest="60"  Margin="10" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="0" Grid.Column="2"  WidthRequest="60" HeightRequest="60"  Margin="10" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="0" Grid.Column="3"  WidthRequest="60" HeightRequest="60"  Margin="10" CornerRadius="30" Color="Black" Opacity="0.8"/>                
                <!--second row-->
                <BoxView Grid.Row="1" Grid.Column="0"  WidthRequest="60" HeightRequest="60" Margin="10" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="1" Grid.Column="1"  WidthRequest="60" HeightRequest="60" Margin="10" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="1" Grid.Column="2"  WidthRequest="60" HeightRequest="60" Margin="10" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="1" Grid.Column="3"  WidthRequest="60" HeightRequest="60" Margin="10" CornerRadius="30" Color="Black" Opacity="0.8"/>                
                <!--third row-->
                <BoxView Grid.Row="2" Grid.Column="0" WidthRequest="60" HeightRequest="60" Margin="10" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="2" Grid.Column="1" WidthRequest="60" HeightRequest="60" Margin="10" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="2" Grid.Column="2" WidthRequest="60" HeightRequest="60" Margin="10" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="2" Grid.Column="3" WidthRequest="60" HeightRequest="60" Margin="10" CornerRadius="30" Color="Black" Opacity="0.8"/>                
                <!--fourth row-->
                <BoxView Grid.Row="3" Grid.Column="0" WidthRequest="60" HeightRequest="60" Margin="10" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="3" Grid.Column="1" WidthRequest="60" HeightRequest="60" Margin="10" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="3" Grid.Column="2" WidthRequest="60" HeightRequest="60" Margin="10" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="3" Grid.Column="3" WidthRequest="60" HeightRequest="60" Margin="10" CornerRadius="30" Color="Black" Opacity="0.8"/>

                <!--Imagbutton for grid-->
            <ImageButton x:Name="ImgBtnFlower4x4" Source="mole.png" Grid.Row="1" Grid.Column="1" HeightRequest="60" WidthRequest="60" HorizontalOptions="Center"
                         VerticalOptions="Center" Clicked="ImgBtnFlower_Clicked"></ImageButton>

            </Grid><!--end of grid 4x4-->

            <!--5x5 grid-->
             <Grid x:Name="GridMode5" IsVisible="False" IsEnabled="False"
                HeightRequest="300" WidthRequest="300" HorizontalOptions="Center" VerticalOptions="Center"  Padding="10"> 
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                    <!--Mole Holes-->
                <!--first row-->
                <!--<Button BorderWidth="5" BorderColor="Black" HeightRequest="50" WidthRequest="5" Grid.Row="0" Grid.Column="0" BackgroundColor="red" Text="0,0"/> this is how i was making the grid before-->
                <BoxView Grid.Row="0" Grid.Column="0"  WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="0" Grid.Column="1"  WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="0" Grid.Column="2"  WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="0" Grid.Column="3"  WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="0" Grid.Column="4"  WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>                

                <!--second row-->
                <BoxView Grid.Row="1" Grid.Column="0"  WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="1" Grid.Column="1"  WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="1" Grid.Column="2"  WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="1" Grid.Column="3"  WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="1" Grid.Column="4"  WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>                

                <!--third row-->
                <BoxView Grid.Row="2" Grid.Column="0" WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="2" Grid.Column="1" WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="2" Grid.Column="2" WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="2" Grid.Column="3" WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="2" Grid.Column="4" WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>                

                <!--fourth row-->
                <BoxView Grid.Row="3" Grid.Column="0" WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="3" Grid.Column="1" WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="3" Grid.Column="2" WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="3" Grid.Column="3" WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="3" Grid.Column="4" WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>

                <!--fith row-->
                <BoxView Grid.Row="4" Grid.Column="0" WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="4" Grid.Column="1" WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="4" Grid.Column="2" WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="4" Grid.Column="3" WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>
                <BoxView Grid.Row="4" Grid.Column="4" WidthRequest="60" HeightRequest="60" Margin="5" CornerRadius="30" Color="Black" Opacity="0.8"/>  

                <!--Imgbutton for grid-->
                <ImageButton x:Name="ImgBtnFlower5x5" Source="mole_two.png" Grid.Row="1" Grid.Column="1" HeightRequest="60" WidthRequest="60" HorizontalOptions="Center"
                         VerticalOptions="Center" Clicked="ImgBtnFlower_Clicked"></ImageButton>
                

            </Grid><!--end of grid 5x5-->
        </StackLayout>

            <!--how to start game-->
        <StackLayout>
            <Label TextColor="#ffeb3b" FontFamily="times" FontSize="Medium" HorizontalTextAlignment="Center" Margin="25" Background="black">
                Once you press start game the flowers will beging to apear so be ready
            </Label>
        </StackLayout>

    </StackLayout> <!--End of main page-->

    

</ContentPage>

C# code

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace WackAFlower
{
    public partial class MainPage : ContentPage
    {

        //gobal variables
        Random _random;//random for use in the movement of the mole


        public MainPage()
        {
            InitializeComponent();
            _random = new Random();
            
            
           
        }//end of main page

        //rest set method
        private void gridrest()
        {
            LblPoints.Text = "0";
        }//end of gridrest

        //4x4 gird
        private void MoleMovement4x4()
        {
            //mole we get giving random rows and cols to move to
            //when the player clicks the mole it will move to a new random postions
            int r = 0, c = 0;
            r = _random.Next(0, 3);
            c = _random.Next(0, 3);

            //move mole to new loc
            ImgBtnFlower4x4.SetValue(Grid.RowProperty, r);
            ImgBtnFlower4x4.SetValue(Grid.ColumnProperty, c);

            //make mole visiable
            ImgBtnFlower4x4.IsVisible = true;
        }//end of MoleMovement 4x4

        //5x5 grid
        private void MoleMovement5x5()
        {
            int r = 0, c = 0;
            r = _random.Next(0, 4);
            c = _random.Next(0, 4);

            //move mole to new loc
            ImgBtnFlower4x4.SetValue(Grid.RowProperty, r);
            ImgBtnFlower4x4.SetValue(Grid.ColumnProperty, c);

            //make mole visiable
            ImgBtnFlower4x4.IsVisible = true;
        }//end of MoleMovement5x5
        
        public void BtnSwitch_Clicked(System.Object sender, System.EventArgs e)
        {
            //check test on button 
            //if its a 5x5, then make 5x grid visible and make the 3x grid invisible
            //if 3x3 then opposite
            //also need to change the text on the button when it swtichs 
            //use switch stament

            switch (BtnSwitch.Text)
            {
                case "5x5"://make 5x5 visible
                    {
                        GridMode4.IsVisible = false;
                        GridMode5.IsVisible = true;
                        BtnSwitch.Text = "4x4";
                        gridrest();
                        break;
                    }

                case "4x4"://make 4x4 visable
                    {
                        GridMode4.IsVisible = true;
                        GridMode5.IsVisible = false;
                        BtnSwitch.Text = "5x5";
                        gridrest();
                        break;
                    }

                default:
                    break;
            }//end of switch

        }//end of btnswtich 

        private void ImgBtnFlower_Clicked(System.Object sender, System.EventArgs e)
        {
        /*
        * making score
        * i. needs to get current socre
        * 2. needs to update score if play hits mole
        */
        int currentPoints = Convert.ToInt32(LblPoints.Text);
        currentPoints  = 10;
        LblPoints.Text = currentPoints.ToString();

        /*make the image button dissipear when cliked 
            * use the send obj
            * 
            */
        //MoleMovement
        if (BtnSwitch.Text.Equals("5x5"))
        {
            MoleMovement4x4();
        }
        else if (BtnSwitch.Text.Equals("4x4"))
        {
            MoleMovement5x5();
        }


        ImageButton i = (ImageButton)sender;//save the sender
            
        }//end of ImgBtnflower4x4

        

    }//end of public class

}//end of namespce 

CodePudding user response:

You could make some changes in your BtnSwitch_Clicked method. Set the IsEnabled property as well as IsVisible property.

public void BtnSwitch_Clicked(System.Object sender, System.EventArgs e)
    {
        //check test on button 
        //if its a 5x5, then make 5x grid visible and make the 3x grid invisible
        //if 3x3 then opposite
        //also need to change the text on the button when it swtichs 
        //use switch stament

        switch (BtnSwitch.Text)
        {
            case "5x5"://make 5x5 visible
                {
                    GridMode4.IsVisible = false;
                    GridMode4.IsEnabled = false;
                    GridMode5.IsVisible = true;
                    GridMode5.IsEnabled = true;
                    BtnSwitch.Text = "4x4";
                    gridrest();
                    break;
                }

            case "4x4"://make 4x4 visable
                {
                    GridMode4.IsVisible = true;
                    GridMode4.IsEnabled = true;
                    GridMode5.IsVisible = false;
                    GridMode5.IsEnabled = false;
                    BtnSwitch.Text = "5x5";
                    gridrest();
                    break;
                }

            default:
                break;
        }//end of switch

    }

I hope my answer could help you.

  • Related