ToolbarItem is not showing - xaml

Im currently reading trough this book.
Already at the beginning of the book I have a problem. I have Primary ToolbarItems and Secondary ToolbarItems. But none of them are shown. What am I doing 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"
xmlns:local="clr-namespace:BookCode"
x:Class="BookCode.MainPage"
Title="Visuals">
<StackLayout Padding="10,0">
<Label Text="Hello, Xamarin.Forms!"
FontSize="Large"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"/>
<Button Text="Click Me!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"/>
<Switch VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"/>
</StackLayout>
<ContentPage.ToolbarItems>
<ToolbarItem Text="edit" Order="Primary">
<ToolbarItem.Icon>
<OnPlatform x:TypeArguments="FileImageSource"
iOS="edit.png"
Android="ic_action_edit.png"
WinPhone="Images/edit.png"/>
</ToolbarItem.Icon>
</ToolbarItem>
<ToolbarItem Text="search" Order="Primary">
<ToolbarItem.Icon>
<OnPlatform x:TypeArguments="FileImageSource"
iOS="search.png"
Android="ic_action_search.png"
WinPhone="Images/feature.search.png"/>
</ToolbarItem.Icon>
</ToolbarItem>
<ToolbarItem Text="refresh" Order="Primary">
<ToolbarItem.Icon>
<OnPlatform x:TypeArguments="FileImageSource"
iOS="reload.png"
Android="ic_action_refresh.png"
WinPhone="Images/refresh.png"/>
</ToolbarItem.Icon>
</ToolbarItem>
<ToolbarItem Text="explore" Order="Secondary"/>
<ToolbarItem Text="discover" Order="Secondary"/>
<ToolbarItem Text="evolve" Order="Secondary" />
</ContentPage.ToolbarItems>
</ContentPage>

Here you go.
<ContentPage.ToolbarItems>
<ToolbarItem Text="edit" Order="Primary">
<ToolbarItem.Icon>
<OnPlatform x:TypeArguments="FileImageSource"
Android="icon.png"/>
</ToolbarItem.Icon>
</ToolbarItem>
<ToolbarItem Text="search" Order="Primary">
<ToolbarItem.Icon>
<OnPlatform x:TypeArguments="FileImageSource"
Android="icon.png"/>
</ToolbarItem.Icon>
</ToolbarItem>
<ToolbarItem Text="refresh" Order="Primary">
<ToolbarItem.Icon>
<OnPlatform x:TypeArguments="FileImageSource"
Android="icon.png"/>
</ToolbarItem.Icon>
</ToolbarItem>
<ToolbarItem Text="explore" Order="Secondary"/>
<ToolbarItem Text="discover" Order="Secondary"/>
<ToolbarItem Text="evolve" Order="Secondary" />
</ContentPage.ToolbarItems>
<ContentPage.Content>
<StackLayout Padding="10,0">
<Label Text="Hello, Xamarin.Forms!"
FontSize="Large"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"/>
<Button Text="Click Me!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"/>
<Switch VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"/>
</StackLayout>
</ContentPage.Content>

The ToolbarItems needs a Navigation Page to show them up. So modify MainPage wrapped by a navigation page:
MainPage = new NavigationPage(new MainPage());

Related

Center text on NavigationPage's TitleView: it is slightly offset due to back button at left

hi i am trying to center the text in the navigation bar but it is centered in relation to this feedback button
here is my 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="Paypal.profile">
<NavigationPage.TitleView>
<Label Text="Préférences" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
</NavigationPage.TitleView>
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
there is my problem
enter image description here
and what i want :
enter image description here
You can remove the back button and add a custom back button.
1.remove the back button with code:
NavigationPage.HasBackButton="False"
2.Add a custom image and add TapGestureRecognizer event for the back button.
<NavigationPage.TitleView>
<AbsoluteLayout>
<Image AbsoluteLayout.LayoutBounds="0, 0.5" AbsoluteLayout.LayoutFlags="PositionProportional" WidthRequest="20" HeightRequest="20"
Source="back.png">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Image.GestureRecognizers>
</Image>
<Label Text="MyTitle" FontSize="20" AbsoluteLayout.LayoutBounds="0.5, 0.5" AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>
</NavigationPage.TitleView>
The whole sample code is:
<?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="FormApp0706.TestPage"
NavigationPage.HasBackButton="False"
>
<NavigationPage.TitleView>
<AbsoluteLayout>
<Image AbsoluteLayout.LayoutBounds="0, 0.5" AbsoluteLayout.LayoutFlags="PositionProportional" WidthRequest="20" HeightRequest="20"
Source="back.png">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Image.GestureRecognizers>
</Image>
<Label Text="MyTitle" FontSize="20" AbsoluteLayout.LayoutBounds="0.5, 0.5" AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>
</NavigationPage.TitleView>
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

Rg.Plugins.Popup how to make the popup appear on top when an entry is given focus

I have two entry in a popup but when I give it focus and the keyboard appears, the popup does not display up, it goes up only when you start writing text in the entry and when the keyboard is closed it does not return to its initial position
<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage
x:Class="MyApp.Views.RgPluginsPopup"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup">
<pages:PopupPage.Animation>
<animations:ScaleAnimation
DurationIn="400"
DurationOut="300"
EasingIn="SinOut"
EasingOut="SinIn"
HasBackgroundAnimation="True"
PositionIn="Center"
PositionOut="Center"
ScaleIn="1.2"
ScaleOut="0.8" />
</pages:PopupPage.Animation>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Frame
BackgroundColor="White"
CornerRadius="10"
HasShadow="False">
<StackLayout Spacing="20">
<Label
FontSize="16"
HorizontalOptions="Center"
Text="Please enter your credentials" />
<Entry Placeholder="Username" />
<Entry IsPassword="True" Placeholder="Password" />
<Button Text="Sign in" />
</StackLayout>
</Frame>
</StackLayout>
</pages:PopupPage>
After my test, setting the focus when entering the page can solve this problem.
Here is the xaml code:
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Frame
BackgroundColor="White"
CornerRadius="10"
HasShadow="False">
<StackLayout Spacing="20">
<Label
FontSize="16"
HorizontalOptions="Center"
Text="Please enter your credentials" />
<Entry Placeholder="Username" x:Name="test"/>
<Entry IsPassword="True" Placeholder="Password" />
<Button Text="Sign in" />
</StackLayout>
</Frame>
</StackLayout>
Here is the backgroundcode:
public partial class Page1 : Rg.Plugins.Popup.Pages.PopupPage
{
public Page1()
{
InitializeComponent();
}
protected override void OnAppearing()
{
base.OnAppearing();
test.Focus();
}
}

Cannot set Content More than once xaml

I am using Xamarin and xaml to define my views. I am getting an error that I dont understand.
<?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"
xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
xmlns:vm="clr-namespace:WMS.ViewModels"
x:Class="Views.HomePage">
<ContentPage.Content>
<ScrollView>
<Frame x:Name="reprint" Padding="40" IsClippedToBounds="False" CornerRadius="4">
<telerikPrimitives:RadBorder BorderThickness="8" CornerRadius="10">
<StackLayout>
<Label Text=" Label"></Label>
<Label Text="Allows the User to reprint a label."></Label>
<telerikInput:RadButton BackgroundColor="#343C41" TextColor="White" Text="Label Reprint" x:Name="btnLabelReprint" Clicked="BtnLabelReprint_Clicked">
</telerikInput:RadButton>
</StackLayout>
</telerikPrimitives:RadBorder>
</Frame>
<Frame x:Name="warehouseTransferr" Padding="40" CornerRadius="4">
<telerikPrimitives:RadBorder BorderThickness="8" CornerRadius="10">
<StackLayout>
<Label Text="Ware House Transfer"></Label>
<Label Text="Allows users to transfer from warehouse to waehouse"></Label>
<telerikInput:RadButton BackgroundColor="#343C41" TextColor="White" Text="Warehouse Transfer" x:Name="btnWarehouseTransfe" Clicked="BtnWarehouseTransfe_Clicked">
</telerikInput:RadButton>
</StackLayout>
</telerikPrimitives:RadBorder>
</Frame>
</ScrollView>
</ContentPage.Content>
</ContentPage>
Severity Code Description Project File Line Suppression State
Error XLS0501 The property 'Content' is set more than once. HomePage.xaml 36
You cannot have multiple children for a ScrollView, hence the error defining content more than once.
So, to fix this, you can encapsulate your content within a StackLayout:
<ScrollView>
<StackLayout>
<Frame x:Name="reprint" Padding="40" IsClippedToBounds="False" CornerRadius="4">
<telerikPrimitives:RadBorder BorderThickness="8" CornerRadius="10">
<StackLayout>
<Label Text=" Label"></Label>
<Label Text="Allows the User to reprint a label."></Label>
<telerikInput:RadButton BackgroundColor="#343C41" TextColor="White" Text="Label Reprint" x:Name="btnLabelReprint" Clicked="BtnLabelReprint_Clicked">
</telerikInput:RadButton>
</StackLayout>
</telerikPrimitives:RadBorder>
</Frame>
<Frame x:Name="warehouseTransferr" Padding="40" CornerRadius="4">
<telerikPrimitives:RadBorder BorderThickness="8" CornerRadius="10">
<StackLayout>
<Label Text="Ware House Transfer"></Label>
<Label Text="Allows users to transfer from warehouse to waehouse"></Label>
<telerikInput:RadButton BackgroundColor="#343C41" TextColor="White" Text="Warehouse Transfer" x:Name="btnWarehouseTransfe" Clicked="BtnWarehouseTransfe_Clicked">
</telerikInput:RadButton>
</StackLayout>
</telerikPrimitives:RadBorder>
</Frame>
</StackLayout>
</ScrollView>

Xaml Button too small

I am writing a mobile app in Visual Studio 2019 for Mac.
I have a xaml ContentPage. I have some labels and a ListView.
Here is my 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="MyView.Views.ItemDetailPage"
Title="{Binding Title}">
<ContentPage.Resources>
<ResourceDictionary>
<!--Page Level Resources: Compatibile with Xamarin Live Player -->
<Color x:Key="Primary">#2196F3</Color>
<Color x:Key="Accent">#96d1ff</Color>
<Color x:Key="LightTextColor">#999999</Color>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout Spacing="20" Padding="15">
<Label Text="Text:" FontSize="Medium" />
<Label Text="{Binding Item.Text}" FontSize="Small"/>
<Label Text="Description:" FontSize="Medium" />
<Label Text="{Binding Item.Description}" FontSize="Small"/>
<Label Text="Commands:" FontSize="Medium" />
<ListView ItemsSource="{Binding Item.CommandList}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10">
<Button Margin="0,10,0,0" Text="Reset Pairing" Command="{Binding}" BackgroundColor="{StaticResource Primary}" TextColor="White" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Label Text="Something below" FontSize="Medium" />
</StackLayout>
</ContentPage>
Here is what the page looks like in the Android simulator:
Why is the button so skinny and how do I fix it? I have tried putting Height in the parents where it is allowed. I have also tried HeightRequests. I can't figure it out.
Set HasUnevenRows="True" property in your listview.
<?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="MyView.Views.ItemDetailPage"
Title="{Binding Title}">
<ContentPage.Resources>
<ResourceDictionary>
<!--Page Level Resources: Compatibile with Xamarin Live Player -->
<Color x:Key="Primary">#2196F3</Color>
<Color x:Key="Accent">#96d1ff</Color>
<Color x:Key="LightTextColor">#999999</Color>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout Spacing="20" Padding="15">
<Label Text="Text:" FontSize="Medium" />
<Label Text="{Binding Item.Text}" FontSize="Small"/>
<Label Text="Description:" FontSize="Medium" />
<Label Text="{Binding Item.Description}" FontSize="Small"/>
<Label Text="Commands:" FontSize="Medium" />
<ListView ItemsSource="{Binding Item.CommandList}" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10">
<Button Margin="0,10,0,0" Text="Reset Pairing" Command="{Binding}" BackgroundColor="{StaticResource Primary}" TextColor="White" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Label Text="Something below" FontSize="Medium" />
</StackLayout>
</ContentPage>
Result :

Xamarin.Forms: Not visible ToolbarItems in ContentPage

I am using Xamarin.Forms for my project & I need to have Toolbar at the top of the page.
I am trying to get it along with Tabbed pages at bottom.
My code is
<?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:local="clr-namespace:edTheSIS"
x:Class="edTheSIS.ParentDashboard">
<ContentPage.ToolbarItems>
<ToolbarItem Name="MenuItem1" Order="Primary" Text="Item 1" Priority="0" />
<ToolbarItem Name="MenuItem2" Order="Primary" Text="Item 2" Priority="1" />
</ContentPage.ToolbarItems>
<AbsoluteLayout>
<StackLayout BackgroundColor="Teal" AbsoluteLayout.LayoutBounds="0, 5, 0, 0" AbsoluteLayout.LayoutFlags="All">
<StackLayout Margin="0,200,0,0" HorizontalOptions="Center">
<Label Text="Xamarin.Forms" HorizontalTextAlignment="Center" TextColor="White"></Label>
<Label Text="Bottom NavigationBar" HorizontalTextAlignment="Center" TextColor="White"></Label>
</StackLayout>
</StackLayout>
<StackLayout AbsoluteLayout.LayoutBounds=".20,1,1,.1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="White" HorizontalOptions="FillAndExpand" Orientation="Horizontal">
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckHome">
<Image Margin="0,10,0,10" x:Name="imgHome" Style="{StaticResource ButtonNavigationBarImageStyle}" />
<Label Text="Dairy" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label>
</StackLayout>
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckAlarm">
<Image Margin="0,10,0,10" x:Name="imgAlarm" Style="{StaticResource ButtonNavigationBarImageStyle}" />
<Label Text="Alarm" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</ContentPage>
After executing the code only tabs are showing up, not ToolbarItems.
Wrap your page in a NavigationPage.
I'm guessing you're setting your MainPage in the App.xaml.cs now like: MainPage = new ParentDashboard();
Set this to be: MainPage = new NavigationPage(new ParentDashboard());