如何在一行4和2按钮之间切换?

时间:2017-09-04 02:37:55

标签: xamarin xamarin.forms

我有这段代码:

        <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>

我想让前四个或最后两个按钮连续出现在屏幕的底部。

是否可以有多个Grid.Row =“2”并在后端C#中使用IsVisible切换到其中一个或另一个?我认为这会做我需要的但不确定这是否是一个很好的方法呢?

我很欣赏一些建议,因为我只是为每个按钮设置了IsVisible,并且没有按预期显示它们。

2 个答案:

答案 0 :(得分:1)

您绝对可以将两个或多个网格/容器分配给给定行。使用isVisible来显示/隐藏那些包含按钮组的容器应该可以正常工作。

答案 1 :(得分:0)

你想要的是这样的

<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>

使用像这样的ViewModel

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在这里https://pastebin.com/aLMXRN50

这为您提供了一排4个按钮,当您按任意按钮时,它只会切换到2个按钮。有很多方法可以达到这个目的,但我认为这就是你所追求的。请注意,Grid.Row属性是在Grid内部的子元素中设置的,而不是在Grid本身上设置的。