Hamburger menu with Prism & xamarin forms doet not appear - xamarin.forms

I'm trying to create a hamburger menu but when I launch the app I get an empty page. I'm using Prism to develop this android app and I followed this article: https://dansiegel.net/post/2017/04/01/the-hamburger-menu-with-prism-forms but for me it doesn't work.
MainPage.cs
<?xml version="1.0" encoding="UTF-8"?>
<MasterDetailPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="HomeManagement.Views.MainPage">
<MasterDetailPage.Master>
<!-- Hamburger Menu Secret Sauce... Add an Icon!!!! Make sure it's in your resources for your Platform Project -->
<NavigationPage Title="Required Foo" Icon="ic_launcher.png">
<x:Arguments>
<ContentPage Title="Menu">
<StackLayout Padding="40">
<Label Text="Test hello" />
<Button Text="HuePage"/>
</StackLayout>
</ContentPage>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Master>
</MasterDetailPage>
MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace HomeManagement.Views
{
public partial class MainPage : MasterDetailPage
{
public MainPage()
{
InitializeComponent();
}
}
}
MainPageViewModel
using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace HomeManagement.ViewModels
{
public class MainPageViewModel : ViewModelBase
{
public string UserName { get; set; }
public MainPageViewModel(INavigationService navigationService)
: base(navigationService)
{
Title = "Main hamburger";
}
}
}
Anyone a clue what is going on? I'm using Prism version 7.2.
Thanks in advance

From what I see you are assigning a MasterPage but you do not seem to be assigning a detail page which is, in turn, leaving your screen empty! Try assigning a detail page to it
MainPage mainPage = new MainPage();
mainPage.Detail= new DetailPage();
Or From XAML
<MasterDetailPage.Detail>
<ContentPage Title="Detail">
<StackLayout Padding="40">
<Label Text="Test hello" />
<Button Text="HuePage"/>
</StackLayout>
</ContentPage>
</MasterDetailPage.Detail>

Related

Dynamic CollectionView with FreshMvvm Xamarin.Forms

Is there a way to generate dynamic layouts in collectionview?
I'm familiar with DataTemplateSelector https://www.xamarinhelp.com/xamarin-forms-datatemplateselector/
and I'm familiar with FreshMvvm content by convention.
Can I add objects to an observable collection and have FreshMvvm resolve the content page?
<?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="trycollections.Pages.MainPage">
<CollectionView ItemsSource="{Binding MyItems}">
<CollectionView.ItemsLayout>
<GridItemsLayout Span="1" Orientation="Vertical" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<ContentPresenter Content="{Binding .}"></ContentPresenter>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ContentPage>
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Text;
namespace trycollections.ViewModels
{
public class MainViewModel : FreshMvvm.FreshBasePageModel
{
public ObservableCollection<object> MyItems { get; set; } =
new ObservableCollection<object>
{
new ItemOneViewModel(),
new ItemTwoViewModel(),
new ItemOneViewModel(),
new ItemOneViewModel(),
new ItemOneViewModel(),
};
}
public class ItemOneViewModel : FreshMvvm.FreshBasePageModel
{
public string ThisIsOneText { get; set; } = $"Hello world from {nameof(ItemOneViewModel)}";
}
public class ItemTwoViewModel : FreshMvvm.FreshBasePageModel
{
public string ThisIsTwoText { get; set; } = $"Hello world from {nameof(ItemTwoViewModel)}";
}
}

System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invocation?

I getting this erro when I run my application after adding the Xamarin.Forms.Maps NuGet package. I am trying to display a Map in my MapPage. I have hadded name space definitions to my XAML file.
I have and I have added Xamarin.FormsMaps.Init(this, bundle) to the Android project in the MainActivity and to the iOS project using Xamarin.FormsMaps.Init(); in the AppDelegate file.
I searched google and stackoverflow and couldn't find any useful document.
here is the MainPage.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:local="clr-namespace:TravelRecord"
x:Class="TravelRecord.MainPage">
<StackLayout VerticalOptions="Center" Margin="20,0">
<Entry Placeholder="Enter Your Email... " Keyboard="Email" x:Name="emailEntry"
TextColor="{StaticResource blueColor}" Text="Test"/>
<Entry Placeholder="Enter Your Password... " TextColor="{StaticResource blueColor}"
IsPassword="True" x:Name="passwordEntry" Text="Test"/>
<Button Text="Log in" x:Name="LoginButton" Clicked="LoginButton_Clicked" Margin="0,50,0,0"
BackgroundColor="{StaticResource blueColor}" TextColor="White"/>
</StackLayout>
</ContentPage>
and the MainPage.cs file
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace TravelRecord
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
private void LoginButton_Clicked(object sender, EventArgs e)
{
bool emailIsNullOrEmpty = string.IsNullOrEmpty(emailEntry.Text);
bool passwordIsNullOrEmpty = string.IsNullOrEmpty(passwordEntry.Text);
if (emailIsNullOrEmpty || passwordIsNullOrEmpty)
{
}
else
{
Navigation.PushAsync(new HomPage());
}
}
}
}
from which I navigate to the MapsPage using the Login button.
here is the MapsPage.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="TravelRecord.MapPage"
xmlns:maps="clr-namespace:Xamarin.Forms.GoogleMaps;assembly=Xamarin.Forms.GoogleMaps">
<ContentPage.Content>
<maps:Map />
</ContentPage.Content>
</ContentPage>
and the MapsPage.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace TravelRecord
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
private void LoginButton_Clicked(object sender, EventArgs e)
{
bool emailIsNullOrEmpty = string.IsNullOrEmpty(emailEntry.Text);
bool passwordIsNullOrEmpty = string.IsNullOrEmpty(passwordEntry.Text);
if (emailIsNullOrEmpty || passwordIsNullOrEmpty)
{
}
else
{
Navigation.PushAsync(new HomPage());
}
}
}
}
here MainActivity.cs of the android project:
using System;
using Android.App;
using Android.Content.PM;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
using System.IO;
namespace TravelRecord.Droid
{
[Activity(Label = "TravelRecord", Icon = "#mipmap/icon", Theme = "#style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
protected override void OnCreate(Bundle bundle)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
base.OnCreate(bundle);
global::Xamarin.Forms.Forms.Init(this, bundle);
Xamarin.FormsMaps.Init(this, bundle);
string dataBaseName = "travelRecord.db";
var dataBaseBath = System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal);
string fullPath = Path.Combine(dataBaseBath, dataBaseName);
LoadApplication(new App(fullPath));
}
}
}
and the AppDelegate of the iOS project
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Foundation;
using UIKit;
namespace TravelRecord.iOS
{
// The UIApplicationDelegate for the application. This class is responsible for launching the
// User Interface of the application, as well as listening (and optionally responding) to
// application events from iOS.
[Register("AppDelegate")]
public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
{
//
// This method is invoked when the application has loaded and is ready to run. In this
// method you should instantiate the window, load the UI into it and then make the window
// visible.
//
// You have 17 seconds to return from this method, or iOS will terminate your application.
//
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
global::Xamarin.Forms.Forms.Init();
Xamarin.FormsMaps.Init();
string dataBaseName = "travelRecord.db";
var dataBaseBath =Path.Combine( System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal),"..","Library");
string fullPath = Path.Combine(dataBaseBath, dataBaseName);
LoadApplication(new App(fullPath));
return base.FinishedLaunching(app, options);
}
}
}
I have also added this line to the AndroidManifest.xml file
<meta-data android:name="com.google.android.geo.API_KEY" android:value ="AIzaSyBXuv3VQ4-5pxLcbje-397wvmb3y6RoxsE"></meta-data>
Does anyone know how to solve this ? thanks

MasterDetail navigation using prism

I recently started building a Xamarin Forms application using Prism.
I'm not able to navigate with the MasterDetail Navigation. The button I use to navigate seems to not make the binding correctly. I never been able to reach the executed command with a breakpoint when clicking on the button.
Everything except the command binding seems to do the binding correctly, so I really have no idea on what is going on.
I already checked out the GitHub sample made available by the Prism team (HamburgerMenu project). I'm convince to use the exact same configuration as the sample but no way to make it works on my project.
Bellow is the code used currently:
MainPage.xaml
<MasterDetailPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MonkeyVault.Views.MainPage">
<MasterDetailPage.Master>
<NavigationPage Title="Required Foo" Icon="ic_menu.png">
<x:Arguments>
<ContentPage Title="Menu">
<StackLayout Padding="40">
<Label Text="{Binding UserName, StringFormat='Hello, {0}'}"/>
<Button Text="Sites" Command="{Binding NavigateCommand}" CommandParameter="Navigation/Sites" />
</StackLayout>
</ContentPage>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Master>
</MasterDetailPage>
MainPageViewModel.cs
public class MainPageViewModel : BaseViewModel
{
#region Fields
private string _userName;
#endregion
#region Properties
public string UserName
{
get => _userName;
set => SetProperty(ref _userName, value);
}
public DelegateCommand<string> NavigateCommand;
public DelegateCommand NCommand;
#endregion
public MainPageViewModel(INavigationService navigationService)
: base(navigationService)
{
Title = "Main Page";
NavigateCommand = new DelegateCommand<string>(OnNavigateCommandExecuted);
}
private async void OnNavigateCommandExecuted(string path)
{
await _navigationService.NavigateAsync(path);
}
}
If someone has already encountered this problem or has any idea I would be greatful.
You need to create your DelegateCommand as a Property.
public DelegateCommand<string> NavigateCommand { get; set; }
Admittedly I am just guessing here, but I have had problems binding to Fields before and needed to change it to a property to get binding.

Xamarin CarouselPage doesn't work in Window Phone 8.1?

I am trying to make CarouselPage in my Xamarin Project.
<?xml version="1.0" encoding="utf-8" ?>
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ABP.Views.ProcessSurveysPage">
<ContentPage>
<StackLayout>
<Label Text="Red" />
<BoxView Color="Red" VerticalOptions="FillAndExpand" />
</StackLayout>
</ContentPage>
<ContentPage>
<StackLayout>
<Label Text="Green" />
<BoxView Color="Green" VerticalOptions="FillAndExpand" />
</StackLayout>
</ContentPage>
<ContentPage>
<StackLayout>
<Label Text="Blue" />
<BoxView Color="Blue" VerticalOptions="FillAndExpand" />
</StackLayout>
</ContentPage>
</CarouselPage>
Here is xaml.cs file.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace ABP.Views
{
public partial class ProcessSurveysPage : CarouselPage
{
public ProcessSurveysPage()
{
InitializeComponent();
this.Title = "Current Bookings";
}
}
}
This is caller.
private void GotoProcessSurveysPage(object sender, EventArgs args)
{
Device.BeginInvokeOnMainThread(() => Navigation.PushAsync(new ProcessSurveysPage()));
//await this.Navigation.PushAsync(new DateSearchFilterView());
}
I tested on Android, Window 8.
But while I deployed it on my window phone 8.1 and swiped on pages but any action has not happened.
How can I fix this?
What's my wrong?

Xamarin.Forms Prism Master in MasterDetailPage could not be loaded from separate XAML file

i tried to move a the master in MasterDetailPage into separate file. As soon as i do this, the MD Page is not longer loaded.
MasterDetailPage:
<?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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
xmlns:local="clr-namespace:PrismMasterDetailSample.Views;assembly=PrismMasterDetailSample"
x:Class="PrismMasterDetailSample.Views.PMasterDetailPage">
<MasterDetailPage.Master Title="Menu">
<!--<local:MenuPage /> <========== does not work -->
<ContentPage Title="Default">
<StackLayout>
<Button Text="About" Command="{Binding NavigateCommand}" CommandParameter="MyNavigationPage/ViewA?id=A" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<local:PTabbedPage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Codebehind:
using Xamarin.Forms;
namespace PrismMasterDetailSample.Views
{
public partial class PMasterDetailPage : MasterDetailPage
{
public PMasterDetailPage()
{
InitializeComponent();
}
}
}
Here is the MenuPage XAML
"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"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="PrismMasterDetailSample.Views.MenuPage"
Title="Menu">
<StackLayout VerticalOptions="End" HorizontalOptions="Center" Margin="20">
<Button Text="DetailPage1" Command="{Binding NavigateCommand}" HorizontalOptions ="LayoutOptions.Center"/>
</StackLayout>
</ContentPage>
The Code behind:
using Xamarin.Forms;
namespace PrismMasterDetailSample.Views
{
public partial class MenuPage : ContentPage
{
public MenuPage()
{
InitializeComponent();
}
}
}
And the ViewModel:
using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Linq;
namespace PrismMasterDetailSample.ViewModels
{
public class MenuPageViewModel : BindableBase
{
public DelegateCommand NavigateCommand { get; private set; }
private INavigationService _navigationService;
public MenuPageViewModel(INavigationService navigationService)
{
_navigationService = navigationService;
NavigateCommand = new DelegateCommand(Navigate);
}
private void Navigate()
{
_navigationService.NavigateAsync("DetailPage1");
}
}
}
I'm quite sure that is a trivial issue, but i didn't get the point.
Many thanks in advance.
And here is the answer ;-D
Add "Title" to the MenuPage
<?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"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="PrismMasterDetailSample.Views.MenuPage"
Title="Menu">
<StackLayout VerticalOptions="End" HorizontalOptions="Center" Margin="20">
<Button Text="DetailPage1" Command="{Binding NavigateCommand}" HorizontalOptions ="LayoutOptions.Center"/>
</StackLayout>
</ContentPage>

Resources