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.

score 0 · Accepted Answer · answered Aug 14 '19 at 17:47

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 :

That works. Thanks. By way of helping us all learn can someone explain what is going on? Are the row heights hard coded to some value that can't be changed? Could I have set that row height to a height that would have worked? — user856232, Aug 14 '19 at 18:16
Yes..By default ViewCell has fixed height. If you want to use custom row height you need to indicate this to ListView by setting HasUnevenRows. Now you can also have different sized rows in the same ListView. — Rajesh Sonar, Aug 14 '19 at 18:30

Xaml Button too small

1 Answers1