Xamarin's Buttons issue - xaml

Question

I've only recently started Xamarin and I'm having trouble figuring out how to design a few blocks. I'm trying to create some simple buttons to navigate with and it was decent (picture 2). But as soon as I tried binding it to a data, the design basically ran off (picture 1). Any suggestions?
Image of the problem
Image of the attempt
Below are the codes for picture 1:
<ListView x:Name="displayCourses" ItemsSource="{Binding CourseName}">
<ListView.Header>
<Grid HorizontalOptions="Center">
<!--<Button Text="{Binding CourseName}" BackgroundColor="#ea3e15"
CornerRadius="20" WidthRequest="290" HeightRequest="130"
FontAttributes="Bold" FontSize="26" Clicked="NextPage"
/>-->
</Grid>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Button Text="{Binding CourseName}" BackgroundColor="#ea3e15" TextColor="#fff"
CornerRadius="20"
FontAttributes="Bold" FontSize="26"
/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
CS codes linking the data together
protected async override void OnAppearing()
{
base.OnAppearing();
displayCourses.ItemsSource = await firebaseHelper.GetCourses();
}
public async Task<List<Course>> GetCourses()
{
FirebaseClient firebase = new FirebaseClient("https://pra-ece32-default-rtdb.firebaseio.com/");
return (await firebase
.Child("Courses")
.OnceAsync<Course>()).Select(item => new Course
{
CourseName = item.Object.CourseName,
CourseID = item.Object.CourseID,
ExamDate = item.Object.ExamDate,
}).ToList();
}

Answer 1

The width of a row inside the listview will always take up the entire width of the listview itself. There is no way to have extra space between the end of a Row and the edge of the listview, nor would that make any sense.
But you can use Grid to meet your requirement. Please set ListView HasUnevenRow="True" to automatically size row height to fit content.
<ListView
x:Name="displayCourses"
HasUnevenRows="True"
ItemsSource="{Binding courses}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button
Grid.Column="1"
Margin="20"
BackgroundColor="#ea3e15"
CornerRadius="20"
FontAttributes="Bold"
FontSize="26"
HeightRequest="50"
Text="{Binding coursename}"
TextColor="#fff"
WidthRequest="200" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>