We Keep Coding

Display a ToolBar in a Xamarin.Forms modal page

The "new" and recommended way to display a modal page with the Xamarin.Forms Shell uri-based navigation is to set this tag in the XAML file (source): Shell.PresentationMode="ModalAnimated"
and to navigate to it by using a standard route and invoking it with the function Shell.Current.GoToAsync("routeToMyPage").
However, this displays the modal page without a toolbar. Without Shell navigation, I would have wrapped this page in a NavigationPage, but since the pages are initialized through reflection (at least that's what it looks like - don't quote me on this), I don't know how to do that.
Adding a ToolbarItem in the page's XAML code doesn't solve this, neither does the Shell.NavBarIsVisible="True" property, and adding a Button in the Shell.TitleView tag doesn't display a toolbar either.
Is there a way to display the default navigation toolbar without rendering a custom one myself?
Here is the XAML code I used to try to have the Toolbar displayed:
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Shell.PresentationMode="ModalAnimated"
Shell.NavBarIsVisible="True"
x:Class="StackOverflow.Views.MyModalPage">
<ContentPage.ToolbarItems >
<ToolbarItem Text="Hi"/>
</ContentPage.ToolbarItems>
<Shell.TitleView>
<Button Text="Toolbar Button"/>
</Shell.TitleView>
<ContentPage.Content>
</ContentPage.Content>
</ContentPage>
Edit: I have created a small sample project to showcase my issue: https://github.com/Kuurse/StackOverflowExample

You can first create the NavigationPage root page in the app class:
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new MainPage());
}
}
Then set like this in your mainpage.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="StackOverflow.Views.MyModalPage"
NavigationPage.HasNavigationBar="True">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Hi"/>
</ContentPage.ToolbarItems>
</ContentPage>
By the way, do you want to display only the default navigation toolbar?

Setting my partial View, not working xamarin

Now I got started with Prism Framework for xamarine, but I'm having a little problem achieving connections across views.
I have this folder "Views" and inside it I have another folder called PartialViews. Now inside PartialViews I have a contentPage called "Header.xaml".
Now I would like to atach this file to the Index.xaml view, which is located in the Views folder. I would like to atach the "Header.xaml" to other views also, like for example I would like to atach it to the "Orders.xaml" view.
My Header.xaml file is as follows :
<?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="http://prismlibrary.com"
xmlns:local="clr-namespace:PROJECTX.Views"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="PROJECTX.Views.Header">
<StackLayout>
<Label Text="Trying partial views" />
</StackLayout>
</ContentPage>
While my Index.xaml is as follows:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:combobox="clr-namespace:Syncfusion.XForms.ComboBox;assembly=Syncfusion.SfComboBox.XForms"
xmlns:ListCollection="clr-namespace:System.Collections.Generic;assembly=mscorlib"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="http://prismlibrary.com"
xmlns:local="clr-namespace:PROJECTX.Views"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="PROJECTX.Views.Index"
x:Name="selfi">
<ScrollView>
<local:Header mvvm:ViewModelLocator.AutowirePartialView="{x:Reference selfi}" />
<combobox:SfComboBox x:Name="comboBox">
<combobox:SfComboBox.ComboBoxSource>
<ListCollection:List x:TypeArguments="x:String">
<x:String>Rendit sipas: Me te kerkuara</x:String>
<x:String>Rendit sipas: Te fundit</x:String>
<x:String>Rendit sipas: Alfabetit</x:String>
</ListCollection:List>
</combobox:SfComboBox.ComboBoxSource>
</combobox:SfComboBox>
</ScrollView>
</ContentPage>
I also registred on my App.xaml.cs the routing of the PartialViews folder with the view model like this:
protected override void RegisterTypes(IContainerRegistry containerRegistry)
{
containerRegistry.RegisterForNavigation<NavigationPage>();
containerRegistry.RegisterForNavigation<MainPage, MainPageViewModel>();
containerRegistry.RegisterForNavigation<Index, IndexViewModel>();
//containerRegistry.RegisterForNavigation<Header, HeaderViewModel>();
ViewModelLocationProvider.Register<Header, HeaderViewModel>();
}
Now I get a few errors...
1. The property 'Content' is set more than once.
2. The attachable property 'AutowirePartialView' was not found in type 'ViewModelLocator'.
3. Property 'Content' does not support values of type 'Header'.
Now I know this might be a rookie question, but I just can't seem to get it to work this partial views thing.
Is my understanding of partial views in xamarin correct? I'm supposed to call the partial view from the view.. correct?
Any help I would really really appreciate.

So you have to understand that in Xamarin forms, you can only have one ContentPage object for a page, hence you are getting the error “Content is set more than once”. You can however have multiple Layouts inside a single page
Here’s a quick snippet explaining pages versus layouts
Since you’re looking to use the Prism "PartialViews", a common way of referencing them is a "Template". So you’d have a HeaderTemplate file as you have shared. But instead of a ContentPage object, you would use a ContentView object (which is of type Layout) and you would define the content of the header inside that. (Official Docs)
And then you can add it to any page using this line inside your XAML as you would add a regular layout:
<templates: HeaderTemplate/>

SlideOverKit : A value of type 'SlideMenuView' cannot be added to a collection or dictionary of type 'IList'

I am implementing BottomSheet in Xamarin.forms with the help of SlideOverKit library available in NuGet Gallery. I have referred their sample available on GitHub. My implementation details are bellow
Implementation details:
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:SmartApp.CustomControls"
xmlns:y="clr-namespace:SlideOverKit;assembly=SlideOverKit"
Title="Opportunities"
x:Class="SmartApp.OpportunitiesPage">
<TabbedPage.ToolbarItems>
<!--Menu Item here-->
</TabbedPage.ToolbarItems>
<ContentPage Title="Tab 1" >
<!--Tab 1 details here-->
</ContentPage>
<y:SlideMenuView >
<!--Tab 2 details here-->
</y:SlideMenuView>
</TabbedPage>
In the above implementation I am facing on compile time error which is "A value of type 'SlideMenuView' cannot be added to a collection or dictionary of type 'IList'", also y:SlideMenuView not having support for Title attribute which is another issue. How can I resolve this issue? please help.

The SlideMenuView must be placed within a MenuContainerPage instead of a ContentPage.
See their sample in c#. The same can also be done in XAML:
Simply replace your ContentPage with a y:MenuContainerPage or create a custom page that inherits from MenuContainerPage and use that as parent page.
This information can also be found on their website:
Inherit
The page which contains SlideMenuView must inherit from
MenuContainerPage or IMenuContainerPage. Your page can inherit from
MenuContainerPage, so that you can just set SlideMenuView property and
it will get work.
If your page need to inherit from other base pages in your solution,
you must implement IMenuContainerPage interface and you need to create
the renderer pages for each platforms. It won't too hard, just copy
codes from sample, you can follow the SlideDownMenuPage page in sample
code to do this.

XAML code behind x:name property is unaccessable

I'm new to xamarin forms, I created an Android Forms apps. But when i give x:Name="" to any element in xaml. In code behind i can't access this property id.
- I updated nuget packages even i keep trying to rebuild projects. But still unable to access xaml ids in code behind. I also uninstalled and installed visual studio multiple times. But still the same problem.

You have to build the project once after adding control in the Xaml.Then you will be able to access the control.

Try to execute this code and find what is wrong in your code:
TestPage.xaml:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TestImageCropping.TestPage">
<ContentPage.Content>
<Label x:Name="label1" Text="Hello"/>
<Button x:Name="button1" Text="Xamarin"/>
</ContentPage.Content>
</ContentPage>
TestPage.xaml.cs:
using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace TestImageCropping
{
public partial class TestPage : ContentPage
{
public TestPage()
{
InitializeComponent();
label1.TextColor = Color.Blue;
button1.Text = "Click here";
}
}
}

There are some issues related to x:Name property and accessing it in background...
Try to write it manually, it will work.

Hiding a tab in Xamarin.Forms using Prism framework

I am working on a Xamarin Forms project that uses an MVVM pattern and Prism.
My issue is, I need to be able to hide a tab on a tab page based off of a bool. There is a bindable property in the XAML called "IsVisible", which I assumed would hide the tab from the user, but instead the tab still shows but displays a blank page when selected.
Currently my XAML looks like this
<?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:local="clr-namespace:com.XXXXXXX"
prism:ViewModelLocator.AutowireViewModel="True"
BackgroundColor="White"
x:Class="com.XXXXXXXXXX.EditChargePage"
Title="{Binding Title}">
<local:EditChargeDetailsPage Title="Details" />
<local:EditChargeTrackingPage Title="Tracking" IsVisible="{Binding TabContext.HasTracking}" IsEnabled="{Binding TabContext.HasTracking}"/>
<local:EditChargeNotesPage Title="Notes" />
</TabbedPage>
Originally to solve the problem I just used "IsVisible", when that didn't work as expected I added "IsEnabled" which didn't seem to do anything.
Is there a way to hide the Tab from the UI using a boolean value in Xamarin (or Prism for Xamarin) without breaking MVVM?

You might want to check out the Prism Samples. The TabbedNavigation sample demonstrates how to initialize your tabbed children with INavigatingAware or the IEventAggregator, as well as dynamically adding the tabs at run time. If you need even finer control, such as a value in a ViewModel of one of your Child Pages that determines whether some other page should be shown, then you could use this to publish an event with the IEventAggregator and subscribe to that event in your TabbedPage to handle adding or removing the page.
Unfortunately IsVisible and IsEnabled do not actually work within a TabbedPage the way you were hoping. So the only way you can accomplish this is to actually manipulate the Children of the TabbedPage directly pushing or popping them from the collection.