设置两种方式绑定数字位置xamarin

Question

我创建的引脚组合布局类似于

Image

代码：

<StackLayout>
                <Grid>
                    <Grid Margin="0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Button x:Name="btn7" Text="7" HeightRequest="160" WidthRequest="180" Margin="10" BackgroundColor="White" FontSize="50"  />
                    <Button x:Name="btn8" Text="8" HeightRequest="160" WidthRequest="180" Margin="10" Grid.Column="1" BackgroundColor="White" FontSize="50" />
                        <Button x:Name="btn9" Text="9"  HeightRequest="160" WidthRequest="180" Margin="10" Grid.Column="2" BackgroundColor="White" FontSize="50"/>
                        <Button Text="6"  HeightRequest="160" WidthRequest="180" Margin="10" Grid.Column="2" Grid.Row="1" BackgroundColor="White" FontSize="50"/>
                        <Button Text="5"  HeightRequest="160" WidthRequest="180" Margin="10" Grid.Column="1" Grid.Row="1" BackgroundColor="White" FontSize="50" />
                        <Button Text="4"  HeightRequest="160" WidthRequest="180" Margin="10" Grid.Row="1" BackgroundColor="White" FontSize="50" />
                        <Button Text="1"  HeightRequest="160" WidthRequest="180" Margin="10" Grid.Row="2" BackgroundColor="White" FontSize="50" />
                        <Button Text="2"  HeightRequest="160" WidthRequest="180" Margin="10" Grid.Row="2" Grid.Column="1" BackgroundColor="White" FontSize="50" />
                        <Button Text="3"  HeightRequest="160" WidthRequest="180" Margin="10" Grid.Row="2" Grid.Column="2" BackgroundColor="White" FontSize="50" />
                        <Button Text="0"  HeightRequest="160" WidthRequest="180" Margin="10" Grid.Row="3" Grid.Column="1" BackgroundColor="White" FontSize="50" />
                        <Button Text="Ok" HeightRequest="160" WidthRequest="180" Margin="10" Grid.Row="3" BackgroundColor="White" FontSize="50"/>
                        <Button Text="Clear"  HeightRequest="160" WidthRequest="180" Margin="10" Grid.Row="3" Grid.Column="2" BackgroundColor="White" FontSize="50" />
                    </Grid>
                </Grid>
            </StackLayout>

我想将所有数字按钮设置为随机位置，因此我希望 0,1,2,3,4,5,6,7,8,9 但每次访问此视图时都处于不同的位置。我从两个绑定 class 开始，我的结构如下：

public class PinPageViewModel : BaseViewModel
    {

        public PinPageViewModel()
        {
            _ = LoadItems();
        }

        public PinPageViewModel(INavigation navigation)
        {
            _ = LoadItems();
            Navigation = navigation;
        }


        public INavigation Navigation { get; set; }
       

        private async Task LoadItems()
        {
            try
            {
              
            }
            catch (Exception ex)
            {
                return;
            }
          

        }

    }

那么我需要做什么才能实现这一目标？我的意思是我需要在 stacklayout 的每个按钮中做些什么，然后我如何在绑定视图模型中接收然后设置随机文本，最后一个函数来知道按下了哪个按钮？

更新

作为下面的评论我有一些问题，每个按钮应该有Text="{Binding Number}"（所有按钮应该有相同的）？

然后我把ViewModel改成：

  public PinPageViewModel()
        {
            _ = LoadItems();
        }

        public PinPageViewModel(INavigation navigation)
        {
            _ = LoadItems();
            Navigation = navigation;
        }


        public INavigation Navigation { get; set; }

        private int _number;

        public int Number
        {
            get { return _number; }
            set { SetProperty(ref _number, value, nameof(Number)); }
        }
       

        private async Task LoadItems()
        {
            try
            {

                SetNumber();

            }
            catch (Exception ex)
            {
                return;
            }
        }


        private void SetNumber()
        {
            int Min = 0;
            int Max = 9;
            Random randNum = new Random();
            int[] test2 = Enumerable
                .Repeat(0, 5)
                .Select(i => randNum.Next(Min, Max))
                .ToArray();

          //How can I assign a number to each button?
        }
    }

如何在随机数后为每个按钮分配按钮值？此致

Answer 1

创建您的号码列表

public List<string> data { get; set; } = new List<string>{"0", "1", ... "9" };

randomize the order

在您的 XAML 中，将每个按钮绑定到列表的一个元素

<Button Text="{Binding data[0]}" Clicked="ButtonClick" ... />
...
<Button Text="{Binding data[9]}" Clicked="ButtonClick" ... />

然后在您的点击处理程序中

protected void ButtonClick(object sender, EventArgs args)
{
  var button = (Button)sender;
  var number = button.Text;
}

设置两种方式绑定数字位置xamarin

Set two way binding numbers position xamarin

xamarin

two-way-binding