Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Whats the most simple way to create a FlexLayout with 2 - 4 images as content?

hermannhermann USMember ✭✭

Hi, I want a FlexLayout to select my App's current language, which should be displayed as a well organised set of flags (starting with German and English flag) So, do I need a ViewModel for that, or - what I would prefer - can I put the image source list somehow directly in the XAML file of my language selection page?
If yes, can someone give me plese a hint, how to do that?


  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    So, do I need a ViewModel

    Stop. The answer to that question is always "yes".
    You should be designing your app, and its features around the MVVM pattern. Period.

    Personally I'd make a Country object, with properties for

    • FlagImage
    • CultureAbbrev
    • TimeZone
    • DisplayName
    • etc.

    then you just need an ObservableCollection<Country> with all the countries you support. Later you can download additional supported languages as you get translations worked out without having to recompile the app and re-deploy to all your users.

    Then you just do a bindable FlexLayout using the collection as its source. And make a template for how you want to present each country: Is it just the flag... flag and name... etc.

    Here's a bindable FlexLayout with a Label and Image in a Grid - with the Grid having the TapGesture so you can avoid using a Button and all that overhead. Mine is for a LibararyBook collection. You substitute your Country collection and properties.

                BindableLayout.ItemsSource="{Binding LibraryBooks}"
                            HeightRequest="{StaticResource ButtonHeight}"
                            WidthRequest="{StaticResource ButtonWidth}"
                            BackgroundColor="{StaticResource BlueTextColor}"
                                    Command="{Binding Source={x:Reference this}, Path=LibraryVm.BrowseToAddressCommand}"
                                    CommandParameter="{Binding Address}"
                                    NumberOfTapsRequired="1" />
                                HeightRequest="{StaticResource IconSize}"
                                WidthRequest="{StaticResource IconSize}"
                                Source="{Binding IconPath}" />
                            <Label Text="{Binding Name, Mode=OneWay}" />
Sign In or Register to comment.