Change contentpage's content depending platform (in XAML)

LouisBeaumontLouisBeaumont ✭✭Member ✭✭
edited June 2018 in Xamarin.Forms

I have to use something else than ListView for iOS version of my application because ListView is ugly, bugged on iOS (IsVisible doesn't work) and too different from Android.
So i was looking for something like OnPlatform in XAML to choose ListView for Android and something else like a ScrollView for iOS, i couldn't find any documentation for something else than Padding or styles things with OnPlatform for example
Something like that ?

<OnPlatForm>
    <OnPlatform.Platforms>
        <On Platform="Android">
            <ContentPage.Content>
                <ListView  ItemsSource="{Binding xxx}" 
                        HasUnevenRows="True">
                    ...
                </ListView>
            </ContentPage.Content>
        </On>
    </OnPlatform.Platforms>
</OnPlatForm>

<OnPlatForm>
    <OnPlatform.Platforms>
        <On Platform="iOS">
            <ContentPage.Content>
                    <ScrollView >
                    ...
                </ScrollView >
            </ContentPage.Content>
        </On>
    </OnPlatform.Platforms>
</OnPlatForm>

Thanks for help !

Tagged:

Posts

  • ClintStLaurentClintStLaurent ✭✭✭✭✭ USUniversity ✭✭✭✭✭

    So what is it you're asking... I can't figure it out from the question.
    Are you looking for something other than ListVIew... Or properties other than padding... You know ScrollView doesn't support binding to a collection, right? So how do you plan on using it?

  • LouisBeaumontLouisBeaumont ✭✭ Member ✭✭

    I just need to use ListView for Android and ScrollView for iOS, simple, I know ScrollView doesn't support binding to a collection, doesn't matter

  • NMackayNMackay mod GBInsider, University mod

    You can use OnPlatform and contentviews to achieve this.

  • LouisBeaumontLouisBeaumont ✭✭ Member ✭✭

    @NMackay said:
    @LouisBeaumont

    Here's a sample.

    <ContentPage.Content>
            <ContentView>
                <ContentView.Content>
                    <OnPlatform x:TypeArguments="View">
                        <On Platform="Android">
                            <StackLayout Orientation="Vertical">
                                <Button Text="iOS"></Button>
                                <ListView />
                            </StackLayout>
                        </On>
                        <On Platform="iOS">
                            <ScrollView>
                                <Button Text="iOS"></Button>
                            </ScrollView>
                        </On>
                        <On Platform="UWP">
                            <Grid>
                                <Button Text="UWP"></Button>
                            </Grid>
                        </On>
                    </OnPlatform>
                </ContentView.Content>
            </ContentView>
        </ContentPage.Content>
    

    Omg thanks !!!
    This is exactly what i was looking for, I couldn't find such an example, you saved me !

  • ClintStLaurentClintStLaurent ✭✭✭✭✭ USUniversity ✭✭✭✭✭

    So here's my question.
    If on Android you had <ListView ItemsSource="{Binding xxx}"
    What are you going to bind with on iOS ? What control are you going to us in place of ListView that will let you bind to a collection and still have automatic updates to your UI when elements in your collection change?

  • LouisBeaumontLouisBeaumont ✭✭ Member ✭✭

    @ClintStLaurent said:
    So here's my question.
    If on Android you had <ListView ItemsSource="{Binding xxx}"
    What are you going to bind with on iOS ? What control are you going to us in place of ListView that will let you bind to a collection and still have automatic updates to your UI when elements in your collection change?

    My collection is fixed size, it won't lose an item or add one.
    I'll just do "dirty code" for iOS because i don't have the choice / time
    => copy paste stack layout for each item in my collection :D

  • ClintStLaurentClintStLaurent ✭✭✭✭✭ USUniversity ✭✭✭✭✭

    Observation is more than size. If a status change on one of the objects... An employ goes from clocked-in to clocked-out... that's something that should update the UI through binding. If someone changes the category of a movie in your collection, the number stays the same but a movie goes from 'Comedy' to 'Drama', that is a change that should be updated in the UI automatically. Etc.

  • LouisBeaumontLouisBeaumont ✭✭ Member ✭✭

    @ClintStLaurent said:
    Observation is more than size. If a status change on one of the objects... An employ goes from clocked-in to clocked-out... that's something that should update the UI through binding. If someone changes the category of a movie in your collection, the number stays the same but a movie goes from 'Comedy' to 'Drama', that is a change that should be updated in the UI automatically. Etc.

    Of course my UI use binding
    For example =>

    <Label Text="{Binding xxx[0].a}" Margin="0,0,40,0" VerticalOptions="CenterAndExpand" HorizontalOptions="EndAndExpand"/>
    

    Obviously i don't have to use "xxx[0]" in the case of Android which use ListView

  • EigilKroghSorensenEigilKroghSorensen ✭✭ USMember ✭✭

    Where do I find a list of x:TypeArguments that can be used in OnPlatform ?

    Best
    Eigil

  • ClintStLaurentClintStLaurent ✭✭✭✭✭ USUniversity ✭✭✭✭✭

    @EigilKroghSorensen said:
    Where do I find a list of x:TypeArguments that can be used in OnPlatform ?

    You don't. You can change just about any type you like including custom classes. int, bool, DateTime, whatever.

  • EigilKroghSorensenEigilKroghSorensen ✭✭ USMember ✭✭

    How do I fund out what to set the TypeArguments to then ?

  • ClintStLaurentClintStLaurent ✭✭✭✭✭ USUniversity ✭✭✭✭✭

    @EigilKroghSorensen said:
    How do I fund out what to set the TypeArguments to then ?

    Its whatever type that property is. If you're changing the BackgroundColor then the type is Color. If its Margin then the type is Thickness. You look up the type of that property you want to change.
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/margin-and-padding

  • EigilKroghSorensenEigilKroghSorensen ✭✭ USMember ✭✭

    How do I solve this problem then ?

    --
    Eigil

  • ClintStLaurentClintStLaurent ✭✭✭✭✭ USUniversity ✭✭✭✭✭

    Huh? The two questions aren't connected.
    One is about selecting a control and one is about setting properties.
    Both are "... from XAML for each platform" - but other than that aren't related.
    Its like asking how changing a tire will resolve the problem with changing the oil - since they are both changing something - and both on your Ford.

    Besides - the other question was already answered.

Sign In or Register to comment.