Is it possible to to disable title of current page in toolbarItems?
https://imgur.com/a/MsX0FKp
<ToolbarItem Text="{Binding positionNumber}"
/>
<ToolbarItem Text="PREV"
Clicked="previousQuestion"/>
<ToolbarItem Text="HINT"
/>
<ToolbarItem Text="NEXT"
Clicked="nextQuestion"/>
</ContentPage.ToolbarItems>
I've achieved it by simply adding
ToolbarItem Text=" 'space' PREV"
is there a proper way to do this?
Related
Om Xamarin Forms we use this code to create Master Page:
<MasterDetailPage.ToolbarItems>
<ToolbarItem Priority="0" Order="Secondary" Text="{x:DynamicResource MasterPageControls}" Command="{Binding ControlsCommand}" />
<ToolbarItem Priority="1" Order="Secondary" Text="{x:DynamicResource Refresh}" Command="{Binding RefreshCommand}" />
<ToolbarItem Priority="2" Order="Secondary" Text="{x:DynamicResource About}" Command="{Binding AboutCommand}" />
<ToolbarItem Priority="4" Order="Secondary" Text="{x:DynamicResource Logout}" Command="{Binding LogoutCommand}"/>
</MasterDetailPage.ToolbarItems>
<MasterDetailPage.Master>
<NavigationPage Title="Title" IconImageSource="hamburger.png">
<x:Arguments>
<ContentPage Title="Menu"
BackgroundColor="White"
NavigationPage.HasNavigationBar="False">
....
</ContentPage>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Master>
Now i migrate my code to version 5.0 and i change it like this (from this link):
<FlyoutPage.ToolbarItems>
<ToolbarItem Priority="0" Order="Secondary" Text="{x:DynamicResource MasterPageControls}" />
<ToolbarItem Priority="1" Order="Secondary" Text="{x:DynamicResource Refresh}" />
<ToolbarItem Priority="2" Order="Secondary" Text="{x:DynamicResource About}" />
<ToolbarItem Priority="4" Order="Secondary" Text="{x:DynamicResource Logout}"/>
</FlyoutPage.ToolbarItems>
<FlyoutPage.Flyout>
<NavigationPage Title="Title" IconImageSource="hamburger.png">
<x:Arguments>
<ContentPage Title="Menu"
BackgroundColor="White"
NavigationPage.HasNavigationBar="False">
...
</ContentPage>
</x:Arguments>
</NavigationPage>
</FlyoutPage.Flyout>
Register:
containerRegistry.RegisterForNavigation<NavigationPage>("NavigationPage");
containerRegistry.RegisterForNavigation<PrismMasterDetailPage, PrismMasterDetailPageViewModel>("MasterPage");
containerRegistry.RegisterForNavigation<MainPage, MainPageViewModel>();
And navigation:
await NavigationService.NavigateAsync("/MasterPage/NavigationPage/MainPage");
When i try run application i got this exception:
Flyout and Detail must be set before using a FlyoutPage
What should i change in my code to work it correctly (it should show on right side MasterPage and on center of the screen MainPage) ?
EDIT:
I change my code by adding a login page. It run on App.xaml.cs likt this:
await NavigationService.NavigateAsync($"/NavigationPage/{nameof(LoginPage)}");
On LoginPageViewModel i have binded command to button where i run a method to navigate to MainPage. In Xamarin.Forms 4.8 we use that command:
await NavigationService.NavigateAsync("/MasterPage/NavigationPage/MainPage",
new NavigationParameters {{nameof(LoginPageViewModel), string.Empty}});
But now when i use it Navigation didn't work (not have any exception or somethink like that):(
When i remove /MasterPage from name i'm navigate to MainPage but i not have my MasterPage
Edit 2:
I change code form use FlyoutPage to MasterDetailPage and it start work, but MasterDetailPage is obsolete in xamarin forms 5
FlyoutPage is not supported by Prism 8. You can read more about it here and here.
AS the error shows Flyout and Detail must be set before using a FlyoutPage .
Try to set FlyoutPage.Detail as well in FlyoutPage xaml .
<FlyoutPage.Flyout>
<NavigationPage Title="Title" IconImageSource="hamburger.png">
<x:Arguments>
<ContentPage Title="Menu"
BackgroundColor="White"
NavigationPage.HasNavigationBar="False">
...
</ContentPage>
</x:Arguments>
</NavigationPage>
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
<NavigationPage>
<x:Arguments>
<pages:FlyoutPage1Detail />
</x:Arguments>
</NavigationPage>
</FlyoutPage.Detail>
Refr to https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/flyoutpage#create-a-flyoutpage.
Actually Prism 8 didn't support FlyoutPage, so when i back to:
<MasterDetailPage.ToolbarItems>
<ToolbarItem Priority="0" Order="Secondary" Text="{x:DynamicResource MasterPageControls}" Command="{Binding ControlsCommand}" />
<ToolbarItem Priority="1" Order="Secondary" Text="{x:DynamicResource Refresh}" Command="{Binding RefreshCommand}" />
<ToolbarItem Priority="2" Order="Secondary" Text="{x:DynamicResource About}" Command="{Binding AboutCommand}" />
<ToolbarItem Priority="4" Order="Secondary" Text="{x:DynamicResource Logout}" Command="{Binding LogoutCommand}"/>
</MasterDetailPage.ToolbarItems>
<MasterDetailPage.Master>
<NavigationPage Title="Title" IconImageSource="hamburger.png">
<x:Arguments>
<ContentPage Title="Menu"
BackgroundColor="White"
NavigationPage.HasNavigationBar="False">
....
</ContentPage>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Master>
It start work, but i have warning becouse MasterDetailPage is obsolete but work :) I need to wait for Prism 8.1 and migrate MasterDetailPage to FlyoutPage
I'm facing a problem with ToolbarItem and IsEnabled property when trying to turn it on/off from XAML using triggers. ToolbarItem doesn't support triggers, so what I do is to create a Button (a hidden one) which supports triggers and then bind Button.IsEnabled to ToolbarItem.IsEnabled; here is the sample code:
<ContentPage.ToolbarItems>
<ToolbarItem x:Name="tlbSave" Text="Save" Clicked="Handle_Clicked">
<ToolbarItem.IsEnabled>
<Binding Source="{x:Reference btnTest}" Path="IsEnabled" />
</ToolbarItem.IsEnabled>
</ToolbarItem>
</ContentPage.ToolbarItems>
<ContentPage.Content>
<StackLayout Padding="10" VerticalOptions="CenterAndExpand">
<Entry x:Name="txtTest" HorizontalOptions="FillAndExpand" />
<Button x:Name="btnTest" Text="HIDDEN" IsEnabled="false" HorizontalOptions="FillAndExpand">
<Button.Triggers>
<MultiTrigger TargetType="Button">
<MultiTrigger.Conditions>
<BindingCondition Binding="{Binding Source={x:Reference txtTest}, Path=Text.Length,
Converter={convert:IsPositiveIntegerConverter}}" Value="true" />
</MultiTrigger.Conditions>
<Setter Property="IsEnabled" Value="True" />
</MultiTrigger>
</Button.Triggers>
</Button>
</StackLayout>
</ContentPage.Content>
If you try this piece of code you will see how btnTest gets enable/disable when txtTest.Text has some value. But it isn't affecting tlbSave.IsEnabled property.
However, this work perfect in code behind when I set tlbSave.IsEnabled into btnText.PropertyChanged EventHandler
btnTest.IsVisible is false, I'm just showing it up for testing purposes.
Any idea about how to deal with this?
This is because of the IsEnabled property of ToolbarItem is read-only.
If you just set IsEnabled property of a toolbar item in your XAML to false or true, you will get the following exception at runtime.
System.InvalidOperationException: The BindableProperty "IsEnabled" is readonly.
And if you take a look at Microsoft's documentation, you will notice that you cannot directly set IsEnabled property of a toolbar item.
For disabling a toolbar item, the suggested way is to use a command and it's CanExecute.
I found out a way to solve this problem, at least a way better than implementing OnPropertyChange for btnTest
<ContentPage.ToolbarItems>
<ToolbarItem x:Name="tlbSave" Text="Save" Clicked="Handle_Clicked" />
</ContentPage.ToolbarItems>
<ContentPage.Content>
<StackLayout Padding="10" VerticalOptions="CenterAndExpand">
<Entry x:Name="txtTest" HorizontalOptions="FillAndExpand" />
<Button x:Name="btnTest" Text="HIDDEN">
<Button.Triggers>
<MultiTrigger TargetType="Button">
<MultiTrigger.Conditions>
<BindingCondition Binding="{Binding Source={x:Reference txtTest}, Path=Text.Length,
Converter={convert:IsPositiveIntegerConverter}}" Value="true" />
</MultiTrigger.Conditions>
<Setter Property="IsEnabled" Value="True" />
</MultiTrigger>
</Button.Triggers>
<Button.IsEnabled>
<Binding Source="{x:Reference tlbSave}" Path="IsEnabled" Mode="OneWayToSource" />
</Button.IsEnabled>
</Button>
</StackLayout>
</ContentPage.Content>
Then set btnTest.IsEnabled = false; inside constructor and everything will go as smooth as I want.
Is it possible to add a switch on the toolbar?
<ContentPage.ToolbarItems>
<ToolbarItem>
<Switch x:Name="Switch1" IsToggled="True" Margin="5,0,0,0"/>
</ToolbarItem>
</ContentPage.ToolbarItems>
Does anybody have any ideas?
Thanks!
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TitleViewSample"
x:Class="TitleViewSample.MainPage">
<NavigationPage.TitleView>
<Switch x:Name="Switch1" IsToggled="True" Margin="5,0,0,0"/>
</NavigationPage.TitleView>
<ContentPage.Content>
<StackLayout>
<!-- Place new controls here -->
<Label Text="Welcome to Xamarin.Forms!"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
I don't think it is possible. You can, however, take the same approach I did when I needed to customise my title bar.
First, you hide the navigation bar, then you can specify your bar at the top, and use the controls you would like.
My xamarin andorid project does not have Drawawble folders under Resources, I have mipmap folders instead. I'm trying to set icon for a toolbar item in shared project. If I set an image as embeded resource I should be able to access it from the shared project, am I wrong?
<?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="BoringAppUi.MainPage" Title="Main Page">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Logout" Clicked="OnLogoutButtonClicked" Order="Primary" Priority="0"/>
<ToolbarItem Text="Home" Icon="#mipmap/baseline_home_blue_48.png" Clicked="OnHomeIconClicked" Order="Primary" Priority="1"/>
</ContentPage.ToolbarItems>
<ContentPage.Content>
<StackLayout>
<Label Text="Main app content goes here" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
Also I've tried setting it from the code behind
var toolbarItemHome = new ToolbarItem
{
Text = "Home",
Icon = "#mipmap/baseline_home_blue_48.png"
};
toolbarItemHome.Clicked += OnHomeIconClicked;
ToolbarItems.Add(toolbarItemHome);
From c# code:
new ToolbarItem () { Icon = "icon.png"}
Or from xaml:
<ToolbarItem Name="iconexample" Icon="icon.png" Priority="0" Order="Primary" Activated="Onclick" />
Have that in mind:
iOS - place the image at /mipmap/icon.png
Android - place the image at /mipmap/drawable/icon.png
I am looking for a way to add a menu to my ToolbarItem. Right now its just clickable text, here is an example of what I am trying to create,
Here is what I have so far:
<ContentPage.ToolbarItems>
<ToolbarItem Text="{Binding EditButtonText, Mode=TwoWay}" Clicked="EditClicked" />
</ContentPage.ToolbarItems>
You should be able to set the order of the ToolBarItem to Secondary to force the option into an overflow menu on Android:
<ContentPage.ToolbarItems>
<ToolbarItem Text="{Binding EditButtonText, Mode=TwoWay}" Clicked="EditClicked" Order="Secondary" />
</ContentPage.ToolbarItems>