Xamarin 表单设计开始菜单

我正在制作Xamarin.Forms应用程序。我的开始菜单需要类似的设计。有什么想法和建议吗？

你应该试试这个

-StackLayout
    -Label(Center)
    -ScrollView
        -StackLayout (Horizontal)
            -Button
            -Button
        -Grid (2 column, 4 row)
            -StackLayout
                -Image
                -Label(Center)

如果要使用TabbedPage，可以使用它

---

这是我的代码

您可以使用CollectionView。它是一个灵活而高效的视图，用于使用不同的布局规范显示数据列表

在xaml中

public observeCollection MySource{get；set；}
公共主页（）
{
初始化组件（）；
MySource=新的ObservableCollection（）{
新数据模型（）{Title=“Transatcions”，BgImageSource=“xxx”}，
新数据模型（）{Title=“Transatcions”，BgImageSource=“xxx”}，
新数据模型（）{Title=“Transatcions”，BgImageSource=“xxx”}，
新数据模型（）{Title=“Transatcions”，BgImageSource=“xxx”}，
新数据模型（）{Title=“Transatcions”，BgImageSource=“xxx”}，
新数据模型（）{Title=“Transatcions”，BgImageSource=“xxx”}，
新数据模型（）{Title=“Transatcions”，BgImageSource=“xxx”}，
新数据模型（）{Title=“Transatcions”，BgImageSource=“xxx”}，
新数据模型（）{Title=“Transatcions”，BgImageSource=“xxx”}，
新数据模型（）{Title=“Transatcions”，BgImageSource=“xxx”}，
};
BindingContext=这个；
}

---

有关CollectionView的更多详细信息和用法，您可以参考。

选项卡式页面应用程序和“开始”菜单包含2列和4列的网格视图rows@LeoJebran一些示例源代码？介意向我们展示一下您到目前为止尝试过的内容吗？我不需要tabbedPage，只有一个menui将尝试它并在此处作出响应它现在正在工作，只是不知道在哪里添加TapGesturerecognizer@Lucas Zhang-MSFT我找到了它。我还有一个问题。对于这个事件，我有一个命令。当我点击每一个元素时，我会导航到新的页面。如何在ModelView中使用一个命令来组织此任务？您可以创建一个包含更多详细信息的新线程（如您尝试过的代码），以便我可以更好地帮助您。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="App10.MainPage">

    <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <!-- Place new controls here -->

        <CollectionView ItemsSource="{Binding MySource}">
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical"
                        Span="2" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Frame Padding="10" WidthRequest="120" HeightRequest="120">
                        <Frame BackgroundColor="AliceBlue" WidthRequest="100" HeightRequest="100" HasShadow="True" CornerRadius="10" Padding="10" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >

                            <Image Source="{Binding BgImageSource}"  WidthRequest="100" HeightRequest="100"  />
                            <Label Text="{Binding Title}" WidthRequest="100" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
                        </Frame>
                    </Frame>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

    </StackLayout>

</ContentPage>

public class DataModel
{
  public string Title { get; set; }
  public string BgImageSource { get; set; }
}

public ObservableCollection<DataModel> MySource { get; set; }

public MainPage()
{
      InitializeComponent();


      MySource = new ObservableCollection<DateModel>() {

            new DataModel(){Title ="Transatcions" ,BgImageSource="xxx"},
            new DataModel(){Title ="Transatcions" ,BgImageSource="xxx"},
            new DataModel(){Title ="Transatcions" ,BgImageSource="xxx"},
            new DataModel(){Title ="Transatcions" ,BgImageSource="xxx"},
            new DataModel(){Title ="Transatcions" ,BgImageSource="xxx"},
            new DataModel(){Title ="Transatcions" ,BgImageSource="xxx"},
            new DataModel(){Title ="Transatcions" ,BgImageSource="xxx"},
            new DataModel(){Title ="Transatcions" ,BgImageSource="xxx"},
            new DataModel(){Title ="Transatcions" ,BgImageSource="xxx"},
            new DataModel(){Title ="Transatcions" ,BgImageSource="xxx"},

       };

   BindingContext = this;

}