I'm trying to create a music player in Xamarin Forms. Now at the bottom of my page there always is a bar with the music player controls. Instead of always adding the tag and creating a new PlayerBar in each view, I thought it would be useful to create a RootPage with the PlayerBar created once inside and above it a NavigationPage that spans the rest of the view.
In XAML it would look a bit like this:
<?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:views="clr-namespace:PodBase.Views"
xmlns:controls="clr-namespace:PodBase.Controls"
x:Class="PodBase.Views.RootPage">
<ContentPage.Content>
<Grid>
<NavigationPage>
<x:Arguments>
<views:MainPage/>
</x:Arguments>
</NavigationPage>
<controls:PlayerControl/>
</Grid>
</ContentPage.Content>
</ContentPage>
However when I try it out I get an error saying NavigationPage cannot be added to IGridList. Are there any other options I can use to work this out?
This is not possible. A Page can only be at the root. Inside you can have one VisualElement and within that VisualElement you can nest as many things as you like.
To achieve this kind of behavior, either inherit from the NavigationPage and add the player control at the bottom. Or, you will have to mimic your own navigation page behavior.
Related
I created a TabbedPage which opens the various pages that I created within my project.
<myapp:MainPage Title="Page1" IconImageSource="IC001.png" BackgroundColor="Gainsboro"></myapp:MainPage>
<myapp:DiaryPage Title="Page2" IconImageSource="IC002.png" BackgroundColor="Gainsboro"></myapp:MainPage>
Through this namespace on Android I can see the NavigationBar at the bottom of the screen.
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core" android:TabbedPage.ToolbarPlacement="Bottom"
I would like to be able to place a Custom Button above the NavigationBar, a button that is within my Page Layout and that covers a portion of the NavigationBar. it's possible?
Example of my page:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
x:Class="MotiVApp.DiaryPage">
<Grid>
<Button/>
</Grid>
I want to display very simple Toolbar using xamarin on iOS, but I can't see the toolbar on display.
I use this 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"
x:Class="Test.MainPage">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Example Item"
IconImageSource="https://img.icons8.com/cute-clipart/64/000000/menu.png"
Order="Primary"
Priority="0" />
</ContentPage.ToolbarItems>
</ContentPage>
There are no errors in the code and the display is empty..
What needs to change to see the toolbar ?
Are you putting your page in NavigationPage? By default ContentPage does not have Navigation bar (Toolbar), you must put your page in NavigationPage, after that Navigation bar will show up with its functionality.
have a look at here : Xamarin.Forms Navigation
So I assume you should do something like this
public App ()
{
MainPage = new NavigationPage (new MainPage());
}
I read the Xamarin docs https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/radiobutton and tried to follow the exact syntax given in the doc to include a radiobutton in my project. The code is as follows :
<StackLayout Grid.Column="1" Grid.Row="2">
<widget:RadioButton Text="Cat" />
</StackLayout>
The error I get here is 'invalid type: expected type is 'View', actual type is 'RadioButton' Is there a way to solve this ?
I think what your looking for in Xamarin.Forms is the control <RadioButton../> without the widgetpart.This will create a radiobutton in the native controls for UWP, iOS and Android.
This is the code I use to display radiobuttons.
<?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="TestButton.MainPage">
<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<RadioButton Text="test radio button"/>
</StackLayout>
</ContentPage>
Beware it is experimental and you will need to add the build flag for it.
build flag for experimental XamarinForms controls
If you want to add the experimental flag for the RadioButton, you have to do so in all your projects (iOS, Android and UWP).I've added images to clarify where exactly (they need to be before the Xamarin.Forms.Forms.Init). This is the code to add:
global::Xamarin.Forms.Forms.SetFlags(new string[] { "RadioButton_Experimental" });
Here's where to add the code in the Android project. MainActivity.cs
Here's where to add the code in the iOS project. AppDelegate.cs
Here's where to add the code in the UWP project. App.xaml.cs
I'm using xamarin forms to build android app, and I use navigation page to navigate between pages. I'd like to hide the bar but keep the back button, because I have some else controls to put in the top area. I used HasNavigationBar and HasBackButton for this, but it looks the back button cannot be restored if the bar is hidden. Is there anyway to show the back button?
XAML:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="CH.AdDetailPage"
NavigationPage.HasNavigationBar="True"
NavigationPage.HasBackButton="True"
NavigationPage.BackButtonTitle="Back" Title="AdDetail">
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Ad Detail Pages!" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
When HasNavigationBar=True, and HasBackButton=True:
When HasNavigationBar=True, and HasBackButton=False:
Both above works.
But when HasNavigationBar=False, and HasBackButton=True: it does not work.
Back button is a part of navigation bar. You can not show it without showing the navbar.
your only way is to create your back button and assign command with NavigationService.GoBack ...
I'm practically new to Xamarin.Forms and I'm developing a rather simple cross-platform application. The app displays good enough in Android, but in UWP there is a stupid blank space. The project consists of a TabbedPage with 4 NavigationPages inside it, in order to push and pop pages inside them.
After a little digging into UWP platform specifics, I was able to change the style of my tabs. I've been looking 3 days now for a solution, and it's driving me crazy. The only solution that I have found so far (with the help of Live Visual Tree from VS 2015), is to change the Visibility property to "Collapsed" from a CommandBar (as shown in the 3rd attached photo). But that's not a solution, because it dissapears, only at runtime.
Can anyone help?
Thanks in advance.
Android View, UWP View, Live Visual Tree
EDIT:
My MainPage.xaml code is the following:
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:_TIF_Xamarin;assembly=_TIF_Xamarin"
x:Class="_TIF_Xamarin.MainPage">
<!--4 different tabs, which also are Navigation Pages-->
<NavigationPage Title="Home">
<x:Arguments>
<local:HomePage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Exhibitor">
<x:Arguments>
<local:ExhibitorsPage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Exhibits">
<x:Arguments>
<local:ExhibitsPage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="More">
<x:Arguments>
<local:MorePage />
</x:Arguments>
</NavigationPage>
</TabbedPage>
You need to create a custom TabbedPage and then a UWP renderer for it.
First you create a CustomTabbedPage in the PCL:
public class CustomTabbedPage : TabbedPage { }
In your XAML, use this CustomTabbedPage instead of the TabbedPage. All behavior and UI will stay the same on all platforms.
Now you create a renderer in the UWP project:
[assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedPageRenderer))]
namespace App.UWP
{
public class CustomTabbedPageRenderer : TabbedPageRenderer
{
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
Control.TitleVisibility = Windows.UI.Xaml.Visibility.Collapsed;
}
}
}
We use the FormsPivot.TitleVisibility to hide the Title area.