CODEWITHSUNDEEP
xamarinxamarin.forms
Alan2
Alan2

Reputation: 24592

How can I switch between a row of 4 and 2 buttons?

I have this code:

        <Grid Grid.Row="2" x:Name="buttonGrid" Padding="10,0,10,0" HorizontalOptions="FillAndExpand" VerticalOptions="Center">
            <Button x:Name="aButton" Style="{StaticResource pointButton}" Text="Don't Know" />
            <Button x:Name="bButton" Style="{StaticResource pointButton}" Text="Very Hard" />
            <Button x:Name="cButton" Style="{StaticResource pointButton}" Text="Hard" />
            <Button x:Name="dButton" Style="{StaticResource pointButton}" Text="Easy" />
            <Button x:Name="nButton" Style="{StaticResource pointButton}" Text="Don't Know" />
            <Button x:Name="yButton" Style="{StaticResource pointButton}" Text="Easy" />
        </Grid>

I would like to have either the first four or the last two buttons appear at the bottom of the screen in a row.

Is it possible to have more than one Grid.Row="2" and switch to either one or the other with an IsVisible in the back end C#? I think this would do what I need but not sure if it's a good way to do this?

I'd appreciate some suggestions as right now I am just setting the IsVisible for each of the buttons and it doesn't display them in a row as expected.

Upvotes: 0

Views: 77

Answers (2)

Joagwa
Joagwa

Reputation: 309

What you want is something like this

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="9*"/>
        <RowDefinition Height="1*"/>
    </Grid.RowDefinitions>
    <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Grid.Row="1" IsVisible="{Binding FirstButtons}">
        <Button x:Name="button1" Text="button1" Command="{Binding ChangeButtonsCommand}"/>
        <Button x:Name="button2" Text="button2" Command="{Binding ChangeButtonsCommand}"/>
        <Button x:Name="button3" Text="button3" Command="{Binding ChangeButtonsCommand}"/>
        <Button x:Name="button4" Text="button4" Command="{Binding ChangeButtonsCommand}"/>
    </StackLayout>
    <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Grid.Row="1" IsVisible="{Binding SecondButtons}">
        <Button x:Name="buttonA" Text="buttonA" Command="{Binding ChangeButtonsCommand}"/>
        <Button x:Name="buttonB" Text="buttonB" Command="{Binding ChangeButtonsCommand}"/>
    </StackLayout>
</Grid>

With ViewModel something like this 

public class MainViewModel : ViewModelBase
{
    public ICommand ChangeButtonsCommand { get; private set; }

    private bool firstButtons = true;

    public bool FirstButtons
    {
        get { return firstButtons; }
        set
        {
            firstButtons = value;
            OnPropertyChanged();
        }
    }
    private bool secondButtons = false;

    public bool SecondButtons
    {
        get { return secondButtons; }
        set
        {
            secondButtons = value;
            OnPropertyChanged();
        }
    }

    public MainViewModel()
    {
        ChangeButtonsCommand = new Command(() =>
        {
            if (FirstButtons)
            {
                FirstButtons = false;
                SecondButtons = true;
            }
            else
            {
                FirstButtons = true;
                SecondButtons = false;
            }
        });
    }

ViewModelBase is here https://pastebin.com/aLMXRN50

This gives you a row of 4 buttons, when you press any of them, it switches to only 2 buttons. There are many ways to achieve this, but I think that is what you are after. Note that the Grid.Row property is set in the child elements inside the Grid, not on the Grid itself.

Upvotes: 0

Ben Reierson
Ben Reierson

Reputation: 1099

You definitely can have two or more grids/containers be assigned to a given row. Using isVisible to show/hide those containers that hold groups of buttons should work just fine.

Upvotes: 1

Related Questions