xamlformattingcontent-pages

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:

enter image description here

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.


Solution

  • 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 :

    enter image description here