Xaml Button too small

Question

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.

Answer 1

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 :