Xamarin.Forms (XAML): Different layouts depending on a condition

Question

Is there a way to choose what layout initialize depending on one condition? I have a Grid for football stats but if myViewModel.Sport == Sports.Basketball I'd like to load a completely different layout.

I tried something like this with Datatrigger in each View but it seems a mess for me:

<Label Text="{Binding Goals}" 
       Grid.Row="1" Grid.Column="0">
    <Label.Triggers>
        <DataTrigger TargetType="Label" 
                     Binding="{Binding Sport}" 
                     Value="1">
            <Setter Property="Text" 
                    Value="{Binding Points}"/>
        </DataTrigger>
    </Label.Triggers>
</Label>

I show "goals" but if the Sports enum value is 1 (Sports.Basketball) I change to "points". I want to do this with lots of Labels and even Images so I need a proper way to do it.

Could someone help me? I need to load a different Grid depending on the Sport Property of my ViewModel.

Answer 1

Another thing you could do is place each separate sport into it's own view, add all the views to your page and set their IsVisible property depending on which sport you want to show.

An example would look like this in pseudo-code:

<Page>
   <Grid>
       <BasketballView IsVisible="{Binding IsBasketball}">
       <SoccerView IsVisible="{Binding IsSoccer}">
       <FootballView IsVisible="{Binding IsFootball}">
   </Grid>
</Page>

Then set the appropriate boolean values from the ViewModel.