Xamarin.Forms Design Пуск Меню - PullRequest
Новая
       12

Xamarin.Forms Design Пуск Меню

0 голосов
/ 14 января 2020

enter image description here

Я создаю приложение Xamarin.Forms. Мне нужен подобный дизайн для моего меню «Пуск». Есть идеи, предложения?

Ответы [ 2 ]

0 голосов
/ 14 января 2020

Вы можете использовать CollectionView . Это гибкое и производительное представление для представления списков данных с использованием различных спецификаций макета.

в xaml 

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

в коде позади (или модели представления)

Я использовал Stati c данные только для демонстрации, вы можете заменить их своими собственными данными. 

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

0 голосов
/ 14 января 2020

Вы должны попробовать это 

-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

...