This question already has answers here:
Adding a shell flyout item header
(2 answers)
Closed last year.
I'm playing with the xamarin shell, I would like to insert a descriptive label as the header of the various items.
as shown in the picture
image description here
this is my base code:
<ShellContent Title="Main"
Icon="main.png">
<_vm:DashboardPage/>
</ShellContent>
<ShellContent Title="Posizioni"
Icon="sec.png">
<_vm:DashboardPage/>
</ShellContent>
<ShellContent Title="Fornitori"
Icon="sec.png">
<_vm:DashboardPage/>
</ShellContent>
<ShellContent Title="Clienti"
Icon="sec.png">
<_vm:DashboardPage/>
</ShellContent>
I think I got lost in the solutions found on the web, but i don't go found solution. thanks
You can use a MenuItem as a header in your shellpage. Such as:
<MenuItem>
<Shell.MenuItemTemplate>
<DataTemplate>
<Label HeightRequest="50" Text="hello" FontSize="40"></Label>
</DataTemplate>
</Shell.MenuItemTemplate>
</MenuItem>
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
<ShellContent Title="About" Icon="icon_about.png" Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
<ShellContent Title="Browse" Icon="icon_feed.png" Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />
</FlyoutItem>
<MenuItem>
<Shell.MenuItemTemplate>
<DataTemplate>
<Label HeightRequest="50" Text="hello" FontSize="40"></Label>
</DataTemplate>
</Shell.MenuItemTemplate>
</MenuItem>
<MenuItem Text="Logout" StyleClass="MenuItemLayoutStyle" Clicked="OnMenuItemClicked">
</MenuItem>
Related
The app I'm making is an app with recipes for meals. The first thing that is displayed to the user after starting the application is the Login page, where the user, after entering his data and clicking the 'LOGIN' button, goes to the home page. On that page there are some defined menus for dishes and what should be a menu, i.e. flyout menu in the upper left corner (as part of navbar) but there is no such thing. The only thing that is displayed is an arrow that takes you back to the Login page. I defined the flyout with elements (appetizer, main course and dessert) in the appshell, and tried to add properties so that the flyout is not visible on the Login page, but only after logging in. For the login page, I manage to make it with the help of the Shell.FlyoutBehavior="Disabled" property, but this same thing with the "Flyout" property for the home page does not work.
AppShell code:
<Shell
x:Class="ReceptiUI.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ReceptiUI"
Shell.FlyoutItemIsVisible="True"
Shell.FlyoutBehavior="Flyout">
<ShellContent
Shell.FlyoutBehavior="Disabled"
Title="Home"
ContentTemplate="{DataTemplate local:Login}"
Route="Login" />
<ShellContent
Shell.FlyoutBehavior="Flyout"
Title="Home"
ContentTemplate="{DataTemplate local:MainPage}"
Route="MainPage"/>
<FlyoutItem Title="Predjelo" Icon="breakfast.png">
<ShellContent ContentTemplate="{DataTemplate local:Breakfast}"/>
</FlyoutItem>
<FlyoutItem Title="Glavno jelo" Icon="food.png">
<ShellContent ContentTemplate="{DataTemplate local:Lunch}"/>
</FlyoutItem>
<FlyoutItem Title="Desert" Icon="dinner.png">
<ShellContent ContentTemplate="{DataTemplate local:Dinner}"/>
</FlyoutItem>
<FlyoutItem Title="Meni" Icon="dinner.png">
<ShellContent ContentTemplate="{DataTemplatelocal:ListaJela}"/>
</FlyoutItem>
I also set these properties
'Shell.FlyoutItemIsVisible="True"'
'Shell.FlyoutBehavior="Flyout"' on the home page, but still no flyout menu.
You can write a FlyoutPage in the home page instead of using the shell flyout in the AppShell.
Here is the code demo:
<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FlyoutPageNavigation"
x:Class="FlyoutPageNavigation.MainPage">
<FlyoutPage.Flyout>
<local:FlyoutMenuPage x:Name="flyoutPage" />
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
<NavigationPage>
<x:Arguments>
<local:ContactsPage />
</x:Arguments>
</NavigationPage>
</FlyoutPage.Detail>
</FlyoutPage>
In the AppShell, you just write a normal navigation to navigate from the Loginpage to the Homepage.
(Posted this question on the Microsoft forum as well)
Similar to How do I add a route query parameter to a ShellContent item in a Xamarin Forms app , but this thread did not help me.
I've recently started a new project and decided to go with Xamarin Forms Shell.
I have a single content page that behaves differently based on the query parameter provided.
There is three tab items that will route to the same content page, each providing a different query parameter.
I can't figure out how to pass this parameter to my content page viewmodel via the AppShell.xaml route.
Please see my sample code below that replicates the requirement.
In ths sample I would like to set the content page label using the query parameter supplied in the xaml route.
Using the code below, I get a null reference exception.
AppShell.xaml:
<FlyoutItem Title="Sample">
<Tab Title="Red">
<ShellContent Route="SamplePage?Parameter=Red" ContentTemplate="{DataTemplate sample:SamplePage}" />
</Tab>
<Tab Title="Blue">
<ShellContent Route="SamplePage?Parameter=Blue" ContentTemplate="{DataTemplate sample:SamplePage}" />
</Tab>
<Tab Title="Green">
<ShellContent Route="SamplePage?Parameter=Green" ContentTemplate="{DataTemplate sample:SamplePage}" />
</Tab>
</FlyoutItem>
SamplePageVM:
[QueryProperty(nameof(Parameter), nameof(Parameter))]
public class SamplePageVM
{
public string Parameter { get; set; }
}
SamplePage.xaml:
<ContentPage.Content>
<Grid>
<Label Text="{Binding Parameter}"/>
</Grid>
</ContentPage.Content>
Any help would be appreciated.
Or alternative ways to approach this.
Thanks a lot.
*Edit
Below is my workaround for now.
AppShell.xaml:
<FlyoutItem Title="Sample">
<Tab Title="Red">
<ShellContent Route="RedRoute" ContentTemplate="{DataTemplate sample:SamplePage}" />
</Tab>
<Tab Title="Blue">
<ShellContent Route="BlueRoute" ContentTemplate="{DataTemplate sample:SamplePage}" />
</Tab>
<Tab Title="Green">
<ShellContent Route="GreenRoute" ContentTemplate="{DataTemplate sample:SamplePage}" />
</Tab>
</FlyoutItem>
AppShell.xaml.cs
protected override void OnNavigating(ShellNavigatingEventArgs args)
{
base.OnNavigating(args);
if (args.Target.Location.OriginalString.ToLower().Contains("redroute"))
{
StaticHelper.Parameter = "Red";
}
else if (args.Target.Location.OriginalString.ToLower().Contains("blueroute"))
{
StaticHelper.Parameter = "Blue";
}
else if (args.Target.Location.OriginalString.ToLower().Contains("greenroute"))
{
StaticHelper.Parameter = "Green";
}
}
SamplePageVM:
public class SamplePageVM
{
public string Parameter { get; set; }
public SamplePageVM()
{
Parameter = StaticHelper.Parameter;
}
}
SamplePage.xaml:
<ContentPage.Content>
<Grid>
<Label Text="{Binding Parameter}"/>
</Grid>
</ContentPage.Content>
Might not be best practice, but it's something.
I could be able to reproduce this exception. Check the screenshot: https://imgur.com/HNmjewa
System.NullReferenceException: 'Object reference not set to an instance of an object.'
Change the Route like below would fix this exception.
<FlyoutItem Title="Sample">
<Tab Title="Red">
<ShellContent ContentTemplate="{DataTemplate sample:SamplePage}" Route="Red" />
</Tab>
<Tab Title="Blue">
<ShellContent ContentTemplate="{DataTemplate sample:SamplePage}" Route="Blue" />
</Tab>
<Tab Title="Green">
<ShellContent ContentTemplate="{DataTemplate sample:SamplePage}" Route="Green" />
</Tab>
</FlyoutItem>
And if you want to use the query parameters, invoke the GoToAsync method with URI which includes all three components, the structure is: //route/page?queryParameters.
string monkeyName = (e.CurrentSelection.FirstOrDefault() as Animal).Name;
// The following route works because route names are unique in this application.
await Shell.Current.GoToAsync($"routename?Parameter={monkeyName}");
//routename is the string of the Route in xaml or register the code: Routing.RegisterRoute
For more details, you could download the code sample from the link below. https://learn.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-xaminals/
I am using a Shell Flyoutmenu in my Xamarin Forms application. Thing are fine except that my options in the menu are very short and the tray goes very wide and long. Is there a way to change the width and height of the FlyoutMenu? I tried adding a WidthRequest to the shell object itself to adjust the width but it did not seem to make a difference. Here is what my flyout currently looks like.
Here is the AppShell.xaml file contents
<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:UniversalCheckInApp.Views"
x:Class="UniversalCheckInApp.AppShell"
BackgroundColor="#1E1F26"
FlyoutBackgroundColor="#D0E1F9">
<Shell.FlyoutHeader>
<StackLayout BackgroundColor="#1E1F26" Padding="4,4,4,4">
<Label Text="Navigation" TextColor="#D0E1F9" FontAttributes="Bold" HorizontalTextAlignment="Start"
VerticalTextAlignment="Center" FontSize="Large" Margin="4,4,4,4" />
</StackLayout>
</Shell.FlyoutHeader>
<Shell.ItemTemplate>
<DataTemplate>
<StackLayout HorizontalOptions="StartAndExpand" Padding="16,0,4,0" >
<Label Text="{Binding Title}" TextColor="#1E1F26" VerticalOptions="Center"
HorizontalOptions="Start" Margin="0,0,0,0" FontSize="Medium" FontAttributes="Bold"
TextDecorations="Underline"/>
</StackLayout>
</DataTemplate>
</Shell.ItemTemplate>
<FlyoutItem Title="Configuration" >
<ShellContent x:Name="scNetworkConfiguration" Title="Network Configuration" >
<views:NetworkConfiguration />
</ShellContent>
<ShellContent x:Name="scDataConfiguration" Title="Data Configuration">
<views:FormFieldConfiguration />
</ShellContent>
</FlyoutItem>
<FlyoutItem Title="Collect Data">
<ShellContent x:Name="scCollectData" Title="Collect Data">
<views:DataCollection />
</ShellContent>
</FlyoutItem>
<FlyoutItem Title="About">
<ShellContent x:Name="scAbout" Title="About">
<views:About />
</ShellContent>
</FlyoutItem>
On Xamarin.Forms 5.0.0.1829-pre6 the two attached properties Shell.FlyoutWidth and Shell.FlyoutHeight of type double have been added allowing to set the width and height of the Shell flyout.
So according to the comment from Elvis Xia at MSFT - this is not possible. I have abandoned the use of the Shell Flyout menu in my app so I did not open an issue with MSFT as Elvis suggested. If this is important to other people, I suggest you raise the issue with MSFT so the feature can be included in a future release.
I'm trying to develop a UI using Xamarin.Forms (Shell Navigation). I have bottom tabs and in each bottom tab there are several top tabs. I can able to show bottom tab Icons but the top tab icons are not shown (invisible). However, the text is visible.
I already tried to set Icon="image.png" for top tabs as I did for bottom tabs. Still the icons on top tabs are not visible.
Part of my XAML code:
<TabBar>
<Tab Title="Browse" Icon="tab_feed.png">
<ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" />
</Tab>
<Tab Title="About" Icon="tab_about.png">
<ShellContent ContentTemplate="{DataTemplate local:AboutPage}" />
</Tab>
<Tab Title="Test 2" Icon="tab_others.png">
<ShellContent Shell.NavBarIsVisible="False" Title="abt" Icon="tab_about.png" ContentTemplate="{DataTemplate local:AboutPage}" />
<ShellContent Title="fed" Icon="tab_feed.png" ContentTemplate="{DataTemplate local:ItemsPage}" />
</Tab>
</TabBar>
The Icons defined in ShellContent are not visible (titles are visible though).
Please provide any direction or document to attain this.
I have a PivotControl inside a PPhoneAppplicationPage. Ideally I'd like to show the appbar items from the page at all times, and merge them with items defined in the UserControl which shows in each PivotItem. I've tried a few different things, but only the outer (the PhoneApplicationPage) appbar seems to show.
The AppBar items are owned by the Page, not the PivotItems. But you can add/remove then dynamically as needed:
Your Page has an ApplicationBar property which has a Buttons and a MenuItems property. Add and remove buttons/menuitems there programmatically as needed whenever a new PivotItem gets selected.
You can use different appbars for each pivot item in a pivot. try the code below
<phone:Pivot>
<i:Interaction.Triggers>
<appBarUtils:SelectedPivotItemChangedTrigger>
<appBarUtils:SelectedPivotItemChangedTrigger.SelectionMappings>
<appBarUtils:SelectionMapping SourceIndex="0" TargetIndex="0"/>
</appBarUtils:SelectedPivotItemChangedTrigger.SelectionMappings>
<appBarUtils:SwitchAppBarAction>
<appBarUtils:AppBar Id="0" BackgroundColor="{StaticResource AppBarBg}" ForegroundColor="{StaticResource Foreground}">
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.home.png" Text="home" Command="{Binding HomeNavigationCommand}"/>
</appBarUtils:AppBar>
<appBarUtils:AppBar Id="1" BackgroundColor="{StaticResource AppBarBg}" ForegroundColor="{StaticResource Foreground}">
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.home.png" Text="home" Command="{Binding HomeNavigationCommand}"/>
</appBarUtils:AppBar>
<appBarUtils:AppBar Id="2" BackgroundColor="{StaticResource AppBarBg}" ForegroundColor="{StaticResource Foreground}">
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.home.png" Text="home" Command="{Binding HomeNavigationCommand}"/>
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.money.png" Text="collection" Command="{Binding CollectionPageCommand}"/>
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.check.rest.png" Text="ok" Command="{Binding OrderConfirmationButtonCommand}"/>
</appBarUtils:AppBar>
<appBarUtils:AppBar Id="3" BackgroundColor="{StaticResource AppBarBg}" ForegroundColor="{StaticResource Foreground}">
<appBarUtils:AppBarButton x:Name="ConfirmationAppBarButton" IconUri="/Assets\Images\appbar.cancel.rest.png" Text="cancel" Command="{Binding OrderCancelButtonCommand}"/>
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.check.rest.png" Text="ok" Command="{Binding OrderConfirmationButtonCommand}" IsEnabled="{Binding Model.EnableCheck,Mode=TwoWay}" />
</appBarUtils:AppBar>
</appBarUtils:SwitchAppBarAction>
</appBarUtils:SelectedPivotItemChangedTrigger>
</i:Interaction.Triggers>
</phone:Pivot>