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?
Thanks,
Hermann

Answers

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

        <ScrollView>
            <FlexLayout
                AlignContent="Center"
                AlignItems="Center"
                BindableLayout.ItemsSource="{Binding LibraryBooks}"
                Direction="Row"
                JustifyContent="Center"
                Wrap="Wrap">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <Grid
                            HeightRequest="{StaticResource ButtonHeight}"
                            WidthRequest="{StaticResource ButtonWidth}"
                            BackgroundColor="{StaticResource BlueTextColor}"
                            Margin="5">
                            <Grid.GestureRecognizers>
                                <TapGestureRecognizer
                                    Command="{Binding Source={x:Reference this}, Path=LibraryVm.BrowseToAddressCommand}"
                                    CommandParameter="{Binding Address}"
                                    NumberOfTapsRequired="1" />
    
    
                            <Image
                                HorizontalOptions="Start"
                                VerticalOptions="Start"
                                HeightRequest="{StaticResource IconSize}"
                                WidthRequest="{StaticResource IconSize}"
                                Source="{Binding IconPath}" />
                            <Label Text="{Binding Name, Mode=OneWay}" />
    
                        </Grid>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </FlexLayout>
        </ScrollView>
    
    
Sign In or Register to comment.