Отображение Datagrid на основе количества элементов привязки в Xamarin Forms

Question

В настоящее время я использую Syncfusion Sf Datagrid. Я хочу отображать датагриды на основе количества. Например, у меня есть кнопка A и кнопка B, если пользователь нажмет на A, отобразится 1 сетка данных. Если пользователь нажмет на B, отобразится 2 сетки данных. К вашему сведению, сетка данных будет отображаться на той же странице.

Мой код теперь отображает всю сетку данных. Я хотел бы отображать сетку данных только на основе условия (в данном случае это A или B). Я не уверен, как этого добиться, потому что сетка данных находится в xaml, как мне убедиться, что правильное количество сетки данных, которое я хочу отобразить? Скажем, если я хочу иметь больше категорий с разными элементами, как мне отобразить правильное количество datagrid в соответствии с элементами внутри категории?

MainPage.xaml

 <ContentPage.Content>
    <StackLayout>
        <Button Text="A"/>
        <Button Text="B"/>

        <sfgrid:SfDataGrid ItemsSource="{Binding fruitA}"/>
        <sfgrid:SfDataGrid ItemsSource="{Binding vegeB1}"/>
        <sfgrid:SfDataGrid ItemsSource="{Binding vegeB2}"/>

    </StackLayout>
</ContentPage.Content>

MainPage.cs

  public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        this.BindingContext = new ViewModel();
    }
}

ViewModel

public class ViewModel
{
    public ObservableCollection<Test> fruitA { get; set; }
    public ObservableCollection<Test> vegeB1 { get; set; }
    public ObservableCollection<Test> vegeB2 { get; set; }


    public ViewModel()
    {
        fruitA = new ObservableCollection<ChildPart>();
        fruitA.Add(new Test() { Title = "Orange", Value = "1.20" });
        fruitA.Add(new Test() { Title = "Banana", Value = "1.40" });
        fruitA.Add(new Test() { Title = "Apple", Value = "1.30" });

        vegeB1 = new ObservableCollection<ChildPart>();
        vegeB1.Add(new Test() { Title = "Spinach", Value = "1.20" });
        vegeB1.Add(new Test() { Title = "Cabbage", Value = "1.40" });

        vegeB2 = new ObservableCollection<ChildPart>();
        vegeB2.Add(new Test() { Title = "Lettuce", Value = "1.20" });
        vegeB2.Add(new Test() { Title = "Broccoli", Value = "1.40" });
        vegeB2.Add(new Test() { Title = "Celery", Value = "1.30" });

    }
}

Тест

 public class Test
{
    public string Title { get; set; }
    public string Value { get; set; }
}

Answer 1

Вы можете сослаться на следующий обновленный фрагмент кода, чтобы выполнить ваше требование «На основе щелчка кнопки я должен показать соответствующую сетку данных» .

Фрагмент кода:

<StackLayout>
<Button x:Name="A" Text="A" Clicked="A_Clicked" />
<Button x:Name="B1" Text="B1" Clicked="B1_Clicked" />
<Button x:Name="B2" Text="B2" Clicked="B2_Clicked" />

<sfgrid:SfDataGrid x:Name="fruitA" IsVisible="False" ItemsSource="{Binding fruitA}"/>
<sfgrid:SfDataGrid x:Name="vegeB1" IsVisible="False" ItemsSource="{Binding vegeB1}"/>
<sfgrid:SfDataGrid x:Name="vegeB2" IsVisible="False" ItemsSource="{Binding vegeB2}"/>

</StackLayout>


private void A_Clicked(object sender, EventArgs e)
{
  //// Displays only fruit datagrid.
  fruitA.IsVisible = true;
  vegeB1.IsVisible = false;
  vegeB2.IsVisible = false;
}

private void B1_Clicked(object sender, EventArgs e)
{
  //// Displays only vegeB1 datagrid.
  fruitA.IsVisible = false;
  vegeB1.IsVisible = true;
  vegeB2.IsVisible = false;
}

private void B2_Clicked(object sender, EventArgs e)
{
  //// Displays only vegeB2 datagrid.
  fruitA.IsVisible = false;
  vegeB1.IsVisible = false;
  vegeB2.IsVisible = true;
}

Образец ссылки

С уважением,

Прадип Кумар

Answer 2

Существует способ использовать Связываемые макеты , чтобы добиться этого, вы можете проверить, хотите ли вы.

Изменить MainPage.xaml как показано ниже (добавьте ScrollView, если количество элементов слишком велико):

<StackLayout>

    <Button Text="A" Clicked="Button_Clicked_A"/>
    <Button Text="B" Clicked="Button_Clicked_B"/>
    <Button Text="C" Clicked="Button_Clicked_C"/>

    <ScrollView>
        <StackLayout x:Name="MyStackLayout" Orientation="Vertical">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <sfgrid:SfDataGrid ItemsSource="{Binding }" />
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
    </ScrollView>            

</StackLayout>

Modiy MainPage.cs asd follow:

public partial class MainPage : ContentPage
{
    ViewModel viewModel;
    public MainPage()
    {
        InitializeComponent();
        viewModel = new ViewModel();
    }

    private void Button_Clicked_A(object sender, EventArgs e)
    {
        List<object> list = new List<object>();
        list.Add(viewModel.fruitA);
        BindableLayout.SetItemsSource(MyStackLayout, list);
    }

    private void Button_Clicked_B(object sender, EventArgs e)
    {
        List<object> list = new List<object>();
        list.Add(viewModel.vegeB1);
        list.Add(viewModel.vegeB2);
        BindableLayout.SetItemsSource(MyStackLayout, list);
    }

    private void Button_Clicked_C(object sender, EventArgs e)
    {
        List<object> list = new List<object>();
        list.Add(viewModel.fruitA);
        list.Add(viewModel.vegeB1);
        list.Add(viewModel.vegeB2);
        BindableLayout.SetItemsSource(MyStackLayout, list);
    }
}

После запуска эффект следующим образом: