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/>

C# to Xaml Conversion

I want to implement a custom accordion ui element but the code has been written in C# ( https://github.com/Kimserey/AccordionView ) but I want to use xaml. I tried to add Accordion view in my content but while I am compiling I get following error
HomePage.xaml : error : The given key was not present in the dictionary.
Here is the my xaml code
<?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:customaccordionmenu="clr-namespace:CustomAccordionMenu"
x:Class="CustomAccordionMenu.HomePage" Title="Accordion Example" >
<ContentPage.Content>
<StackLayout VerticalOptions = "Center">
<customaccordionmenu:AccordionView/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
So I just want to create an accordionview and add the content in xaml, not in c#
PS: The project is for Xamarin.Forms

You are trying to instantiate an empty AccordionView. Judging by the code in github, the accordionview doesn't have a parameterless constructor, which could cause a problem.
Also the AccordionSectionView class calls
private ImageSource _arrowRight = ImageSource.FromFile("ic_keyboard_arrow_right_white_24dp.png");
as well as
private ImageSource _arrowDown = ImageSource.FromFile("ic_keyboard_arrow_down_white_24dp.png");
so if these files aren't in your app's resources and named in the very same way, this is also a possible cause for a crash.

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.

Coding a Navigation Drawer Menu (Slider Menu). (Master Page Detail)

Trying to build a Slider menu I´m using this docu coming from official Xamarin.
MasterPageDetail
Quite odd, it´s not working. VS2015 intellense recognized me MasterDetailPage (my class is inheriting from it), but when I´m trying to launch the app, next error appears:
The type or namespace name 'MasterPageDetail' does not exist in the namespace 'Xamarin.Forms' (are you missing an assembly reference?)
What it happens? Do you know of any simply working demo?
I´m using this question as reference, but I´m not getting it works...
Slider
Some answer uses MasterPageDetail, another one implemented the solution in app (class) and I need to do it in a ContentPage
Thanks mates.
EDITED: I´m using Xamarin.Forms and I imported it and I don´t have any class called like this (MasterPageDetail)... Quite odd, it sounds like a stupid thing but I can´t see it.

MasterDetailPage is class from Xamarin.Forms if you have class with the same name then it may be a conflict.
Here are some useful links:
https://developer.xamarin.com/guides/xamarin-forms/user-interface/navigation/master-detail-page/
https://developer.xamarin.com/api/type/Xamarin.Forms.MasterDetailPage/
You can also download my Example from my Github:
https://github.com/15mgm15/XamarinForms-MasterDetailPage-Recipe

There's a simple way to create a MasterDetailPage using XAML, first of all you need to create a page which will contains the MasterDetailPage and a SecondPage which will contains a DetailPage, by doing this, you need to change your hierarchy of this page to MasterDetailPage, and finally load a SecondPage inside of MasterDetailPage.
In your project Create a New Page - MenuPage and change the Page Type ContentPage to MasterDetailPage
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
BackgroundColor="White"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="YourProject.MenuPage">
</MasterDetailPage>
Then go to your MenuPage.cs and change the hierarchy to MasterDetailPage too.
public partial class MenuPage : MasterDetailPage
{
public ChatPage()
{
InitializeComponent();
}
}
Go back to your XAML page - MenuPage and add this :
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="YourProjectName.MenuPage">
<MasterDetailPage.Master>
<ContentPage Title="Menu">
<StackLayout Orientation="Vertical">
<!--Here goes your Menu Items-->
<Button Text="MyFirstButton"/>
<Button Text="MySecondButton"/>
<Button Text="MyThirdButton"/>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<local:SecondPage/>
</MasterDetailPage.Detail>
</MasterDetailPage>
And finally you need to add a reference to your DetailPage
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="YourProjectName.MenuPage"
<!-- Add this line to refer your DetailPage, `SecondPage`-->
<!-- put your namespace and repeat in assembly -->
xmlns:local="clr-namespace:YourProjectName;assembly=YourProjectName">
</MasterDetailPage>
I hope its helps you!

I got it.
Finally I clean all project and started a code from zero using the next example (adding just MasterPageItem.cs, piece of cake):
Working MasterDetailDemo
I improved the demo by my own, creating a Master Page Detail where Master´s items bind specific generic page, it will be fill with its own attributes whose depends of id passed to the page´s constructor.
Github Slider Menu improved demo
Hoping it helps...