Situation:
Building an application using Xamarin Forms and MasterDetail component.
Question:
How Can I render a specific page on Android based on a PageRender? and keep the Drawer?
Edit
public class MasterBacASable : MasterDetailPage
{
public MasterBacASable ()
{
Icon = null;
Title = "The title";
Detail = (new FirstPage ());
Master = new AppMenuPage ();
}
}
[assembly:ExportRenderer (typeof(BacASable.FirstPage), typeof(BacASable.Droid.FirstPageContentRennderer))]
namespace BacASable.Droid
{
public class FirstPageContentRennderer : PageRenderer
{
public FirstPageContentRennderer ()
{
}
protected override void OnElementChanged (ElementChangedEventArgs<Page> e)
{
base.OnElementChanged (e);
var activity = this.Context as Activity;
var v = activity.LayoutInflater.Inflate (Resource.Layout.AndroidView,this,false);
AddView (v);
}
}
}
Follow this for Xamarin.Forms Master-Detail Documentation
The base Concept is the following
public class MainPageCS : MasterDetailPage
{
MasterPageCS masterPage;
public MainPageCS ()
{
masterPage = new MasterPageCS ();
Master = masterPage;
Detail = new NavigationPage (new ContactsPageCS ());
...
}
}
Your Master is your drawer and Detail the Page (ContentPage, TabbedPage,NavigationPage,CustomPageRenderer ).
So each time you want to display a different page set the Detail property
Detail = new MyContentPage();
I was just forgetting to override the OnLayout in the Renderer.
Thank you all.
Related
I need to display DisplayAlert from the View Model, however its simply doesn't display. Is there some other way how to display alert from the VM? The permission is true so that works.
private async Task TakePicture()
{
await Permission();
var imageSource = Application.Current.MainPage.DisplayActionSheet(AppResources.AlertNewPhoto, AppResources.AlertNewPhoto, AppResources.AlertGallery);
if (imageSource.Result == AppResources.AlertNewPhoto)
}
You can change your constructor of ViewModel like following code.
public PersonsViewModel(ContentPage page){
page.DisplayAlert("info","test","Ok");
}
In your Layout background code, you can use it following code.
public partial class MainPage : ContentPage
{
PersonsViewModel personsViewModel;
public MainPage()
{
InitializeComponent();
personsViewModel = new PersonsViewModel(this);
this.BindingContext = personsViewModel;
}
If you can use plugin, you can use ACR.UserDialogs. https://github.com/aritchie/userdialogs
I solved this problem using events
public MainPageVewModel()
{
Application.Current.MainPage.Loaded += LoadCards;
}
private async void LoadCards(object sender, EventArgs e)
{
// your code on View Loaded
await Application.Current.MainPage.DisplayAlert("working alert", "alert", "ok");
}
I would like to extend all the contentpages in my xamarin.forms app with a native view in UWP. I can basically go to each and every page and embed a native view but i dont want this. I want to know if there is a way to do it using a pagerenderer. I tried doing like below.
my idea was to get current page rendering and extend the content with native view and stacklayout and define app.content again with this change. It works in general. If you run the small test project below, you can see that native UWP FontIcons are displayed for each page but there is a problem, if i navigate same page 2 times in MasterDetail in the attached project, page becomes blank. Why is this happening?
and is the approach below best for my case? I am open for alternative solutions.
[assembly: ExportRenderer(typeof(ContentPage), typeof(App3.UWP.ContentPageRenderer))]
namespace App3.UWP
{
public class ContentPageRenderer : PageRenderer
{
bool isDisposing = false;
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Page> e)
{
base.OnElementChanged(e);
if (isDisposing)
return;
if (e.OldElement != null || Element == null)
{
return;
}
ContentPage page = ((ContentPage)Element);
if (page.Content == null)
return;
var XboxControls = new MyUserControl1();
StackLayout stackLayout = new StackLayout() { Orientation = StackOrientation.Vertical };
stackLayout.Children.Add(page.Content);
stackLayout.Children.Add(XboxControls.ToView());
page.Content = stackLayout;
}
protected override Windows.Foundation.Size ArrangeOverride(Windows.Foundation.Size finalSize)
{
return base.ArrangeOverride(finalSize);
}
protected override void Dispose(bool disposing)
{
isDisposing = disposing;
base.Dispose(disposing);
}
}
Test Project
So ive been working on an app that uses a MasterDetail page and its going fine but Im just a little bit confused on how its suppose to navigate through pages.
At the moment i have the menu items opening some pages in the app and that parts working great, the side menu stays. The thing im confused with is how to handle having buttons on the main page being displayed. My buttons at the moment just open up a new page but the side menu of the MasterDetail page just disappears into the regular NavigationPage.
I will give my button code below.
btnSocial.GestureRecognizers.Add(new TapGestureRecognizer
{
Command = new Command(() =>
{
Navigation.PushAsync(new SocialPage());
})
});
Is this just how a MasterDetail page navigates or do you think im doing something wrong?
** EDITED **
Just incase this helps, i will attach my menuopage and launchpage code:
MenuPage.cs
public class MenuPage : ContentPage
{
public Action<ContentPage> OnMenuSelect { get; set; }
public MenuPage()
{
Title = "Menu";
Icon = "ic_menu.png";
BackgroundColor = ProjectVariables.PRIMARY_COLOR;
var items = new List<MenuItems>()
{
new MenuItems("Social", () => new SocialPage()),
new MenuItems("Career", () => null),
new MenuItems("MySchedule", () => null),
new MenuItems("Videos", () => null),
new MenuItems("Contact", () => null),
new MenuItems("Sign in", () => null)
};
var dataTemplate = new DataTemplate(typeof(TextCell));
dataTemplate.SetValue(TextCell.TextColorProperty, Color.White);
dataTemplate.SetBinding(TextCell.TextProperty, "Name");
var listview = new ListView()
{
ItemsSource = items,
ItemTemplate = dataTemplate
};
listview.BackgroundColor = ProjectVariables.PRIMARY_COLOR;
listview.ItemSelected += (object sender, SelectedItemChangedEventArgs e) =>
{
if(OnMenuSelect != null)
{
var item = (MenuItems)e.SelectedItem;
var itemPage = item.PageFn();
OnMenuSelect(itemPage);
}
};
Content = new StackLayout
{
Orientation = StackOrientation.Vertical,
Children =
{
listview
}
};
}
}
LaunchPage.cs
public class LaunchPage : MasterDetailPage
{
public LaunchPage()
{
var menuPage = new MenuPage();
menuPage.OnMenuSelect = (categoryPage) =>
{
Detail = new NavigationPage(categoryPage);
//Detail.Navigation.PushAsync(categoryPage);
IsPresented = false;
};
Master = menuPage;
Detail = new NavigationPage(new MainPage())
{
BarTextColor = Color.White,
BarBackgroundColor = ProjectVariables.PRIMARY_COLOR
};
MasterBehavior = MasterBehavior.Split;
}
}
Have a look at this documentation page from Xamarin.
It looks like you do not use the navigation service for this. You need a reference to your master page and set the Detail property for it.
Look at this section in particular.
public partial class MainPage : MasterDetailPage
{
public MainPage ()
{
...
masterPage.ListView.ItemSelected += OnItemSelected;
}
void OnItemSelected (object sender, SelectedItemChangedEventArgs e)
{
var item = e.SelectedItem as MasterPageItem;
if (item != null) {
Detail = new NavigationPage ((Page)Activator.CreateInstance (item.TargetType));
masterPage.ListView.SelectedItem = null;
IsPresented = false;
}
}
}
On the selection of a ListView item they set the Detail property and it will do the navigation for you.
I am working in xamarin.forms. I am creaing an android application. In my application I have to use menu. So I took Master detail page to show the menus. And its working fine.
But my problem is before showing the Master detail page, I have to open a content page which doesn't contain the menus. So I took a content page and set it. But when I am running the application after content page, Master detail page is not appearing. The code is running successfully but the Master page is not appearing.
Can any one tell me how I can show the Master detail page after showing simple content page?
The answer will depend on if you want to maintain the navigation stack or not. If you want to add the new page to the current Navigation Stack then you need to so something like this in the Content Page:
((NavigationPage)Parent).PushAsync(newPage);
If you want to make the new page the root of the Navigation Stack then you need to do something like this:
((App) Parent).MainPage = newPage;
If this doesn't work, post your code.
Giving you a trick ! suppose you have a login page ,after authentication you will go to RootPage which is a masterDetailPage .
Take a hint from from below code
namespace LoginNavigation
{
public class App : Application, IloginInterface
{
public static App current;
public static bool IsUserLoggedIn { get; set; }
public static double ScreenWidth;
public static double ScreenHeight;
public App () {
current = this;
MainPage = new LoginPageWithStack ();
}
public void Logout() {
MainPage = new LoginPageWithStack ();
}
public void ShowMainPage() {
MainPage = new RootPage ();
}
}
}
rootPage:
namespace LoginNavigation
{
public class RootPage:MasterDetailPage
{
MenuPage menuPage;
public RootPage () {
ToolbarItems.Add(new ToolbarItem("Filter", "ring.png", async () => {
var page = new ContentPage();
var result = await page.DisplayAlert("Title", "Message", "Accept", "Cancel");
Debug.WriteLine("success: {0}", result);
}));
menuPage = new MenuPage ();
menuPage.Menu.ItemSelected += (sender, e) => NavigateTo (e.SelectedItem as MenuItemForMaster);
//Master = new MasterMenu();
Master = menuPage;
Detail = new NavigationPage (new TimeSheet()){
BarBackgroundColor = Color.FromHex("008dce"),BackgroundColor = Color.FromHex("008dce")
};
}
void NavigateTo (MenuItemForMaster menu) {
if (menu == null)
return;
Page displayPage = (Page)Activator.CreateInstance (menu.TargetType);
//Detail = displayPage;
Detail = new NavigationPage (displayPage) { BarBackgroundColor = Color.FromHex("008dce"),BackgroundColor = Color.FromHex("008dce")};
menuPage.Menu.SelectedItem = null;
IsPresented = false;
}
}
}
So the trick is ,get the current instance of App class and manipulate Mainpage property of it .
From the examples at Xamarin.com you can build basic M.T. Dialog apps, but how do you build a real life application?
Do you:
1) Create a single DialogViewController and tree every view/RootElement from there or,
2) Create a DialogViewController for every view and use the UINavigationController and push it on as needed?
Depending on your answer, the better response is how? I've built the example task app, so I understand adding elements to a table, click it to go to the 'next' view for editing, but how to click for non-editing? How to click a button, go next view if answer is number 1?
Revised:
There is probably no one right answer, but what I've come up with seems to work for us. Number 2 from above is what was chosen, below is an example of the code as it currently exists. What we did was create a navigation controller in AppDelegate and give access to it throughout the whole application like this:
public partial class AppDelegate : UIApplicationDelegate
{
public UIWindow window { get; private set; }
//< There's a Window property/field which we chose not to bother with
public static AppDelegate Current { get; private set; }
public UINavigationController NavController { get; private set; }
public override bool FinishedLaunching (UIApplication app, NSDictionary options)
{
Current = this;
window = new UIWindow (UIScreen.MainScreen.Bounds);
NavController = new UINavigationController();
// See About Controller below
DialogViewController about = new AboutController();
NavController.PushViewController(about, true);
window.RootViewController = NavController;
window.MakeKeyAndVisible ();
return true;
}
}
Then every Dialog has a structure like this:
public class AboutController : DialogViewController
{
public delegate void D(AboutController dvc);
public event D ViewLoaded = delegate { };
static About about;
public AboutController()
: base(about = new About())
{
Autorotate = true;
about.SetDialogViewController(this);
}
public override void LoadView()
{
base.LoadView();
ViewLoaded(this);
}
}
public class About : RootElement
{
static AboutModel about = AboutVM.About;
public About()
: base(about.Title)
{
string[] message = about.Text.Split(...);
Add(new Section(){
new AboutMessage(message[0]),
new About_Image(about),
new AboutMessage(message[1]),
});
}
internal void SetDialogViewController(AboutController dvc)
{
var next = new UIBarButtonItem(UIBarButtonSystemItem.Play);
dvc.NavigationItem.RightBarButtonItem = next;
dvc.ViewLoaded += new AboutController.D(dvc_ViewLoaded);
next.Clicked += new System.EventHandler(next_Clicked);
}
void next_Clicked(object sender, System.EventArgs e)
{
// Load next controller
AppDelegate.Current.NavController.PushViewController(new IssuesController(), true);
}
void dvc_ViewLoaded(AboutController dvc)
{
// Swipe location: https://gist.github.com/2884348
dvc.View.Swipe(UISwipeGestureRecognizerDirection.Left).Event +=
delegate { next_Clicked(null, null); };
}
}
Create a sub-class of elements as needed:
public class About_Image : Element, IElementSizing
{
static NSString skey = new NSString("About_Image");
AboutModel about;
UIImage image;
public About_Image(AboutModel about)
: base(string.Empty)
{
this.about = about;
FileInfo imageFile = App.LibraryFile(about.Image ?? "filler.png");
if (imageFile.Exists)
{
float size = 240;
image = UIImage.FromFile(imageFile.FullName);
var resizer = new ImageResizer(image);
resizer.Resize(size, size);
image = resizer.ModifiedImage;
}
}
public override UITableViewCell GetCell(UITableView tv)
{
var cell = tv.DequeueReusableCell(skey);
if (cell == null)
{
cell = new UITableViewCell(UITableViewCellStyle.Default, skey)
{
SelectionStyle = UITableViewCellSelectionStyle.None,
Accessory = UITableViewCellAccessory.None,
};
}
if (null != image)
{
cell.ImageView.ContentMode = UIViewContentMode.Center;
cell.ImageView.Image = image;
}
return cell;
}
public float GetHeight(UITableView tableView, NSIndexPath indexPath)
{
float height = 100;
if (null != image)
height = image.Size.Height;
return height;
}
public override void Selected(DialogViewController dvc, UITableView tableView, NSIndexPath indexPath)
{
//base.Selected(dvc, tableView, path);
tableView.DeselectRow(indexPath, true);
}
}
#miquel
The current idea of a workflow is an app that starts with a jpg of the Default.png that fades into the first view, with a flow control button(s) that would move to the main app. This view, which I had working previous to M.T.D. (MonoTouch.Dialog), which is a table of text rows with an image. When each row is clicked, it moves to another view that has the row/text in more detail.
The app also supports in-app-purchasing, so if the client wishes to purchase more of the product, then switch to another view to transact the purchase(s). This part was the main reason for switching to M.T.D., as I thought M.T.D. would be perfect for it.
Lastly there would be a settings view to re-enable purchases, etc.
PS How does one know when the app is un-minimized? We would like to show the fade in image again.
I have been asking myself the same questions. I've used the Funq Dependency Injection framework and I create a new DialogViewController for each view. It's effectively the same approach I've used previously developing ASP.NET MVC applications and means I can keep the controller logic nicely separated. I subclass DialogViewController for each view which allows me to pass in to the controller any application data required for that particular controller. I'm not sure if this is the recommended approach but so far it's working for me.
I too have looked at the TweetStation application and I find it a useful reference but the associated documentation specifically says that it isn't trying to be an example of how to structure a MonoTouch application.
I use option 2 that you stated as well, it works pretty nicely as you're able to edit the toolbar options on a per-root-view basis and such.
Option 2 is more feasible, as it also gives you more control on each DialogViewController. It can also helps if you want to conditionally load the view.