xamarin.forms not showing ToolbarItem - xamarin.forms

I just created empty xamarin.forms project and nothing in it.
I searched on how to add Toolbar, in Microsoft documentation say add these line to xaml file.
<ContentPage.ToolbarItems>
<ToolbarItem Text="Example Item"
IconImageSource="example_icon.png"
Order="Primary"
Priority="0" />
</ContentPage.ToolbarItems>
But not toolbar is showing on my android device, this is really sad because this is my first time using xamarin and this is just empty project but it is not working.
this is my main xaml file
<?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:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="test3.MainPage">
<ContentPage.ToolbarItems>
<ToolbarItem Text="sssssssss Item"
Order="Primary"
Priority="0" />
</ContentPage.ToolbarItems>
<StackLayout>
<!-- Place new controls here -->
<Label Text="Welcome to Xamarin.Forms!" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>

Your App.xaml.cs should be similar to this:-
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new test3.MainPage());
}
protected override void OnStart()
{
// Handle when your app starts
}
protected override void OnSleep()
{
// Handle when your app sleeps
}
protected override void OnResume()
{
// Handle when your app resumes
}
}

Related

How to use a bindable property for colours in Xamarin.forms?

I have my own custom control with some bindable properties. I coded the string bindable properties very easily using YouTube.
But how to use the bindable properties for colours?
You can refer to the following code:
Custom control MyControl.xaml
<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
x:Class="App12.MyControl"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<ContentView.Content>
<StackLayout>
<Label x:Name="MyLbl" Text="Hello Xamarin.Forms!" />
</StackLayout>
</ContentView.Content>
</ContentView>
Custom control's code-behind MyControl.xaml.cs
public partial class MyControl
{
public static readonly BindableProperty TintColorProperty =
BindableProperty.Create(nameof(TintColor), typeof(Color), typeof(MyControl), Color.Black,
propertyChanged: OnTintColorChanged);
public MyControl()
{
InitializeComponent();
}
public Color TintColor
{
get { return (Color) GetValue(TintColorProperty); }
set { SetValue(TintColorProperty, value); }
}
private static void OnTintColorChanged(BindableObject bindable, object oldValue, object newValue)
{
var control = bindable as MyControl;
if (control == null)
{
return;
}
control.MyLbl.TextColor = (Color) newValue;
}
}
Usage:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="App12.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:app12="clr-namespace:App12;assembly=App12"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<ContentPage.Resources>
<ResourceDictionary>
<Color x:Key="PrimaryTextColor">#ff00ff</Color>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<app12:MyControl
HorizontalOptions="Center"
TintColor="{StaticResource PrimaryTextColor}"
VerticalOptions="CenterAndExpand" />
<app12:MyControl
HorizontalOptions="Center"
TintColor="Aqua"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>

Navigate to a page from a tab within a TabbedPage

I have a simple Xamarin.Forms app with a main page as TabbedPage which looks like this:
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
x:Class="PrismSample.Views.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="http://prismlibrary.com"
xmlns:views="clr-namespace:PrismSample.Views"
Title="Main Page"
prism:ViewModelLocator.AutowireViewModel="True">
<TabbedPage.Children>
<NavigationPage Title="Page1">
<x:Arguments>
<views:OnePage Title="Page 1" />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Page2">
<x:Arguments>
<views:TwoPage Title="Page 2" />
</x:Arguments>
</NavigationPage>
</TabbedPage.Children>
</TabbedPage>
On the page "OnePage" I have a button. When I tap on that button I want to navigate to a page named "ThreePage".
OnPage:
<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
x:Class="PrismSample.Views.OnePage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="http://prismlibrary.com"
prism:ViewModelLocator.AutowireViewModel="True">
<ContentPage.Content>
<StackLayout Margin="20" Spacing="20">
<Label HorizontalOptions="CenterAndExpand" Text="Page 1" />
<Button
x:Name="Button1"
Command="{Binding ClickMeCommand}"
HorizontalOptions="FillAndExpand"
Text="Open Page 3" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
OnePageViewModel:
namespace PrismSample.ViewModels
{
public class OnePageViewModel : BindableBase
{
private readonly INavigationService navigationService;
public DelegateCommand ClickMeCommand { private set; get; }
public OnePageViewModel(INavigationService navigationService)
{
this.navigationService = navigationService;
ClickMeCommand = new DelegateCommand(async () => await ClickedAsync(), () => true);
Debug.WriteLine($"NavigationStack: {this.navigationService.GetNavigationUriPath()}", nameof(OnePageViewModel));
}
public Task ClickedAsync()
{
Debug.WriteLine($"You clicked me!", nameof(OnePageViewModel));
return navigationService.NavigateAsync("ThreePage");
}
}
}
App.xaml.cs
namespace PrismSample
{
public partial class App
{
public App() : this(null) { }
public App(IPlatformInitializer initializer) : base(initializer) { }
protected override async void OnInitialized()
{
InitializeComponent();
var result = await NavigationService.NavigateAsync("MainPage");
if(!result.Success)
{
System.Diagnostics.Debugger.Break();
}
}
protected override void RegisterTypes(IContainerRegistry containerRegistry)
{
containerRegistry.RegisterForNavigation<NavigationPage>();
containerRegistry.RegisterForNavigation<MainPage, MainPageViewModel>();
containerRegistry.RegisterForNavigation<OnePage, OnePageViewModel>();
containerRegistry.RegisterForNavigation<TwoPage, TwoPageViewModel>();
containerRegistry.RegisterForNavigation<ThreePage, ThreePageViewModel>();
}
}
}
I expected the following:
When tapping on the button a navigation to the page "ThreePage" is done within the first tab. I also expected to have a "Back" button in the navigation bar.
What happens:
Nothing in the first tab. But if I switch to the second tab it shows the page "ThreePage" but also without a "Back" button.
What is going wrong here???
I have attached my project here:
https://www.dropbox.com/s/fuu2wo5zqhp52gk/08-TabbedNavigation.zip?dl=0
Navigating via TabbedPages is broken in the latest Prism released version (8.0.0.1909).
[Bug] Navigation when in Tabbed Pages doesn't change currently selected tab #2218
(It seems they finally have fixed this issue but they haven't released a new version until now)
So downgrade Prism.DryIoc to 7.2.0.1422 or wait for the next Prism release...

How clicking barItem in Navigation Bar will bring new content page

[![enter image description here][1]][1]This is the MainPage which has a navigation Bar that contains 4 barItems.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="CheckList"
x:Class="mmy.View.MainPage">
<ContentPage.ToolbarItems>
<ToolbarItem Name="MenuItem1" Order="Primary" Icon="itemIcon1.png" Priority="0" />
<ToolbarItem Name="MenuItem2" Order="Primary" Icon="itemIcon2.png" Priority="1" />
<ToolbarItem Name="MenuItem1" Order="Primary" Icon="itemIcon3.png" Priority="2" />
<ToolbarItem Name="MenuItem2" Order="Primary" Icon="itemIcon4.png" Priority="3" />
</ContentPage.ToolbarItems>
<ContentPage.Content>
<StackLayout Orientation="Vertical">
<Label Text="MainPage"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
The Navigation Bar will look like below:
-------------------------------------------------------
Main barItem1 | barItem2 | barItem3 | barItem4
-------------------------------------------------------
Item1_Content
Say , I have 4 bar items in the Navigation bar
I want to do the following:
When user click barItem2 ,
a) it will bring in a Item2_Content which will replace the Item1_Content. ( I m not sure there is such UI )
b) the barItem (1 to 4 ) still remain in the navigation bar.
Is this doable?
Can you help me how to implement such user requirement?
Thanks
Update:
--(1) - start at P1 :
private async void BtnLogin_Clicked(object sender, EventArgs e)
{
NavigationPage NP = new NavigationPage(new MainPage())
{
BarBackgroundColor = Color.White,
BarTextColor = Color.DarkGray
};
}
--(2) I created a new page call RepairSvc for (3)
--(3) At MainPage : it has a navigation bar from (1)
Click the Icon="itemIcon1.png"
<ToolbarItem Name="MenuItem1" Order="Primary" Icon="itemIcon1.png" Command="Item1Command" Priority="0" />
Code Behind :
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MainPage : ContentPage
{
public ICommand Item1Command { get; private set; }
public MainPage()
{
InitializeComponent();
this.Item1Command = new Command((sender) =>
{
Navigation.PushAsync(new RepairSvc());
});
}
}
assign a command to your toolbar
<ToolbarItem Name="MenuItem1" Order="Primary" Icon="itemIcon1.png" Priority="0" Command="Item1Command" />
in your codebehind
this.Item1Command = new Command((sender) =>
{
Navigation.PushAsync(new MyPage());
});
}
public ICommand Item1Command { get; private set; }

Trying to create custom bindable template view in Xamarin.Forms

I'm trying to create a XAML template in Xamarin Forms that I can reference from multiple screens. The template has a header, a summary, and can receive touch input. In the attached wireframe, there would be a model backing the three blocks of data. I've read through the docs at https://developer.xamarin.com/guides/xamarin-forms/templates/control-templates/template-binding/, but at this point I feel like I'm missing an important concept. I thought I would just need to create a ContentView template and somehow make the Labels inside bindable to an object at runtime via .BindingContext. What am I missing?
Content Page
<?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="Namespace.SettingsPage"
Title ="Settings">
<ContentPage.Resources>
<ResourceDictionary>
<ControlTemplate x:Key="SettingTemplate">
<StackLayout>
<Label
x:Name="Header"
Text="{TemplateBinding Parent.Header}" />
<Label
x:Name="Summary"
Text="{TemplateBinding Parent.Summary}"/>
</StackLayout>
</ControlTemplate>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout>
<StackLayout>
<ContentView x:Name="alerts" ControlTemplate="{StaticResource SettingTemplate}"></ContentView>
<ContentView x:Name="recipients" ControlTemplate="{StaticResource SettingTemplate}"></ContentView>
<ContentView x:Name="log" ControlTemplate="{StaticResource SettingTemplate}"></ContentView>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Code Behind
using Xamarin.Forms;
namespace Namespace.Settings
{
public partial class SettingsPage : ContentPage
{
protected SettingsViewModel viewModel;
public SettingsPage(AlertInfo info)
{
InitializeComponent();
BindingContext = viewModel = new SettingsViewModel(info, this);
// Bind individual models here. AlertSummary VM has logic to pull out
// header and summary fiels.
this.alerts.BindingContext = new AlertSummaryViewModel(info, Summary.ALERTS, this);
this.recipients.BindingContext = new AlertSummaryViewModel(info, Summary.RECIPIENTS, this);
}
}
}
Here is the starting point.
public partial class ControlTemplateTest : ContentPage
{
public static readonly BindableProperty HeaderTextProperty =
BindableProperty.Create("HeaderText", typeof(string), typeof(ControlTemplateTest), "Alerts");
public static readonly BindableProperty SummaryTextProperty =
BindableProperty.Create("SummaryText", typeof(string), typeof(ControlTemplateTest), "Three alerts set");
public string HeaderText
{
get { return (string)GetValue(HeaderTextProperty); }
}
public string SummaryText
{
get { return (string)GetValue(SummaryTextProperty); }
}
public ControlTemplateTest()
{
InitializeComponent();
}
}
}
Xaml
<?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="ButtonRendererDemo.ControlTemplateTest">
<ContentPage.Resources>
<ResourceDictionary>
<ControlTemplate x:Key="SettingTemplate">
<StackLayout BackgroundColor="#DCF394" >
<Label FontSize="48" TextColor="Black" Text="{TemplateBinding Parent.Parent.HeaderText}" />
<Label Text="{TemplateBinding Parent.Parent.SummaryText}"/>
</StackLayout>
</ControlTemplate>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout BackgroundColor="White" VerticalOptions="FillAndExpand" Spacing="0,40" Padding="0,40">
<ContentView x:Name="alerts" VerticalOptions="FillAndExpand" ControlTemplate="{StaticResource SettingTemplate}"></ContentView>
<ContentView x:Name="recipients" VerticalOptions="FillAndExpand" ControlTemplate="{StaticResource SettingTemplate}"></ContentView>
<ContentView x:Name="log" VerticalOptions="FillAndExpand" ControlTemplate="{StaticResource SettingTemplate}"></ContentView>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Xamarin.Forms Prism Master in MasterDetailPage could not be loaded from separate XAML file

i tried to move a the master in MasterDetailPage into separate file. As soon as i do this, the MD Page is not longer loaded.
MasterDetailPage:
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
xmlns:local="clr-namespace:PrismMasterDetailSample.Views;assembly=PrismMasterDetailSample"
x:Class="PrismMasterDetailSample.Views.PMasterDetailPage">
<MasterDetailPage.Master Title="Menu">
<!--<local:MenuPage /> <========== does not work -->
<ContentPage Title="Default">
<StackLayout>
<Button Text="About" Command="{Binding NavigateCommand}" CommandParameter="MyNavigationPage/ViewA?id=A" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<local:PTabbedPage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Codebehind:
using Xamarin.Forms;
namespace PrismMasterDetailSample.Views
{
public partial class PMasterDetailPage : MasterDetailPage
{
public PMasterDetailPage()
{
InitializeComponent();
}
}
}
Here is the MenuPage XAML
"1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="PrismMasterDetailSample.Views.MenuPage"
Title="Menu">
<StackLayout VerticalOptions="End" HorizontalOptions="Center" Margin="20">
<Button Text="DetailPage1" Command="{Binding NavigateCommand}" HorizontalOptions ="LayoutOptions.Center"/>
</StackLayout>
</ContentPage>
The Code behind:
using Xamarin.Forms;
namespace PrismMasterDetailSample.Views
{
public partial class MenuPage : ContentPage
{
public MenuPage()
{
InitializeComponent();
}
}
}
And the ViewModel:
using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Linq;
namespace PrismMasterDetailSample.ViewModels
{
public class MenuPageViewModel : BindableBase
{
public DelegateCommand NavigateCommand { get; private set; }
private INavigationService _navigationService;
public MenuPageViewModel(INavigationService navigationService)
{
_navigationService = navigationService;
NavigateCommand = new DelegateCommand(Navigate);
}
private void Navigate()
{
_navigationService.NavigateAsync("DetailPage1");
}
}
}
I'm quite sure that is a trivial issue, but i didn't get the point.
Many thanks in advance.
And here is the answer ;-D
Add "Title" to the MenuPage
<?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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="PrismMasterDetailSample.Views.MenuPage"
Title="Menu">
<StackLayout VerticalOptions="End" HorizontalOptions="Center" Margin="20">
<Button Text="DetailPage1" Command="{Binding NavigateCommand}" HorizontalOptions ="LayoutOptions.Center"/>
</StackLayout>
</ContentPage>

Resources