I am building an app in .NET MAUI. I started building it for a previous android version (API 22). The layout is fine for that version. But when I installed it on a later version of android (API 33), the vertical stack layout wasn't aligning as I wanted it to be.
I thought the problem was with how I arranged all these elements. So, I rewrote the XAML, but still didn't achieve what I was looking for. The black bar still remains at the bottom.
<?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"
xmlns:viewmodels="clr-namespace:WordsAssistantMAUI.ViewModels"
x:DataType="viewmodels:DefinitionViewModel"
x:Class="WordsAssistantMAUI.Views.DefinitionView"
Title="Get Definition"
BackgroundColor="#7d83cf">
<VerticalStackLayout
VerticalOptions="Start" HorizontalOptions="Center" Margin="20,20" Spacing="20">
<!--Search bar-->
<SearchBar Text="{Binding Input}" IsEnabled="{Binding IsNotBusy}"
SearchCommand="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:DefinitionViewModel}}, Path=SearchDefinitionCommand}"/>
<!--Definition and Navigation buttons-->
<Grid ColumnDefinitions="*, 10*, *"
ColumnSpacing="15" VerticalOptions="Center" RowDefinitions="*,*">
<Button Text="b"
HeightRequest="50" WidthRequest="50"
Grid.Column="0" Grid.Row="0"
Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:DefinitionViewModel}}, Path=PreviousDefinitionCommand}"/>
<ScrollView Grid.Row="0" Grid.Column="1" HeightRequest="125">
<Label Text="{Binding Definition}"
Style="{StaticResource DefintionStyle}"/>
</ScrollView>
<Button Text="n"
Grid.Row="0" Grid.Column="2"
HeightRequest="50" WidthRequest="50"
Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:DefinitionViewModel}}, Path=NextDefinitionCommand}"/>
<ActivityIndicator
IsVisible="{Binding IsBusy}"
IsRunning="{Binding IsBusy}"
Grid.Column="1"
Grid.Row="1"/>
</Grid>
<!--Synonyms and Antonyms-->
<Grid ColumnDefinitions="*,*" Style="{StaticResource ResponsesListGrid}">
<VerticalStackLayout Grid.Column="0" HorizontalOptions="Center">
<Label Text="Synonyms"
Style="{StaticResource ResponsesLabel}"/>
<Frame HeightRequest="300"
Style="{StaticResource ResponsesFrame}">
<ScrollView HorizontalOptions="Start">
<FlexLayout BindableLayout.ItemsSource="{Binding synonyms}"
Style="{StaticResource ResponsesFlexLayout}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Frame Style="{StaticResource ResponseStyling}">
<Label Text="{Binding .}" Style="{StaticResource Responses}"/>
</Frame>
</DataTemplate>
</BindableLayout.ItemTemplate>
<BindableLayout.EmptyViewTemplate>
<DataTemplate>
<Frame HasShadow="True" BackgroundColor="LightGray"
Padding="5">
<Label Style="{StaticResource Responses}"
Text="Nothing to show right now!"/>
</Frame>
</DataTemplate>
</BindableLayout.EmptyViewTemplate>
</FlexLayout>
</ScrollView>
</Frame>
</VerticalStackLayout>
<VerticalStackLayout Grid.Column="1" HorizontalOptions="Center">
<Label Text="Antonyms"
Style="{StaticResource ResponsesLabel}"/>
<Frame HeightRequest="300"
Style="{StaticResource ResponsesFrame}">
<ScrollView HorizontalOptions="Start">
<FlexLayout BindableLayout.ItemsSource="{Binding antonyms}"
Style="{StaticResource ResponsesFlexLayout}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Frame Style="{StaticResource ResponseStyling}">
<Label Text="{Binding .}" Style="{StaticResource Responses}"/>
</Frame>
</DataTemplate>
</BindableLayout.ItemTemplate>
<BindableLayout.EmptyViewTemplate>
<DataTemplate>
<Frame HasShadow="True" BackgroundColor="LightGray"
Padding="5">
<Label Style="{StaticResource Responses}"
Text="Nothing to show right now!"/>
</Frame>
</DataTemplate>
</BindableLayout.EmptyViewTemplate>
</FlexLayout>
</ScrollView>
</Frame>
</VerticalStackLayout>
</Grid>
<Button Text="Clear all" WidthRequest="150"
IsEnabled="{Binding IsNotBusy}"
Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:DefinitionViewModel}}, Path=ClearAllCommand}"/>
</VerticalStackLayout>
</ContentPage>
Related
have a ListView in which for each element of the List you have 3 buttons for 3 different options, when you enter the screen there are no overflow problems in the images of the ImageButton, but when you do the first scroll the sources start to overflow as shown in the following image
The images lose the center and are misaligned as you scroll up or down, this problem does not occur in iOS, only occurs in Android (version 6,7,8 and 9), apparently it is a problem like Android render the images
I tried, changing the ImageButton control to Button and the problem persists, also trying to assign the "Aspect" property to the ImageButton, but I'm not getting successful results, any help how to fix this? then my code XAML
<ListView
ItemsSource="{Binding ListaRecintos}"
SelectionMode="None"
IsRefreshing="{Binding IsRefreshing, Mode=TwoWay}"
RowHeight="80"
HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout
Margin="0,4,0,0"
Orientation="Vertical">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="3.9*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label
Text="{Binding Code}"
HorizontalOptions="Start"
FontSize="Small"
WidthRequest="40"
HeightRequest="30"
FontAttributes="Bold"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
TextColor="{StaticResource das.color.texto}"
VerticalOptions="CenterAndExpand"
Grid.Column="0">
</Label>
<StackLayout Orientation="Vertical"
Grid.Column="1">
<Label
Text="{Binding Name}"
HorizontalOptions="Start"
FontSize="Small"
HeightRequest="32"
MaxLines="2"
TextColor="{StaticResource das.color.texto}"
VerticalOptions="Center"
VerticalTextAlignment="Center">
</Label>
</StackLayout>
</Grid>
<!--STACK BUTTON-->
<StackLayout
Orientation="Horizontal"
HorizontalOptions="EndAndExpand"
Margin="0,1,1,0">
<!--BUTTON 1-->
<ImageButton
Source="ic_check_wt"
Aspect="AspectFit"
CornerRadius="0"
BackgroundColor="{StaticResource das.color.estado_success}"
HorizontalOptions="End"
VerticalOptions="Center"
HeightRequest="35"
WidthRequest="50"
CommandParameter="2"
Command="{Binding ControlAuditoriaCommand}"
IsEnabled="{Binding EnabledButton}"/>
<!--BUTTON 2-->
<ImageButton
Source="ic_hammer"
BackgroundColor="{StaticResource das.color.estado_primary}"
HorizontalOptions="End"
CornerRadius="0"
Aspect="AspectFit"
VerticalOptions="Center"
HeightRequest="35"
WidthRequest="50"
CommandParameter="1"
Command="{Binding ControlAuditoriaCommand}"
IsEnabled="{Binding EnabledButton}"/>
<!--BUTTON 3-->
<ImageButton
Source="ic_arrow_up"
BackgroundColor="{StaticResource das.color.estado_success}"
HorizontalOptions="End"
CornerRadius="0"
Aspect="AspectFit"
VerticalOptions="Center"
HeightRequest="35"
WidthRequest="50"
CommandParameter="3"
Command="{Binding ControlAuditoriaCommand}"
IsEnabled="{Binding EnabledButton}"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
How can I avoid this behavior? Any help for me?
I suggest you use (Frame + image ) instead of ImageButton , and add tapgesture on it .
I am trying to get a SuaveControls.FloatingActionButton to work on top of a ListView following the example on this page - https://devlinduldulao.pro/how-to-create-a-floating-action-button/
My ListView is inside a StackLayout so I decided to wrap them into an AbsoluteLayout
Here is the View/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"
xmlns:views="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
xmlns:local="clr-namespace:DPM.XForms"
x:Class="DPM.XForms.ProjectListPage"
Title="Drive Plus Mobile"
>
<AbsoluteLayout>
<StackLayout Orientation="Vertical" Spacing="1">
<Label Text="TopBar ..." BackgroundColor="Gray" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center"/>
<!-- Project Search/Filter toolbar-->
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
<Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
<Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Text="++" WidthRequest="27" HeightRequest="27" Clicked="CreateProject_Clicked"></Button>
</StackLayout>
</StackLayout>
<Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />
<ListView x:Name="lvProjects" ItemTapped="OnProjectTapped" RowHeight="54" BackgroundColor="DarkGray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Project Row -->
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
<Button
Image="Colombia.png"
BackgroundColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="54"
HeightRequest="54"
>
</Button>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label
Text="{Binding Name}"
TextColor="Black"
Font="Bold,17"
HorizontalOptions="StartAndExpand"
VerticalOptions="Start"
/>
<Label
Text="{Binding Brand}"
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<Label
Text=".."
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="End"
/>
</StackLayout>
<Button Text="3" WidthRequest="44"></Button>
<Button Text=">" WidthRequest="44" BackgroundColor="White" ></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<views:FloatingActionButton
Image="CreateProject.png"
WidthRequest="80"
HeightRequest="80"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Clicked="FloatingActionButton_Clicked"
>
</views:FloatingActionButton>
</AbsoluteLayout>
</ContentPage>
But with this approach two things are happening
When the device is in Landscape mode the ListView is not growing as it did before adding the AbsoluteLayout
Dont know how to position the FloatingActionButton to always stay on the lower right corner of any device
I have also tried placing the FloatingActionButton inside the current StackLayout but it does not float is just added below or above the listview as a regular "row" like is shown here
Feel free to use the comments if something is not clear.
You can remove absolute layout since you can see that your layout doesn't fully expand at landscape mode.
You can try this one
<MainLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
//YourTopBar
// YourListView
<StackLayout HorizontalOptions="End"
VerticalOptions="End"
Spacing="0"
Margin="15">
<YourFloatingButton />
</StackLayout>
</MainLayout>
The mainlayout can be a grid or stacklayout
You can modify the layout to use Grid and AbsoluteLayout to wrapper the listview and Floating button. So it is somethig like the following:(As I don't have your list datasource, to be simple, I just put a mock list)
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
xmlns:local="clr-namespace:App51"
x:Class="App51.MainPage">
<StackLayout Orientation="Vertical" HorizontalOptions="CenterAndExpand">
<!-- Project Search/Filter toolbar-->
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
<Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
<Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Text="++" WidthRequest="27" HeightRequest="27" ></Button>
</StackLayout>
</StackLayout>
<Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="8*" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="FAB" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="24" FontAttributes="Bold" BackgroundColor="LightGray"
TextColor="CadetBlue" />
<AbsoluteLayout Grid.Row="1">
<ListView AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,1,1,1"
VerticalOptions="FillAndExpand"
SeparatorColor="Black"
RowHeight="50"
BackgroundColor="Gray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Project Row -->
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
<Button
Image="Colombia.png"
BackgroundColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="54"
HeightRequest="54"
>
</Button>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label
Text="Binding Name"
TextColor="Black"
Font="Bold,17"
HorizontalOptions="StartAndExpand"
VerticalOptions="Start"
/>
<Label
Text="Binding Name"
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<Label
Text=".."
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="End"
/>
</StackLayout>
<Button Text="3" WidthRequest="44"></Button>
<Button Text=">" WidthRequest="44" BackgroundColor="White" ></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<views:FloatingActionButton Grid.Row="1" Grid.Column="1"
Image="CreateProject.png"
WidthRequest="80"
HeightRequest="80"
HorizontalOptions="End"
VerticalOptions="End"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="1.0,1.0,-1,-1"
Margin="10" >
</views:FloatingActionButton>
</AbsoluteLayout>
</Grid>
</StackLayout>
</ContentPage>
And the result is like this:
Based on #Swift_Talt answer and this discussion- https://forums.xamarin.com/discussion/52420/create-a-layered-page-layering-controls
I found this solution using a Grid of one (1) cell where the ListView (background) and the FloatingActionButton are on the same unique cell
This is how it looks:
And here is the View/Page
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
xmlns:local="clr-namespace:DPM.XForms"
x:Class="DPM.XForms.ProjectListPage"
Title="Drive Plus Mobile"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Orientation="Vertical" Spacing="1">
<Label Text="TopBar ..." BackgroundColor="Gray" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center"/>
<!-- Project Search/Filter toolbar-->
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
<Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
<Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
<Button Text="++" WidthRequest="27" HeightRequest="27" Clicked="CreateProject_Clicked"></Button>
</StackLayout>
</StackLayout>
<Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />
<ListView x:Name="lvProjects" ItemTapped="OnProjectTapped" RowHeight="54" BackgroundColor="DarkGray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Project Row -->
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
<Button
Image="Colombia.png"
BackgroundColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="54"
HeightRequest="54"
>
</Button>
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label
Text="{Binding Name}"
TextColor="Black"
Font="Bold,17"
HorizontalOptions="StartAndExpand"
VerticalOptions="Start"
/>
<Label
Text="{Binding Brand}"
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<Label
Text=".."
TextColor="Black"
HorizontalOptions="Start"
VerticalOptions="End"
/>
</StackLayout>
<Button Text="3" WidthRequest="44"></Button>
<Button Text=">" WidthRequest="44" BackgroundColor="White" ></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="End" VerticalOptions="End" Spacing="0" Margin="15">
<views:FloatingActionButton
Image="CreateProject.png"
WidthRequest="80"
HeightRequest="80"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Clicked="FloatingActionButton_Clicked"
>
</views:FloatingActionButton>
</StackLayout>
</Grid>
</ContentPage>
i need a trick, i have in my xamarin.forms app a listview, but it don't feel my screen, and it's orrible to see it now, because it take off a quarter of screen without nothing, could you helo me?
XAML:
<ContentPage.Content>
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="WhiteSmoke">
<ListView x:Name="ItemsListView"
HeightRequest="000" <--this is the bad thing
VerticalOptions="FillAndExpand"
HasUnevenRows="true"
IsPullToRefreshEnabled="true"
Refreshing="OnRefresh"
CachingStrategy="RecycleElement"
ItemSelected="OnItemSelected"
SeparatorVisibility="Default"
BackgroundColor="Transparent">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Clicked="MenuItem_Clicked" CommandParameter="{Binding .}" Text="Delete" IsDestructive="True" />
</ViewCell.ContextActions>
<ViewCell.View>
<Grid Margin="0,0,0,15">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Orientation="Horizontal" BackgroundColor="White" Padding="10">
<controls:CircleImage Source="{Binding UserPicture}" WidthRequest="40" HeightRequest="40" Aspect="AspectFit" VerticalOptions="Start"/>
<StackLayout Orientation="Vertical" Padding="5" Spacing="20">
<StackLayout Orientation="Vertical" Spacing="2">
<Label Text="{Binding Title}" LineBreakMode="TailTruncation" Style="{DynamicResource ListItemTextStyle}"
FontSize="18" FontAttributes="Bold" TextColor="Black"/>
<Label Text="{Binding UserName}" LineBreakMode="NoWrap" Style="{DynamicResource ListItemDetailTextStyle}"
FontSize="14" />
</StackLayout>
<BoxView HeightRequest="1" WidthRequest="250" BackgroundColor="LightGray"/>
<StackLayout Orientation="Horizontal" VerticalOptions="End" >
<StackLayout Orientation="Horizontal">
<Image Source="people.png" WidthRequest="20" HeightRequest="20" />
<Label Text="{Binding Posti}" LineBreakMode="NoWrap" Style="{DynamicResource ListItemDetailTextStyle}"
FontSize="14" />
<Label Text="/" LineBreakMode="NoWrap" Style="{DynamicResource ListItemDetailTextStyle}"
FontSize="14" />
<Label Text="{Binding Participants}" LineBreakMode="NoWrap" Style="{DynamicResource ListItemDetailTextStyle}"
FontSize="14" />
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<fab:FloatingActionButtonView
ImageName="add.png"
ColorNormal="#2196F3"
ColorPressed="#2196F3"
ColorRipple="#2196F3"
x:Name="FloatingActionButtonAdd"
IsVisible="False"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="1, 1, AutoSize, AutoSize"/>
</AbsoluteLayout>
</ContentPage.Content>
I want the heghtrequest will scale automatically with the device or have a standard heght for any devices
Because you are using absolutelayout around your listview you should try as below. add these on your listview VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1"
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="WhiteSmoke">
<ListView x:Name="ItemsListView" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,1,1,1"
HasUnevenRows="true"
IsPullToRefreshEnabled="true"
Refreshing="OnRefresh"
CachingStrategy="RecycleElement"
ItemSelected="OnItemSelected"
SeparatorVisibility="Default"
BackgroundColor="Transparent">
read more about absolutelayout here. in my code
AbsoluteLayout.LayoutBounds="0,0,1,1"
tells you to start from position vertical 0, horizontal 0 and align the UI as large as the screen. you dont need to use HeightRequest in this case as it will take the screen size dynamically.
Here is simple style and code you can change it to your own
<RelativeLayout><ListView x:Name="MessagesListView" HasUnevenRows="True" IsPullToRefreshEnabled ="true" SeparatorVisibility="None"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=.92,Constant=0}">
</ListView></RelativeLayout>
I want make ui like this image.
but I don't know how can I make expandable listview in grid.
<?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="ElronWebtoon_Test.myLibrary.LibTab" BackgroundColor="White">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition x:Name="TopGrid"/>
<RowDefinition />
<RowDefinition x:Name="menuRow"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" x:Name="GlobalLayout" >
<Grid.RowDefinitions>
<RowDefinition x:Name="TopBtn_Grid"/>
<RowDefinition x:Name="menu_Grid"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" VerticalOptions="Start" >
<Label x:Name="labelBox1" Text="LabelBox1" Font="Bold, 16" TextColor="Black" HorizontalOptions="Start" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" VerticalOptions="Center" Grid.Column="0" BackgroundColor="#A8D2F1">
<Label.GestureRecognizers>
<TapGestureRecognizer/>
</Label.GestureRecognizers>
</Label>
<Label x:Name="LabelBox2" Text="LabelBox2" Font="Bold, 16" TextColor="Black" HorizontalOptions="End" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" VerticalOptions="Center" Grid.Column="0" BackgroundColor="#A8D2F1">
<Label.GestureRecognizers>
<TapGestureRecognizer />
</Label.GestureRecognizers>
</Label>
</Grid>
<Grid Grid.Row="1" x:Name="libMenu" RowSpacing="0" HorizontalOptions="CenterAndExpand">
<Grid Grid.Column="0" x:Name="menuGrid_1" HorizontalOptions="Center">
<Button BorderRadius="30" BorderColor="Black" BorderWidth="2" BackgroundColor="White" VerticalOptions="Center"/>
<Label x:Name="BtnText1" Text="BtnText1" TextColor="Black" VerticalOptions="Center" HorizontalOptions="Center" VerticalTextAlignment="Center"/>
</Grid>
<Grid Grid.Column="1" x:Name="menuGrid_2" HorizontalOptions="Center">
<Button BorderRadius="30" BorderColor="Black" BorderWidth="2" BackgroundColor="White" VerticalOptions="Center"/>
<Label x:Name="BtnText2" Text="BtnText2" TextColor="Black" VerticalOptions="Center" HorizontalOptions="Center" VerticalTextAlignment="Center"/>
</Grid>
<Grid Grid.Column="2" x:Name="menuGrid_3" HorizontalOptions="Center">
<Button BorderRadius="30" BorderColor="Black" BorderWidth="2" BackgroundColor="White" VerticalOptions="Center"/>
<Label x:Name="BtnText3" Text="BtnText3" TextColor="Black" VerticalOptions="Center" HorizontalOptions="Center" VerticalTextAlignment="Center"/>
</Grid>
</Grid>
</Grid>
<Grid Grid.Row="1" VerticalOptions="Fill" x:Name="inner_Content">
</Grid>
<Grid Grid.Row="2" >
<Grid>
<Button Text="BTN1" Grid.Column="0" />
<Button Text="BTN2" Grid.Column="1"/>
<Button Text="BTN3" Grid.Column="2"/>
<Button Text="BTN4" Grid.Column="3"/>
<Button Text="BTN5" Grid.Column="4"/>
</Grid>
</Grid>
</Grid>
</ContentPage>
this is my sample code.
I want insert expandable listview in Grid, named inner_Content in this code.
but if I searching expandable listview, that only in contentPage.
not in grid.
can you help me?
I guess you are looking something like an accordion control to be used in Xamarin.
Check the URL below:
https://www.codeproject.com/Articles/1088093/Simple-Accordion-User-Control-in-Xamarin-Forms
Hope this helps, mark this as an answer if you think this meets your requirement.
Regards,
N Baua
I am using TableView in my application. The title under the TableSection is displayed on iOS but doesn't show up on Android. How can I fix that?
<TableView Intent="Settings" HasUnevenRows="true" BackgroundColor="#E7E7E7">
<TableRoot>
<TableSection Title="Child Info">
<ViewCell x:Name="Profile">
<StackLayout
BackgroundColor="White"
HeightRequest="40"
Orientation="Horizontal"
VerticalOptions="Start"
HorizontalOptions="Fill"
Padding="10">
<Label
Text="Child Profile"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Start" />
<Image
IsVisible="{Binding IsError}"
Source="ic_provider_error"
WidthRequest="30"
HeightRequest="30"
HorizontalOptions="Start"
VerticalOptions="Center" />
<Button
BackgroundColor="Transparent"
TextColor="Blue"
x:Name="profileSync"
Text="Sync"
VerticalOptions="CenterAndExpand"
HorizontalOptions="EndAndExpand"
Clicked="OnChildProfileClicked"
IsVisible="{Binding IsProgress, Converter={StaticResource inverter}}" />
<Label
Text="{Binding Content}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="EndAndExpand"
IsVisible="{Binding IsProgress}" />
</StackLayout>