Swap ContentView using MVVM

BoyeBoye Member ✭✭
edited December 2018 in Xamarin.Forms

So what I first thought was a simple task, seems to be pretty complicated.
What I'm trying to accomplise is having a main page with a ContentView in the middle and a footer navigation bar.

The footer are in place, but I don't know how to put something in the content view and how to bind it to the buttons?

What should I bind what should I write in the MainViewModel?

MainPage:

<AbsoluteLayout>
        <StackLayout BackgroundColor="#ffffff" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
            <StackLayout Margin="0,200,0,0" HorizontalOptions="Center">
                <ContentView x:Name="MainPageContainer" 
                         HorizontalOptions="FillAndExpand" 
                         VerticalOptions="FillAndExpand" 
                         AbsoluteLayout.LayoutBounds="0.5, 0.5, 1, 1"
                         AbsoluteLayout.LayoutFlags="All" />
            </StackLayout>
        </StackLayout>
        <StackLayout AbsoluteLayout.LayoutBounds=".20,1.01,1,.1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="#f6f6f6" HorizontalOptions="FillAndExpand" Orientation="Horizontal">
            <StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckHome">
                <Image Source="{Binding HomeIcon}" Margin="0,15,0,15" x:Name="imgHome" Style="{StaticResource ButtonNavigationBarImageStyle}" />
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding TapHomeCommand}" NumberOfTapsRequired="1"></TapGestureRecognizer>
                </StackLayout.GestureRecognizers>
            </StackLayout>
            <StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckSearch">
                <Image Source="{Binding SearchIcon}" Margin="0,15,0,15" x:Name="imgSearch" Style="{StaticResource ButtonNavigationBarImageStyle}" />
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding TapSearchCommand}" NumberOfTapsRequired="1"></TapGestureRecognizer>
                </StackLayout.GestureRecognizers>
            </StackLayout>
            <StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckCreate">
                <Image Source="create.png" Margin="0,5,0,5" x:Name="imgCreate" Style="{StaticResource ButtonNavigationBarCreateImageStyle}" />
            </StackLayout>
            <StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckFavorites">
                <Image Source="{Binding FavoritesIcon}" Margin="0,15,0,15" x:Name="imgFavorites" Style="{StaticResource ButtonNavigationBarImageStyle}" />
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding TapFavoritesCommand}" NumberOfTapsRequired="1"></TapGestureRecognizer>
                </StackLayout.GestureRecognizers>
            </StackLayout>
            <StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckSettings">
                <Image Source="{Binding SettingsIcon}" Margin="0,15,0,15" x:Name="imgSettings" Style="{StaticResource ButtonNavigationBarImageStyle}" />
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding TapSettingsCommand}" NumberOfTapsRequired="1"></TapGestureRecognizer>
                </StackLayout.GestureRecognizers>
            </StackLayout>
        </StackLayout>
    </AbsoluteLayout>

Answers

Sign In or Register to comment.