PopUp a Modalpage over a tabbed page with Prism

francescoantonelli.0345francescoantonelli.0345 ITMember ✭✭
edited April 2018 in Xamarin.Forms

Hi,
I have a MasterDetailPage like this

<?xml version="1.0" encoding="utf-8" ?>
    <MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
                                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                                    xmlns:views="clr-namespace:Fake.Views"
                                    xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
                                    prism:ViewModelLocator.AutowireViewModel="True" 
                                    MasterBehavior="Popover"
                                    Icon="hamburger"        x:Class="Fake.Views.MainView">

    <MasterDetailPage.Master>

                <views:MenuView BindingContext="{Binding MenuViewModel}" />

    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>


        <views:NavigationPage >
            <x:Arguments>
                <views:ContentTabbedPageView  BindingContext="{Binding ContentTabbedPageViewModel}" />
            </x:Arguments>
        </views:NavigationPage>

    </MasterDetailPage.Detail>

</MasterDetailPage>

And the ContentTabbedPageView is:

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
            xmlns:views="clr-namespace:Fake.Views"
            xmlns:extensions="clr-namespace:Fake.Core.MarkupExtensions;assembly=Fake"
            prism:ViewModelLocator.AutowireViewModel="True"
            x:Class="Fake.Views.ContentTabbedPageView" 
            BarBackgroundColor="{StaticResource BackgroundColor}" 
            BarTextColor="{StaticResource BlackColor}" 
            BackgroundColor="{StaticResource BackgroundColor}" >

    <TabbedPage.ToolbarItems>
        <ToolbarItem 
            Command="{Binding OpenDoorCommand}">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource">
                    <On Platform="Android, iOS" Value="search" />
                </OnPlatform>
            </ToolbarItem.Icon>
        </ToolbarItem>
    </TabbedPage.ToolbarItems>
    <TabbedPage.Children>
        <NavigationPage Title="{extensions:Translate Chat, IsUpper=True}" >
            <x:Arguments>
                <views:ChatView />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage Title="{extensions:Translate Social, IsUpper=True}" >
            <x:Arguments>
                <views:SocialView  />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage Title="{extensions:Translate Cash, IsUpper=True}" >
            <x:Arguments>
                <views:CashView  />
            </x:Arguments>
        </NavigationPage>

    </TabbedPage.Children>
</TabbedPage>

Now I'd like from the SocialView to open a modal page with a navigation bar. The SocialView is:

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
                 xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
                 xmlns:ctrls="clr-namespace:Fake.Core.Controls;assembly=Fake"
                 xmlns:markupExtensions="clr-namespace:Fake.Core.MarkupExtensions;assembly=Fake"
                 prism:ViewModelLocator.AutowireViewModel="True"
                 x:Class="Genuiny.Views.SocialView" Title="Social">
        <ContentPage.Resources>
            <ResourceDictionary>
                <Style x:Key="TooltipTextStyle" 
                       TargetType="Label"
                       BasedOn="{StaticResource TooltipLabelStyle}">
                    <Setter Property="TextColor" 
                            Value="{StaticResource BlackColor}" />
                    <Setter Property="HorizontalOptions" 
                            Value="FillAndExpand" />
                    <Setter Property="FontSize" 
                            Value="{StaticResource LittleSize}" />
                </Style>   
            </ResourceDictionary>
        </ContentPage.Resources>
        <Grid BackgroundColor="{StaticResource BackgroundColor}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition  Width="20"/> 
                    <ColumnDefinition  Width="*"/>
                    <ColumnDefinition Width="20"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="50" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <Grid Grid.Column="1" Margin="0,20,0,10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="42" />
                    </Grid.RowDefinitions>
                    <Image Source="add.png" WidthRequest="32" Margin="10,0,0,0" x:Name="addPostButton">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding BindingContext.AddPostCommand, Source={x:Reference addPostButton}}"  />
                        </Image.GestureRecognizers>
                    </Image>
                    <ctrls:RoundedEntry Margin="0,0,0,0" Grid.Column="1" BorderColor="{StaticResource GrayColor}" BorderWidth="0.5" BorderRadius="20"
                                         Style="{StaticResource TooltipLabelEntryStyle}"
                                         Placeholder="{markupExtensions:Translate Share, IsUpper=True}" HorizontalOptions="FillAndExpand">

                    </ctrls:RoundedEntry>
                </Grid>
        </Grid>
    </ContentPage>

On the ViewModel, in the AddPostCommand I do this:

await _navigationService.NavigateAsync("AddPostView", useModalNavigation:true);

The expected behaviours is to view the new page with a navigation bar, but the new page appears without a navigation bar and if i don't use modalnavigation the page appears inside the current tab.
What am i wrong? Thanks for any kind of help.

I'm using:
Prism 7.1.0.123 pre
Xamarin.Forms 3.0 pre2

Francesco

Tagged:
Sign In or Register to comment.