Xaml Button too small - xaml

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 :

Related

how to add a context menu to a list item in xamarin UWP app?

I have the following xaml code:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:GraphTutorial.Models"
Title="Shared Document Library"
x:Class="GraphTutorial.SPDocumentLibraryContentsPage">
...
...
<ListView x:Name="SharedDocumentList"
HasUnevenRows="true"
Margin="10,10,10,10"
ItemSelected="OnItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Margin="10,10,10,10">
<Label Text="{Binding Path=Id}"
FontAttributes="Bold"
FontSize="Medium" />
<Label Text="{Binding Path=WebUrl}"
FontSize="Small" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Resources>
<MenuFlyout x:Name="DocumentActions">
<FlyoutItem x:Name="Edit" Text="Edit" />
<FlyoutItem x:Name="Remove" Text="Remove" Click="Remove_Click" />
</MenuFlyout>
</ListView.Resources>
</ListView>
I'm presently getting the following error message on the line:
Error XLS0414 The type 'MenuFlyout' was not found. Verify that you are
not missing an assembly reference and that all referenced assemblies
have been built.
Can someone point me in the right direction?
Thanks.
EDIT 1
I also have tried this:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:GraphTutorial.ContextMenu"
Title="Shared Document Library"
x:Class="GraphTutorial.SPDocumentLibraryContentsPage">
<ListView x:Name="SharedDocumentList"
HasUnevenRows="true"
Margin="10,10,10,10"
ItemSelected="OnItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Margin="10,10,10,10">
<Label Text="{Binding Path=Id}"
FontAttributes="Bold"
FontSize="Medium" />
<Label Text="{Binding Path=WebUrl}"
FontSize="Small" />
</StackLayout>
</ViewCell>
<ViewCell.ContextActions>
<MenuItem Text="Add" Clicked="Add_Clicked"></MenuItem>
<MenuItem Text="Delete" Clicked="Delete_Clicked"></MenuItem>
<MenuItem Text="Edit" Clicked="Edit_Clicked">
</ViewCell.ContextActions>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
But this returns the error:
XLS0415 The attachable property 'ContextActions' was not found in type
'ViewCell'.
Error XLS0414 The type 'MenuFlyout' was not found. Verify that you are
not missing an assembly reference and that all referenced assemblies
have been built.
From document MenuFlyout Class,we know that class MenuFlyout is a class in uwp, so we can't use it in xamarin.
If you want to add a context menu to a list item in xamarin UWP,you can refer to the following code:
<ListView x:Name="listView" Margin="20" ItemSelected="OnListItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Margin="20,0,0,0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label Text="{Binding Name}" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand" />
<Image Source="check.png" HorizontalOptions="End" IsVisible="{Binding Done}" />
</StackLayout>
<ViewCell.ContextActions>
<MenuItem Text="Delete"
Clicked="OnDeleteClicked"/>
</ViewCell.ContextActions>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In page.xaml.cs
void OnDeleteClicked(object sender, EventArgs e)
{
TodoItem itemToDelete = ((sender as MenuItem).BindingContext as TodoItem);
// other code
}
For more detail, you can check:
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/menuitem
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/menuitem#cross-platform-context-menu-behavior

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>

How to display data in Cells View using Xamarin

I'm building a CrossPlatform App in Xamarin!
I'm getting data from Web Api and it's working fine, the problem is that the data is showing in ListView like columns but I wanted to display that data in Cells View so I can add functionalities like left and right swipeand I don't know how to do this.
My current XAML UI:
<?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="LastTry.Attendance">
<ListView x:Name="selectOrd" RowHeight="50" SeparatorColor="White"
HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell >
<StackLayout Orientation="Horizontal" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="{Binding id}" Font="9" TextColor="Black" />
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" x:Name="employee_name" VerticalOptions="Center" >
<Label Text="{Binding employee_name}" Font="9" TextColor="Black" FontAttributes="Bold" HorizontalTextAlignment="Center"/>
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" x:Name="employee_salary" VerticalOptions="Center" >
<Label Text="{Binding employee_salary}" Font="9" TextColor="Black" FontAttributes="Bold" HorizontalTextAlignment="Center"/>
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" x:Name="employee_age" VerticalOptions="Center" >
<Label Text="{Binding employee_age}" Font="9" TextColor="Black" FontAttributes="Bold" HorizontalTextAlignment="Center"/>
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" x:Name="profile_image" VerticalOptions="Center" >
<Label Text="{Binding profile_image}" Font="9" TextColor="Black" FontAttributes="Bold" HorizontalTextAlignment="Center"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
Here is an example how I want it:
Here is the code for the listview same as above:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MSPL.Views.HomePage">
<AbsoluteLayout>
<ListView x:Name="Demolist" BackgroundColor="White" ItemSelected="Demolist_ItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ImageCell Height="30"
Text="{Binding employee_name }"
Detail="{Binding employee_age}"
ImageSource="falto.png">
<ImageCell.ContextActions>
<MenuItem x:Name="OnMore" Clicked="OnMore_Clicked" CommandParameter="{Binding .}" Text="More" />
<MenuItem x:Name="OnDelete" Clicked="OnDelete_Clicked" CommandParameter="{Binding .}" Text="Delete" IsDestructive="True" />
</ImageCell.ContextActions>
</ImageCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ImageButton Source="images.png"
BackgroundColor="Transparent"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".95,.95,55,55"
Clicked="ImageButton_Clicked"
/>
</AbsoluteLayout>

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());

Vertical text align on side menu xamarin.forms

I have been trying to centralize the text- "Hello Janine Alexander" on this side menu but to no avail. I have tried YAlign="Center" and also VerticalTextAlignment="Center" but neither have moved it even an inch down. Any help will be appreciated. I do think its in the navigation bar resulting in it not moving vertically down.How do i fix this
Here is the complete xaml code:
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="loyaltyworx1.Profile">
<MasterDetailPage.Master>
<ContentPage Title="Menu"
BackgroundColor="#2196F3">
<StackLayout Orientation="Vertical">
<Label x:Name="lblMessage" FontSize="Medium" HorizontalOptions="Center" TextColor="White" />
<!--
This StackLayout you can use for other
data that you want to have in your menu drawer
-->
<StackLayout BackgroundColor="#2196F3"
HeightRequest="150">
<Label Text=""
FontSize="20"
VerticalOptions="CenterAndExpand"
TextColor="White"
HorizontalOptions="Center"/>
</StackLayout>
<ListView x:Name="navigationDrawerList"
RowHeight="60"
SeparatorVisibility="None"
BackgroundColor="White"
ItemSelected="OnMenuItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Main design for our menu items -->
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="20,10,0,10"
Spacing="20">
<Image Source="{Binding Icon}"
WidthRequest="40"
HeightRequest="40"
VerticalOptions="Center"
/>
<Label Text="{Binding Title}"
FontSize="Medium"
VerticalOptions="Center"
TextColor="#343f42"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
It looks like you're adding it to the Navigation bar of the MasterDetailPage. If so, you're not going to be able to move it down. What I did on my app was to remove the navigationbar in the MasterDetailPage and in the content page I added the label with binding to add the name of the logged in user.
MainPage.xaml
<?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:local="clr-namespace:MyApp"
x:Class="MyApp.MainPage"
NavigationPage.HasNavigationBar="False">
<MasterDetailPage.Master>
<local:MasterPage x:Name ="masterPage"/>
</MasterDetailPage.Master>
</MasterDetailPage>
MasterPage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.MasterPage"
Padding="0,10,0,0"
Icon="hamburger.png"
Title="Menu">
<ContentPage.Content>
<StackLayout>
<StackLayout Orientation="Horizontal" Padding="10,10,0,0">
<Label Text="" FontSize="40" FontFamily="FontAwesome" />
<Label x:Name="Username" Text="{Binding UserFullName}" VerticalOptions="CenterAndExpand"/>
</StackLayout>
.....
Screen shot
If that's not the issue please add the code that is wrapping the label to get a better idea of what could be happening.