Home > Software engineering >  Xamarin grid with buttons inside not clicking
Xamarin grid with buttons inside not clicking

Time:11-11

Good afternoon all,

Having an interesting issue here where by I have 4 buttons within a grid that all work ... kind of ... the top two buttons work without an issue however the bottom two you can only click the top half of the button otherwise it does not register the action.

Below is the Xaml code I am using ... Hope this helps... so far everything I have read doesn't seem to work so I can only assume I am missing something very simple.

         <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="HomemasterMobileApplication.Views.HomePage"
         Title="" 
         
         BackgroundImageSource = "HousingBackground2">

<ContentView >
    
    <ScrollView>
    <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="25"/>
        <RowDefinition Height="100"/>
        <RowDefinition Height="15"/>
        <RowDefinition Height="260"/>
    </Grid.RowDefinitions>
        <StackLayout Grid.Row="1" />
            <StackLayout Grid.Row="1" Orientation="Horizontal" HorizontalOptions="Center" Padding="0,0,0,0" VerticalOptions="Center" Opacity="0.8" BackgroundColor="#002D485D" >
                <ContentView>
                    <ImageButton Source="HomeMasterLogo.png" HeightRequest="100" CornerRadius="25"/>
                </ContentView>
            </StackLayout>
           
        <StackLayout Grid.Row="3" Orientation="Horizontal" Padding="0,15,0,0" Spacing="5" HorizontalOptions="Center">
                <Grid>
                        <Grid.ColumnDefinitions >
                            <!--0--><ColumnDefinition Width="10*"/>
                            <!--1--><ColumnDefinition Width="40*"/>
                            <!--2--><ColumnDefinition Width="10*"/>
                            <!--3--><ColumnDefinition Width="40*"/>
                            <!--4--><ColumnDefinition Width="10*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <!--0--><RowDefinition Height="10"/>
                            <!--1--><RowDefinition Height="125"/>
                            <!--2--><RowDefinition Height="40"/>
                            <!--3--><RowDefinition Height="125"/>
                        </Grid.RowDefinitions>
                            
                    <Button ImageSource="homeuser24px"
                            BackgroundColor="#00AAA9"
                            BorderColor="White"
                            Opacity="1"
                            Text="Your Account"
                            TextTransform="Default"
                            BorderWidth="2"
                            CornerRadius="100"
                            TextColor="White"
                            FontSize="14"
                            Clicked="OnAccountClick"
                            Grid.Row="1" Grid.Column="1"
                    />
                    <Button ImageSource="toolsadd24px"
                            BackgroundColor="#00AAA9"
                            BorderColor="White"
                            Opacity="1"
                            Text="Log a Repair"
                            TextTransform="Default"
                            BorderWidth="2"
                            CornerRadius="100"
                            TextColor="White"
                            FontSize="14"
                            Clicked="OnRepairRequestClick"
                            Grid.Row="1" Grid.Column="3"
                    />
                    <Button ImageSource="toolsinfo24px"
                            BackgroundColor="#00AAA9"
                            BorderColor="White"
                            TextTransform="Default"
                            Opacity="1"
                            BorderWidth="2"
                            CornerRadius="100"
                            TextColor="White"
                            Text="Track a Repair"
                            FontSize="14"
                            Clicked="OnCheckRepairsClick"
                            Grid.Row="3" Grid.Column="1"
                    />
                    <Button 
                        Clicked="OnPersonalDetailsClick"
                        ImageSource="userinfo24px"
                        BackgroundColor="#00AAA9"
                        BorderColor="White"
                        TextTransform="Default"
                        Opacity="1"
                        BorderWidth="2"
                        CornerRadius="100"
                        TextColor="White"
                        Text="My Details"
                        FontSize="14"
                        Grid.Row="3" Grid.Column="3"
                        
                    />
                </Grid>
        </StackLayout>
    </Grid>
</ScrollView>
</ContentView>

CodePudding user response:

You need to use the DN function within the grid to adjust the grid height.

CodePudding user response:

First, you define the grid on the outermost layer. The problem lies in Grid.Row="3".

Then you create another Grid in Grid.Row="3",But the height of Grid.Row="3" you define in the outer Grid is 260.Your internal view height exceeds it. Therefore, the view will be overwritten.

In general, you only need to increase the height of the external Grid.

<ScrollView>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="25"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="15"/>
            <RowDefinition Height="400"/>
            <!--Change the bottom height to 400-->
    </Grid.RowDefinitions>
    ....
</ScrollView>
  • Related