Xamarin forms - Remove burger menu icon but keep nav bar - c#

I'm wanting to remove the burger menu icon whilst retaining the navigation bar. I want to add content to the NavigationPage.TitleView property and i would like it to take the full width of the page. In the image i've attached, the yellow background colour shows the width that the TitleView is currently occupying.
I know in forms you can control the visibility of the back button, is there a way you can also control the burger menu icon? Based on what i've been reading, this will most likely require a custom renderer, which i've tried with no luck. I need to support iOS & Android.

In the android, you can use following custom renderer code.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Support.V7.Graphics.Drawable;
using Android.Views;
using Android.Widget;
using MesterDetailspage.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android.AppCompat;
[assembly: ExportRenderer(typeof(MasterDetailPage), typeof(MyMasterDetailRenderer))]
namespace MesterDetailspage.Droid
{
public class MyMasterDetailRenderer : MasterDetailPageRenderer
{
public MyMasterDetailRenderer(Context context) : base(context)
{
}
protected override void OnLayout(bool changed, int l, int t, int r, int b)
{
base.OnLayout(changed, l, t, r, b);
var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
if (toolbar != null)
{
for (var i = 0; i < toolbar.ChildCount; i++)
{
var imageButton = toolbar.GetChildAt(i) as Android.Widget.ImageButton;
var drawerArrow = imageButton?.Drawable as DrawerArrowDrawable;
if (drawerArrow == null)
continue;
bool displayBack = false;
var app = Xamarin.Forms.Application.Current;
var detailPage = (app.MainPage as MasterDetailPage).Detail;
var navPageLevel = detailPage.Navigation.NavigationStack.Count;
if (navPageLevel > 1)
displayBack = true;
if (!displayBack)
ChangeIcon(imageButton, Resource.Drawable.test1);
if (displayBack) ;
//ChangeIcon(imageButton, Resource.Drawable.back1);
}
}
}
private void ChangeIcon(Android.Widget.ImageButton imageButton, int id)
{
if (Android.OS.Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.Lollipop)
imageButton.SetImageDrawable(Context.GetDrawable(id));
imageButton.SetImageResource(id);
}
}
}
I set a transparent background image.
Here is running screenshot.
For iOS, just set the IconImageSource="test1.png" in MasterDetailPage tag in xamarin forms xaml.
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
IconImageSource="test1.png"
xmlns:views="clr-namespace:MesterDetailspage.Views"
x:Class="MesterDetailspage.Views.MainPage">

As it turns out, at the moment, this is not possible. You can hide the burger menu but it still takes up space (see Leon Lu's answer).
My solution was to create a custom navigation bar, that way i have full control. If you want to do this first remove the navigation bar:
NavigationPage.SetHasNavigationBar(this, false);
Then add your custom nav using regular xaml code, just like you would with any other component.
One to thing to keep in mind is that in ios your nav can show where the notch is, to fix this you need to use this code:
On<iOS>().SetUseSafeArea(true);

Related

Can't add multi-colour images to TabbedPage navigation bar in Xamarin Forms

So when I designed the navigation bar for my Android application I made it look like this:
The only problem I have with coding this is that when I add the .png images for each icon into my XAML code on the MainPage.xaml the icons end up looking like this (the icons just turn to into black shapes with no other colours).
Is android only capable of handling single colour icons for Android?
Is there any way to disable this default feature?
I know that the android style guidelines specify that you shouldn't use more than one colour for the icon in your navigation bar but I need to make an exception for this app.
If you want to use the colorful icon in the Tabbedpage, you should create a custom renderer for Tabbedpage
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Support.Design.Widget;
using Android.Views;
using Android.Widget;
using TabbedDemo.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;
[assembly: ExportRenderer(typeof(TabbedPage), typeof(MyTabbedRenderer))]
namespace TabbedDemo.Droid
{
public class MyTabbedRenderer : TabbedPageRenderer
{
public MyTabbedRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
{
base.OnElementChanged(e);
if (e.OldElement == null && e.NewElement != null)
{
for (int i = 0; i <= this.ViewGroup.ChildCount - 1; i++)
{
var childView = this.ViewGroup.GetChildAt(i);
if (childView is ViewGroup viewGroup)
{
for (int j = 0; j <= viewGroup.ChildCount - 1; j++)
{
var childRelativeLayoutView = viewGroup.GetChildAt(j);
if (childRelativeLayoutView is BottomNavigationView)
{
((BottomNavigationView)childRelativeLayoutView).ItemIconTintList = null;
}
}
}
}
}
}
}
}
Here is running screenshot.

How to override button properies in C#(font, height, width, backcolor)

How to Override my controls using C#?
Need to set button property like
Font(Name => Segoe UI, style => Regular, size => 10), height => 50px, width => 250px, back color => green
by default.
How to use override method for respected button properties.
Note: I am going to use windows control library controls, to my projects.
Thanks in advance.
you can make your custom control for overriding with your default properties.
Sample button code for custom button:
using System.ComponentModel;
using System.Drawing;
using System.Windows.Forms;
namespace DemoControls
{
[ToolboxItem(true)]
public class SimpleButton : Button
{
public SimpleButton()
{
Font = new Font("Segoe UI", 10, FontStyle.Regular);
Height = 50;
BackColor = DefaultBackColor;
}
}
}
It will show control in your toolbox when you build your project then you have to use this SimpleButton in your project where you want

Load iOS buttons dynamically with text from database. Xamarin.iOS c#

Dear fellow programmers.
Currently my strings are loaded, and 5 buttons are created with these titles from the database.
Yet the buttons are not visible on the iOS app.
What am I missing.
I am using Xamarin.iOS and c#
Thanks in advance
using Foundation;
using UIKit;
using System.CodeDom.Compiler;
using System.Drawing;
using Ola.ServiceClients;
using System.Threading.Tasks;
using PortableRest;
using Ola.Shared.Models;
using System.Net.Http;
using System.Net.Http.Headers;
namespace Ola.iOS
{
partial class NavigationViewController : UIViewController
{
//private MenuItem[] menuItems;
private MenuItem[] drawerItems;
public string token = "";
public NavigationViewController(IntPtr handle)
: base(handle)
{
}
public override void ViewDidLoad()
{
base.ViewDidLoad();
LoadMenu();
}
public async void LoadMenu()
{
RestResponse<MenuItem[]> response = await NavigationClient.Current.GetMenu(token);
//HttpResponseHeaders responseHeaders = response.HttpResponseMessage.Headers;
//HttpRequestMessage requestMessage = response.HttpResponseMessage.RequestMessage;
if (response != null && response.Content != null && response.Content.Length > 0)
{
//menuItems = response.Content;
for (int i = 0; i < response.Content.Length; i++)
{
UIButton button = UIButton.FromType(UIButtonType.RoundedRect);
button.SetTitle(response.Content[i].Text, UIControlState.Normal);
this.Add(button);
System.Console.WriteLine("Button created");
}
System.Console.WriteLine();
}
}
}
}
Greetings
Dave
Add the following code to show your buttons:
this.View.AddSubview(button);
instead of:
this.Add(button);
Make sure you are setting button.Frame property, adding button to parent View and also you should try to set background color as by default its transparent.EditI'm not sure if that will make any difference but try to create buttons differently e.i var button = new UIButton(new RectangleF());And one more thing I'm thinking of may be transparency, make sure that parent View and buttons do not have alpha set to 0Edit 2One more thing ! Try wrap call where you adding buttons to view by calling it in InvokeOnMainThread(() =>
{
this.View.AddSubview(button);
});
method !

How can i create a dll of a User Control in a win forms project?

I have this user control i created in my project.
When i compile the project i see the project dll.
But how can i make that when i compile the project it will create also a dll of the User Control so later on other project i will be able to add this User Control dll to my tool box ?
/*----------------------------------------------------------------
* Module Name : ListBoxControl
* Description : Change listBox items color
* Author : Danny
* Date : 30/12/2012
* Revision : 1.00
* --------------------------------------------------------------*/
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Linq;
using System.Text;
using System.Windows.Forms;
/*
* Introduction :
*
* By default the color is red.
* Added a property to change the color.
* Right mouse click on item to change item color.
* Left mouse click on item to change the item color back.
* */
namespace ListBoxControl
{
public partial class ListBoxControl : UserControl
{
Color m_MyListColor;
private List<int> m_itemIndexes = new List<int>();
public ListBoxControl()
{
InitializeComponent();
for (int i = 0; i < 10; i++)
{
listBox1.Items.Add("Test " + i);
}
}
private void listBox1_MouseDown(object sender, MouseEventArgs e)
{
int index = listBox1.IndexFromPoint(e.X, e.Y);
listBox1.SelectedIndex = index;
if (e.Button == System.Windows.Forms.MouseButtons.Right)
{
if (m_itemIndexes.Contains(index))
return;
m_itemIndexes.Add(index);
DrawItem(index);
}
else if (e.Button == MouseButtons.Left)
{
if (!m_itemIndexes.Contains(index))
return;
m_itemIndexes.Remove(index);
DrawItem(index);
}
}
}
}
You will need to create a separate Project of Type Windows Forms Control Library add your UserControls to that. It's output is of Type Class Library. Once you compile it you can add it to your ToolBox by right clicking and selecting Choose Items and browsing to the dll's location.

WP7 silverlight custom control using popup

I'm creating a custom datepicker, I have a textbox, once clicked it opens a calendar within a popup.
What I want to do is change the size of the popup so it shows my whole calendar, but I can't manage to change it..., I've tried using Height, Width, MinHeight, MinWidth... but it doesn't work, the popup keep showing with a fixed size.
The thing is that my popup's parent property isn't evaluated since it has expression issues (according to debugger), so I'm sure my popup's parent isn't the main screen( say layout grid).
How can I for example make my popup open within a specific context ?
This part of my code isn't XAML, it's C# code only and it looks like:
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Controls.Primitives;
namespace CalendarBranch.components
{
public class wpDatePicker:TextBox
{
private CalendarPopup calendar;
private Popup popup;
public wpDatePicker()
{
this.calendar = new CalendarPopup();
this.popup = new Popup();
this.popup.Child = this.calendar;
this.popup.Margin = new Thickness(0);
this.MouseLeftButtonUp += new MouseButtonEventHandler(wpDatePicker_MouseLeftButtonUp);
this.calendar.onDateSelect += new EventHandler(onDateSelected);
this.IsReadOnly = true;
}
protected void wpDatePicker_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
this.popup.Height = this.calendar.Height;
this.popup.Width = this.calendar.Width;
this.popup.HorizontalAlignment = HorizontalAlignment.Center;
this.popup.VerticalAlignment = VerticalAlignment.Center;
this.popup.HorizontalOffset = 0;
this.popup.VerticalOffset = 0;
this.popup.MinHeight = this.calendar.Height;
this.popup.MinWidth = this.calendar.Width;
this.popup.IsOpen = true;
}
private void onDateSelected(Object sender, EventArgs ea) {
this.Text = this.calendar.SelectedValue.ToShortDateString();
this.popup.IsOpen = false;
}
}
}
PS: the class Calendar is simply a UserControl that contains a grid with multiple columns, HyperLinkButtons and TextBlocks, so nothing special.
Thank you in advance guys ;)
Cheers
Miloud B.
Popup control resizes itself to fit the content inside of it. For example, if you set the child of Popup to be StackPanel with width/height set to 100, the popup will be 100x100.
So it's really important to set the sizes not of your popup, but of your inner panel. Try wrapping your content into the stackpanel and assign necessary width/height there.

Categories

Resources