Set two way binding numbers position xamarin

Question

I create pin combination layout like

Code:

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

I want to do all number buttons random positions so I want to have 0,1,2,3,4,5,6,7,8,9 but in different position every time I access this view. I start with two binding class and I have structure like:

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

        }

    }

So what I need to do to achieve that? I mean what I need to do in each button of stacklayout, then how can I receive in binding view model then set random text, and finally a function to know which button is pressed?

UPDATE

As comment bellow I have some questions, each button should have Text="{Binding Number}" (All buttons should have the same one)?

Then I change ViewModel as:

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

How can I assign button value to each button after random numbers? Regards

create an array 0..9. Randomize it's order. Then bind each element to your UI — Jason, Jul 23 '20 at 19:09
I update my question, how can I bind after do all my changes? @Jason — Jesus, Jul 23 '20 at 19:32

score 0 · Accepted Answer · answered Jul 23 '20 at 19:42

0

create a list of your numbers

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

randomize the order

in your XAML, bind each button to an element of the list

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

then in your click handler

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

answered Jul 23 '20 at 19:42

Jason

86,222
15
131
146

is it possible to void Clicked event of button? I mean detect Click with Command and set to view model? – Jesus Jul 23 '20 at 20:21
sure, just bind the `Command` property to your VM instead – Jason Jul 23 '20 at 20:25
Is a best practice to handle it in view modal than xaml class? what do you recommend? – Jesus Jul 23 '20 at 20:27
if you're hardcore MVVM you should use Command. But otherwise do whatever works for you. – Jason Jul 23 '20 at 20:29

Set two way binding numbers position xamarin

1 Answers1