How to access code behind from Tablet/Phone template? - xaml

Question

I am taking over a project with a DashboardPage and a DashboardPageViewModel that are linked through DI's ViewModelLocator. The Dashboard page have the following code that separates the Xaml/Code behinds into two separate templates.
private void SetContent()
{
Debug.WriteLine("Dashboardpage setContent");
switch(Device.Idiom)
{
case TargetIdiom.Phone:
Content = new PrimaryPhoneLayout
{
RegionContent = RegionContent
};
break;
case TargetIdiom.Tablet:
Content = new PrimaryTabletLayout(deviceDisplay)
{
RegionContent = RegionContent
};
break;
default:
throw new NotSupportedException($"{Device.Idiom} is not a supported idom");
}
}
I want to add a button in both Phone/Tablet xaml and handle the logic within DashboardPage. How can I make a reference to Dashboard page when these XAML files are linked to their individual code behind and not Dashboard Page?
To elaborate further, DashboardPage derives from MenuContainerPage that allows me to slide in/out of my slide menu. I want to handle this logic through a button that I implemented in both Tablet/Phone layout.

Answer 1

This is how I would do it.
I would start by creating an interface with the events I want to expose from my ContentView
For the sample, I will call this interface as IMenuOptionHandler and it would look like this
public interface IMenuOptionHandler
{
event EventHandler OnSlideIn;
event EventHandler OnSlideOut;
}
Here we have two events that will be invoked from our ContentViews. You can add as many as you wish.
Then we need to make our ContentViews to implement this interface:
public partial class PrimaryPhoneLayouts : ContentView, IMenuOptionHandler
{
//...
#region "IMenuOptionHandler implementation"
public event EventHandler OnSlideIn;
public event EventHandler OnSlideOut;
#endregion
void OnSlideInButtonClicked(object sender, EventArgs e)
{
OnSlideIn?.Invoke(this, EventArgs.Empty);
}
void OnSlideOutButtonClicked(object sender, EventArgs e)
{
OnSlideOut?.Invoke(this, EventArgs.Empty);
}
}
public partial class PrimaryTabletLayout : ContentView, IMenuOptionHandler
{
// ...
#region "IMenuOptionHandler implementation"
public event EventHandler OnSlideIn;
public event EventHandler OnSlideOut;
#endregion
void OnSlideInButtonClicked(object sender, EventArgs e)
{
OnSlideIn?.Invoke(this, EventArgs.Empty);
}
void OnSlideOutButtonClicked(object sender, EventArgs e)
{
OnSlideOut?.Invoke(this, EventArgs.Empty);
}
As you can see both classes are implementing our interface.
Also, I added two sets of methods which are the methods that you will hook to the Buttons on the XAML.
Let's imagine that your XAML looks like this:
<ContentView.Content>
<StackLayout Orientation="Vertical"
HorizontalOptions="FillAndExpand">
<Button Text="SlideIn"
VerticalOptions="CenterAndExpand"
HorizontalOptions="FillAndExpand"
Clicked="OnSlideInButtonClicked" />
<Button Text="SlideOut"
VerticalOptions="CenterAndExpand"
HorizontalOptions="FillAndExpand"
Clicked="OnSlideOutButtonClicked" />
</StackLayout>
</ContentView.Content>
Both XAML should have the buttons and the Clicked events wired to our methods in the Code behind classes.
These two methods the only purpose (as of now) is to invoke the events and notify anyone that it's subscribed to them that an event happened.
Now in your DashboardPage
you will add this global property for simplicity
IMenuOptionHandler MenuOptionHandler => Content as IMenuOptionHandler;
This will cast the Content of the Page, whatever it's the value, to IMenuOptionHandler. Any class that implements this interface will allow this cast to happen.
The last part to add on the same DashboardPage is the subscription to the events. These are gonna happen in the OnAppearing method and we will be unsubscribing on the OnDisappearing.
protected override void OnAppearing()
{
base.OnAppearing();
if (MenuOptionHandler != null)
{
MenuOptionHandler.OnSlideIn += MenuOptionHandler_OnSlideIn;
MenuOptionHandler.OnSlideOut += MenuOptionHandler_OnSlideOut;
}
}
protected override void OnDisappearing()
{
base.OnDisappearing();
if (MenuOptionHandler != null)
{
MenuOptionHandler.OnSlideIn -= MenuOptionHandler_OnSlideIn;
MenuOptionHandler.OnSlideOut -= MenuOptionHandler_OnSlideOut;
}
}
void MenuOptionHandler_OnSlideIn(object sender, EventArgs e)
{
//Logic to handle the SlideIn
Debug.WriteLine("MenuOptionHandler_OnSlideIn");
}
void MenuOptionHandler_OnSlideOut(object sender, EventArgs e)
{
//Logic to handle the SlideOut
Debug.WriteLine("MenuOptionHandler_OnSlideOut");
}
Now, whenever one of the Buttons on the ContentView (iPhone or Tablet) is clicked, the Dashboard ContentPage will be notified about this and you will be able to perform any task you wish.
Hope this helps.-

Answer 2

Assume you have a button in Page1, first give a name to the Button in Xaml:
<Button x:Name="btnInPage1" Text="Welcome to Xamarin.Forms!" />
In the code behind of Page1, create a public static property of button, and set the btnPageOne = btnInPage1:
public partial class Page1 : ContentPage
{
public static Button btnPageOne;
public Page1 ()
{
InitializeComponent ();
btnPageOne = btnInPage1;
}
}
Then in your DashboardPage, you can access the button by using Page1.btnPageOne, and handle the logic with:
Page1.btnPageOne.Clicked += delegate {
Console.WriteLine("Page1 btn clicked");
};
The same if you have Page2, Page3...