This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(12.8, 31%, 11%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EJA%3C/text%3E%3C/svg%3E)
Hi,
I have below XAML that has a BindableLayout inside a ScrollView but when I run the project the view is not scrollable.
How can I fix it please?
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
FlowDirection="RightToLeft"
x:Class="MyApp.MemberDetails"
Title="البيانات">
<ScrollView HorizontalScrollBarVisibility="Never" VerticalScrollBarVisibility="Never">
<Grid Margin="20">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0">
<Label x:Name="LabelMemberFullName" Margin="10" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Start" VerticalOptions="Center" FontSize="Medium" />
<BoxView Margin="0,10,0,10" HeightRequest="1" BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" />
</StackLayout>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" Text="الرمز :" TextColor="Red" Margin="5" VerticalOptions="Center" />
<Label x:Name="LabelMemberID" Grid.Column="1" Grid.Row="0" Margin="5" VerticalOptions="Center" />
<Label Grid.Column="0" Grid.Row="1" Text="الاسم :" TextColor="Red" Margin="5" VerticalOptions="Center" />
<Label x:Name="LabelMemberFirstName" Grid.Column="1" Grid.Row="1" Margin="5" VerticalOptions="Center" />
<Label Grid.Column="0" Grid.Row="2" Text="الأب :" TextColor="Red" Margin="5" VerticalOptions="Center" />
<Label x:Name="LabelMemberFatherName" Grid.Column="1" Grid.Row="2" TextColor="Blue" Margin="5" VerticalOptions="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="FatherTapGestureRecognizer_Tapped" NumberOfTapsRequired="1" />
</Label.GestureRecognizers>
</Label>
<Label Grid.Column="0" Grid.Row="3" Text="العائلة :" TextColor="Red" Margin="5" VerticalOptions="Center" />
<Label x:Name="LabelMemberFamilyName" Grid.Column="1" Grid.Row="3" TextColor="Blue" Margin="5" VerticalOptions="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="FamilyTapGestureRecognizer_Tapped" NumberOfTapsRequired="1" />
</Label.GestureRecognizers>
</Label>
<Label Grid.Column="0" Grid.Row="4" Text="الأم :" TextColor="Red" Margin="5" VerticalOptions="Center" />
<Label x:Name="LabelMemberMotherName" Grid.Column="1" Grid.Row="4" TextColor="Blue" Margin="5">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="MotherTapGestureRecognizer_Tapped" NumberOfTapsRequired="1" />
</Label.GestureRecognizers>
</Label>
<Label Grid.Column="0" Grid.Row="5" Text="تاريخ الولادة :" TextColor="Red" Margin="5" VerticalOptions="Center" />
<Label x:Name="LabelMemberBirthday" Grid.Column="1" Grid.Row="5" Margin="5" VerticalOptions="Center" />
<Label Grid.Column="0" Grid.Row="6" Text="مكان الولادة :" TextColor="Red" Margin="5" VerticalOptions="Center" />
<Grid Grid.Column="1" Grid.Row="6" Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image x:Name="ImageBirthCountry" Grid.Column="0" WidthRequest="40" HeightRequest="40" Margin="5" VerticalOptions="Center" />
<Label x:Name="LabelMemberBirthCountry" Grid.Column="1" VerticalOptions="Center" />
</Grid>
<Label Grid.Column="0" Grid.Row="7" Text="تاريخ الوفاة :" TextColor="Red" Margin="5" VerticalOptions="Center" />
<Label x:Name="LabelMemberDeathday" Grid.Column="1" Grid.Row="7" Margin="5" VerticalOptions="Center" />
<Label Grid.Column="0" Grid.Row="8" Text="مكان الوفاة :" TextColor="Red" Margin="5" VerticalOptions="Center" />
<Grid Grid.Column="1" Grid.Row="8" Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image x:Name="ImageDeathCountry" Grid.Column="0" WidthRequest="40" HeightRequest="40" Margin="5" VerticalOptions="Center" />
<Label x:Name="LabelMemberDeathCountry" Grid.Column="1" VerticalOptions="Center" />
</Grid>
</Grid>
<StackLayout x:Name="StackLayoutWifes" Grid.Row="2" IsVisible="False">
<BoxView Margin="0,10,0,10" HeightRequest="1" BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" />
<Label Text="تزوج من:" TextColor="Red" Margin="5" />
<StackLayout x:Name="StackLayoutWifesData">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<BoxView Grid.Row="0" Margin="40,10,40,10" HeightRequest="1" BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" />
<Label Grid.Row="1" ClassId="{Binding member_id}" Text="{Binding member_name}" Margin="5" TextColor="Blue">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="WifesTapGestureRecognizer_Tapped" NumberOfTapsRequired="1" />
</Label.GestureRecognizers>
</Label>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
<StackLayout x:Name="StackLayoutKids" Grid.Row="3" IsVisible="False">
<BoxView Margin="0,10,0,10" HeightRequest="1" BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" />
<Label Text="الأبناء:" TextColor="Red" Margin="5" />
<StackLayout x:Name="StackLayoutKidsData">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<BoxView Grid.Row="0" Margin="40,10,40,10" HeightRequest="1" BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" />
<Label Grid.Row="1" ClassId="{Binding member_id}" Text="{Binding member_name}" Margin="5" TextColor="Blue">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="KidsTapGestureRecognizer_Tapped" NumberOfTapsRequired="1" />
</Label.GestureRecognizers>
</Label>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
</Grid>
</ScrollView>
</ContentPage>
Thanks,
Jassim
As you said you have the BindableLayout inside the ScrollView, but you have set the BindableLayout's IsVisible property as false, so maybe the no scrollable reason is not related with the BindableLayout, you can also comment or remove those BindableLayout XAML to see if the scrollview works or not.
Then I see that you do not set the width and heigth for the ScrollView and the RowDefinition of the Grid is Auto, I will recommend you set a small width and heigth for the ScrollView, because ScrollView will not scroll if its width or height is large than its Child's height or width.
If the above still does not work, please narrow down to the minimal code needed to repro the problem and please also share which platform has the issue, then what is your MAUI version. For more information please check: How to write a quality question
I ran into this same problem a few days ago. I managed to fix it by ensuring that the content I was putting inside of the scroll view was actually larger than the scrollview itself. The scroll only functions if the content needs to scroll.