Xamarin.Forms 设计开始菜单答案

【问题标题】：Xamarin.Forms Design Start MenuXamarin.Forms 设计开始菜单
【发布时间】：2020-01-14 19:38:36
【问题描述】：

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

【问题讨论】：

一个 TabbedPage 应用程序和开始菜单一个 2 列 4 行的网格视图
@LeoJebran 一些示例源代码？
介意向我们展示您迄今为止的尝试吗？

标签： xamarin xamarin.forms xamarin.android xamarin.ios

【解决方案1】：

您可以使用 CollectionView 。它是一种灵活且高性能的视图，用于呈现使用不同布局规范的数据列表。

在xml中

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

}

有关 CollectionView 的更多详细信息和用法，您可以参考https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/。

【讨论】：

我会试试看这里回复
它现在可以工作了，只是不知道在哪里添加 TapGesturerecognizer
docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/…
@ Lucas Zhang - MSFT 我找到了。我还有一个问题。有了这个事件，我有一个命令。当我点击每个元素时，我会导航到新页面。如何在 ModelView 中用一个命令来组织这个？
您可以创建一个包含更多详细信息的新线程（例如您尝试过的代码），以便我可以更好地帮助您。

【解决方案2】：

你应该试试这个

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

如果你想使用 TabbedPage，你就用它。

这适用于我的代码https://help.syncfusion.com/xamarin/tabbed-view/overview

【讨论】：

我不需要tabbedPage，只有一个菜单