Xamarin forms TabbedPage Navigation between children - c#

I am creating TabbedPage navigation in my project and I have button in page 1, when you click the button it must be go to page 2. It will slide on page 2 of the tabbedpage.
This is how i design my TabbedPage XAML
<TabbedPage
android:TabbedPage.IsSmoothScrollEnabled="True" >
<local:Home Title="Home"/>
<local:MapsLocation Title="Map"/>
<local:FeedbackPage Title="Feedback"/>
<local:Profile Title="Profile"/>
</TabbedPage>
This is my code in my code in button command
public ICommand GotoCommand { get; }
private async void GotoExecute(object sender)
{
var MyObject = (Shop)sender;
await Navigation.PushAsync(new MapsLocation(MyObject.Address));
}
Page 1 when you click the button, It should be slide into the Page 2
Page 2, it should go here when you click the button in the page 1
It should be sliding into child 2 of TabbedPage
How do i achieve this?

If you want to slide to other Tabbedpage, you can use the code below to achieve it. Note that the index of the tab.Children[index] starts from 0 and it should < the count of child tabbedpage or it'll throw the error Index was out of range.
private void Button_Clicked(object sender, EventArgs e)
{
    var tab = this.Parent as TabbedPage;
    tab.CurrentPage = tab.Children[1];
}

Related

iOS "More" Tab remember last open page issue (xamarin)

I have an issue that on iOS "More" Tab behave strangely.
Using TabBar and TabbedPages.
When I start the app, I see 4 tabs (1-4) and "More" tab (Which is created automatically by xamarin.forms).
I open the "More" tab to see a list of rest tabs that don't fit. I will see my list "TabPage5" and "TabPage6". (diagram bellow)
I choose for example TabPage5. After that, I will visit one of the tabs which are on the main bar (tabPage1-4).
And when I try to open the "More" tab again to see a list of TabPage5 and TabPage6 -> I am already on the detail of TabPage5 (as last opened from More tab).
It seems that it remembers which I visited last time or I didn't leave that page from the More tab properly.
Tabs bar:
TabPage1
TabPage2
TabPage3
TabPage4
More
TabPage5
TabPage6
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/tabbed-page
Can anyone give me some advice about that. I would like always when I click on tab "More" to see list of tabs which were not default visible.
Thanks
Create a custom renderer of TabbedPage and call PopToRootViewController when you select tabs in "More" tab:
[assembly: ExportRenderer(typeof(TabbedPage), typeof(MainPageRenderer))]
namespace TabbedPageWithNavigationPage.iOS
{
public class MainPageRenderer : TabbedRenderer
{
MainPage _page;
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
_page = e.NewElement as MainPage;
else
_page = e.OldElement as MainPage;
try
{
if (ViewController is UITabBarController tabBarController)
tabBarController.ViewControllerSelected += OnTabbarControllerItemSelected;
}
catch (Exception exception)
{
Debug.WriteLine(exception);
}
}
void OnTabbarControllerItemSelected(object sender, UITabBarSelectionEventArgs eventArgs)
{
Debug.WriteLine("Tab Tapped");
var tabbarVC = ViewController as UITabBarController;
var tabIndex = tabbarVC.SelectedIndex;
if (tabIndex == null || tabIndex > 3)
{
tabbarVC.MoreNavigationController.PopToRootViewController(false);
}
}
}
}

Changing a color of a icon from an action on an other page

I am a beginner on C#, I am coding an UWP app on Visual Studio, mostly for Windows 10 platforms.
Here's my problem:
I have a navigation view on the main page, which lists a few subjects.
Clicking on one of them brings you to a page (Page1) where I have radio buttons, that changes the color of the title of this Page1.
I would like to have this color applied to the subject on the main page
Can't figure out how to do...
Any tips?
Thanks!
You can access the NavigationView in MainPage.xaml.cs by creating a static instance of MainPage and change the color.
Here is the solution:
MainPage.xaml
<NavigationView x:Name="nvSample"
x:FieldModifier="Public">
...
</NavigationView>
MainPage.xaml.cs
public static MainPage Current;
public MainPage()
{
this.InitializeComponent();
Current = this;
}
Page1.xaml.cs
private void RadioButton_Checked(object sender, RoutedEventArgs e)
{
var nav = MainPage.Current.nvSample;
nav.Foreground = new SolidColorBrush(Colors.Yellow);
}
Best regards.
Thank you very much Richard, I made it :)
The Page1.xaml.cs code changed all the texts foreground in my page though, so I used this:
private void RadioButton_Checked(object sender, RoutedEventArgs e)
{
RadioButton radio = (RadioButton)sender;
{}
if (radio != null)
{
String selected = radio.Tag.ToString();
switch (selected)
{
default:
case "Red":
Title.Foreground = new SolidColorBrush(Colors.Red);
MainPage.Current.Subject1.Foreground = new SolidColorBrush(Colors.Red);
break;`
Thank you again.
Now next mission for me, saving those colors after the application is closed so they stay the same when the app is lunched. If you have any advices... :)

How to disable Master page in MasterDetailPage of Xamarin Forms

I am working with Xamarin forms and I need to disable the Master page that I use as context menu depending on whether user is logged in or not. I have both Master and Detail pages as separate XAML pages.
<MasterDetailPage.Master>
<view:MenuPage/>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<view:MainViewPage
x:Name="MainView"/>
</MasterDetailPage.Detail>
As you might have guessed, I am trying to incorporate MVVM here, so I tried binding visibility (IsVisible) and enabled (IsEnabled) properties of the Master page, however, I still get the undesired black fade effect when pushing navigation button to access my menu. Instead, I need to completely eat up the button press action.
Should your pages be visible whenever the user is connected or not ?
Or do you have a login page at the start of the application for example ?
If you don't have pages that are visible by both connected users or not, you could implement the login page or another page by defining it as ContentPage. It will take all the screen space and hide the navigationBar.
Then after user connect you call a page as MasterDetailPage and then you will have your navigationBar, ...
Don't know if that's what you're looking for but i hope i was able to help you.
This can be achieved with a custom NavigationRenderer, by overriding the Click event of the drawer icon with your custom logic.
[assembly: ExportRenderer(typeof(NavigationPage), typeof(CustomNavigationPageRenderer))]
namespace RTW.Mobile.App.Droid.Renderers
{
public class CustomNavigationPageRenderer : NavigationPageRenderer, IMessageSender
{
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);
for (var i = 0; i < toolbar.ChildCount; i++)
{
var imageButton = toolbar.GetChildAt(i) as ImageButton;
var drawerArrow = imageButton?.Drawable as DrawerArrowDrawable;
if (drawerArrow == null)
continue;
//ensure only one handler is registered
imageButton.Click -= imageButton_Click;
imageButton.Click += imageButton_Click;
}
}
private void imageButton_Click(object sender, EventArgs e)
{
if (!App.IsBlockingConditionTrue)
{
MessagingCenter.Send<IMessageSender>(this, "ToggleMasterIsPresented");
}
}
}
}
Then just subscribe to the message with
MessagingCenter.Subscribe<IMessageSender>(this, "ToggleMasterIsPresented", OnToggleMasterIsPresented);
and handle it.
private void OnToggleMasterIsPresented(IMessageSender obj)
{
_masterDetailPage.IsPresented = !_masterDetailPage.IsPresented;
}

Winform menustrip and hiding tabs

Hello I'm thinking of creating a tabcontrol which the tabpages will be filtered by the clicks in the menustrip.
For ex.
My menustrip is in form 1
and my tabcontrol is in form 2
My tabcontrol consist of 7 tabs and I want only 1 tab will be shown at a time.
for example If I click the name in the menustrip it will open/show a new form and the tabcontrol will only show the names tab.
I wonder if its possible because making diff forms for each list seems to be very long.
thanks for reading this.
Problem is, the TabPage control has no Visible property (well, it has, but it does nothing). So you can't hide and show tabs at will. You'll have to remove the tabs that should not be visible.
You could make a form (named TabbedForm) with code like this:
private readonly int _index;
public TabbedForm(int index)
{
this._index = index;
InitializeComponent();
}
private void form_Load(object sender, EventArgs e)
{
for (int index = this.tabControl1.TabPages.Count - 1; index >= 0; index--)
{
if (index != this._index)
this.tabControl1.TabPages.Remove(this.tabControl1.TabPages[index]);
}
}
With each menu button (Clicked event) in your main form you can open a TabbedForm with a different index.
Yes, this will work pretty fine. But I think, you must use the default tab view control for this and that must not create the problem either in you case too.

WPF user controls

I am new to WPF, my problem is that I have a top menu as UserControl added in the main window and the main window is split into three columns: in the right most column I have a DockPanel, now my problem is that I don't know how to add another control in that right column when I click on the top menu item.
Some code, to illustrate my attempt:
public partial class TopMenu : UserControl
{
private void menuItem_Click(object sender, RoutedEventArgs e)
{
SecondControl ctrl = new SecondControl();
Window1 winMain = new Window1();
winMain.dp3.Children.Add(ctrl ); // dp3 is the dock panel in the right column of
}
}
Now, what should I do to display that control on window1?
The problem is that you're adding the control to the DockPanel of a new instance of a Window1 window. You will need to 'find' the instance of the Window1 type in which the your TopMenu control is embedded.
Using the code from here we can find the top-level control, your window, and then add the controls to that instance:
private void menuItem_Click(object sender, RoutedEventArgs e)
{
var topLevelControl = GetTopLevelControl(this);
if (topLevelControl != null && topLevelControl is Window1)
{
var currentWindow = topLevelControl as Window1;
SecondControl ctrl = new SecondControl();
currentWindow.dp3.Children.Add(ctrl );
}
}
DependencyObject GetTopLevelControl(DependencyObject control)
{
DependencyObject tmp = control;
DependencyObject parent = null;
while((tmp = VisualTreeHelper.GetParent(tmp)) != null)
{
parent = tmp;
}
return parent;
}
Because you are new to WPF I recommend that you invest some time learning MVVM, binding, INotifyPropertyChanged interface etc.
Good resources are:
NYC DevReady: MVVM - Session 1 (of 5) - Demystifying XAML
NYC DevReady: MVVM - Session 2 (of 5) - Programming with MVVM - Part 1
NYC DevReady: MVVM - Session 3 (of 5) - Programming with MVVM - Part 2
You could solve your problem in multiple ways. For example, you could put ContentControl to the right column where you want to show your SecondControl. Now, when you want to show your SecondControl just fill Content property of the ContentControl with the SecondControl

Categories

Resources