I was trying to write a Xamarin.Forms chat-app.
The problem is: On Android, as soon as the keyboard shows up the whole page (including the ActionBar) moves upwards. I could fix the problem on IOS by using a NuGet package that resizes the page.
I already tried to set WindowSoftInputMode = Android.Views.SoftInput.AdjustResize in the MainActivity.cs in the Android project but it didn't work.
I also tried to resize the page manually by recalculating the screen size, but I haven't found a solution to get the keyboard size for an exact calculation on different devices.
Has anyone had the same problem before?
Is there an official Xamarin.Forms solution for all supported platforms?
This is my chat layout so far:
<ContentPage.Content>
<StackLayout Padding="0">
<ScrollView>
<ListView HasUnevenRows="true" x:Name="lvChat" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" VerticalOptions="Fill" HorizontalOptions="Fill" Padding="5">
<Label Text="{Binding Author, StringFormat='{0}: '}" TextColor="Navy" FontSize="14" />
<Label Text="{Binding Text}" TextColor="Black" FontSize="15" />
<Label Text="{Binding Time}" TextColor="Black" FontSize="14" />
<!-- Format for time.. , StringFormat='{0:HH:mm}' -->
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
<StackLayout Orientation="Horizontal" Padding="0" Margin="5, 5, 5, 5">
<Entry Keyboard="Chat" x:Name="tbxChatInput" HorizontalOptions="FillAndExpand" Placeholder="Send a Message..." />
<Button x:Name="btnSendMsg" HorizontalOptions="End" Text="Send" Margin="5"/>
</StackLayout>
</StackLayout>
Thanks in advance!
Hi try putting the stacklayout that contains your input and send button inside the scrollview, that way when you tap on the input it pushes the keyboard up shows you your input and the rest of your chat works fine on both iOS and Android. Try this:
<ContentPage.Content>
<StackLayout Padding="0">
<ScrollView>
<StackLayout>
<ListView HasUnevenRows="true" x:Name="lvChat" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" VerticalOptions="Fill" HorizontalOptions="Fill" Padding="5">
<Label Text="{Binding Author, StringFormat='{0}: '}" TextColor="Navy" FontSize="14" />
<Label Text="{Binding Text}" TextColor="Black" FontSize="15" />
<Label Text="{Binding Time}" TextColor="Black" FontSize="14" />
<!-- Format for time.. , StringFormat='{0:HH:mm}' -->
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackLayout Orientation="Horizontal" Padding="0" Margin="5, 5, 5, 5">
<Entry Keyboard="Chat" x:Name="tbxChatInput" HorizontalOptions="FillAndExpand" Placeholder="Send a Message..." />
<Button x:Name="btnSendMsg" HorizontalOptions="End" Text="Send" Margin="5"/>
</StackLayout>
</StackLayout>
</ScrollView>
</StackLayout>
</ContentPage.Content>
Try setting windowSoftInputMode in your Android Manifest for example:
<application ... >
<activity
android:windowSoftInputMode="adjustResize" ... >
...
</activity>
...
</application>
Related
I've encountered a problem in Xamarin.Forms while trying to display grouped lists of items in a BindableLayout.
Following scenario:
I've want to display groups of items with a title in a frame, and the items in another frame underneath. Like in the following screenshot:
This works fine for me until the point, an item is too long and needs a line break, then the whole layout breaks and the groups overlap:
I tried removing the ScrollView, removing the TitleFrame but none works; it seems that the height calculation of the frame containing the items does ignore the labels wrapped height during layouting of the outer StackLayout.
Is there some issue with my code, or is it a BUG in Xamarin?
Please find my example code here at GitHub.
PS: The issue is on Android AND iOS.
EDIT://
Code of page as requested:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamarinTestProject.MainPage">
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Padding="24">
<ScrollView AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" Margin="0,0,0,75" >
<StackLayout HorizontalOptions="Fill" Padding="0" Margin="0" BindableLayout.ItemsSource="{Binding ItemContainers}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<AbsoluteLayout Margin="0" >
<!-- TITLE -->
<Frame AbsoluteLayout.LayoutBounds="0,0,40,40" AbsoluteLayout.LayoutFlags="None" Margin="0" Padding="0" BackgroundColor="Gray" BorderColor="Green" >
<Label Text="{Binding Title}" VerticalOptions="Center" HorizontalOptions="Center" />
</Frame>
<!-- ITEMS -->
<Frame AbsoluteLayout.LayoutBounds="0,52,1,AutoSize" AbsoluteLayout.LayoutFlags="WidthProportional" Background="Gray" BorderColor="Red">
<StackLayout Padding="0" Margin="0" BindableLayout.ItemsSource="{Binding Items}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label Text="{Binding .}" />
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</Frame>
</AbsoluteLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
<Button AbsoluteLayout.LayoutBounds="0.65,1,0.25,50" AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional" Text="Add" Command="{Binding AddCommand}" />
<Button AbsoluteLayout.LayoutBounds="1,1,0.25,50" AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional" Text="Clear" Command="{Binding ClearCommand}" />
<StackLayout Orientation="Horizontal" AbsoluteLayout.LayoutBounds="0,1,0.45,50" AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional" >
<Label Text="Multiline" FontSize="Small" HorizontalOptions="EndAndExpand" VerticalOptions="Center" />
<Switch HorizontalOptions="End" VerticalOptions="Center" IsToggled="{Binding Multiline}" />
</StackLayout>
</AbsoluteLayout>
Problem with listview on Xamarin Forms iOS
Hello, I have a cross-platform app, I put a ListView with some items, on android it's all right, but on iOS there's a blank space that I'm not able to correct...
I've already reviewed the code and I can't find what's wrong.
Has anyone seen this error or already gone through it?
Here is my image:
Blank is my content page.
Yellow is my ListView.
The blue square is the blank space I can't remove.
Red is the header of my list.
Here is my code:
XAML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="MensagemDoDia.Views.MensagemViews.MensagemDetailPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:extended="clr-namespace:MensagemDoDia.Engine.InfiniteScrolling"
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
xmlns:pancake="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
ios:Page.UseSafeArea="True">
<ContentPage.Content>
<Grid>
<ListView
BackgroundColor="Yellow"
CachingStrategy="RecycleElement"
HasUnevenRows="True"
ItemSelected="ListView_ItemSelected"
ItemsSource="{Binding ListaMensagem}"
Scrolled="ListView_Scrolled"
SeparatorVisibility="None">
<ListView.Behaviors>
<extended:InfiniteScrollBehavior IsLoadingMore="{Binding IsBusy}" />
</ListView.Behaviors>
<ListView.Header>
<StackLayout
Margin="{OnPlatform Android='10,0,10,0',
iOS='10,0,10,0'}"
BackgroundColor="Red"
HeightRequest="{OnPlatform Android=80,
iOS=70}"
Orientation="Horizontal">
<Button
Clicked="ButtonVoltar_Clicked"
Style="{StaticResource ButtonVoltarStyle}"
Text="{StaticResource FontAwesome_ArrowLeft}"
VerticalOptions="Center" />
<Label
x:Name="LabelNomeCategoria"
FontSize="Medium"
Opacity="0.7"
Style="{StaticResource LabelBoldStyle}"
VerticalTextAlignment="Center" />
</StackLayout>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<pancake:PancakeView
Margin="10,5"
Padding="0"
BackgroundColor="WhiteSmoke"
CornerRadius="15"
VerticalOptions="CenterAndExpand">
<pancake:PancakeView.Shadow>
<pancake:DropShadow BlurRadius="1" Color="Black" />
</pancake:PancakeView.Shadow>
<Grid RowDefinitions="*, 50" RowSpacing="0">
<Frame
Padding="0"
BackgroundColor="Gray"
CornerRadius="15"
HasShadow="False"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid>
<Label
Margin="20,30"
FontAttributes="Bold"
FontSize="Medium"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
Style="{StaticResource LabelMediumStyle}"
Text="{Binding MensagemTexto}"
TextColor="White"
TextType="Html"
VerticalOptions="FillAndExpand"
VerticalTextAlignment="Center" />
</Grid>
</Frame>
<Grid
Grid.Row="1"
ColumnDefinitions="*, auto, auto, auto"
ColumnSpacing="0">
<Label
Margin="15,0,0,0"
AutomationId="{Binding MensagemAutor}"
FontSize="Small"
HorizontalTextAlignment="Start"
LineBreakMode="TailTruncation"
MaxLines="1"
Opacity="0.7"
Style="{StaticResource LabelStyle}"
Text="{Binding MensagemAutor}"
TextColor="Black"
VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="LabelAutor_Tapped" />
</Label.GestureRecognizers>
</Label>
<Button
Grid.Column="1"
AutomationId="{Binding Chave}"
Clicked="ButtonCopiarMensagem_Clicked"
CornerRadius="15"
FontFamily="{StaticResource FontAwesome}"
FontSize="Medium"
Style="{StaticResource ButtonIconeStyle}"
Text="{StaticResource FontAwesome_Paste}"
VerticalOptions="CenterAndExpand"
WidthRequest="45" />
<Button
x:Name="ButtonCompartilhar"
Grid.Column="2"
AutomationId="{Binding Chave}"
Clicked="ButtonCompartilhar_Clicked"
CornerRadius="15"
FontFamily="{StaticResource FontAwesome}"
FontSize="Medium"
Style="{StaticResource ButtonIconeStyle}"
Text="{StaticResource FontAwesome_ShareAll}"
VerticalOptions="CenterAndExpand"
WidthRequest="45" />
<Button
x:Name="ButtonFavorito"
Grid.Column="3"
Margin="0,0,5,0"
Clicked="ButtonFavoritar_Clicked"
CornerRadius="15"
FontFamily="{StaticResource FontAwesome}"
FontSize="Medium"
HorizontalOptions="EndAndExpand"
Style="{StaticResource ButtonIconeStyle}"
Text="{StaticResource FontAwesome_Heart}"
VerticalOptions="CenterAndExpand"
WidthRequest="45" />
</Grid>
</Grid>
</pancake:PancakeView>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Footer>
<Grid Padding="6" IsVisible="{Binding IsBusy}">
<Grid.Triggers>
<Trigger TargetType="Grid" Property="IsVisible" Value="False">
<Setter Property="HeightRequest" Value="0" />
</Trigger>
</Grid.Triggers>
<Label
HorizontalOptions="Center"
Text="Loading..."
VerticalOptions="Center" />
</Grid>
</ListView.Footer>
</ListView>
</Grid>
</ContentPage.Content>
</ContentPage>
Add VerticalAlignment to the ListView and set it to be either Top or Stretch. Possibly do the same for StackLayout.
You can optionally remove the parent Grid if it is not holding other items than the ListView; hence making the ListView the sole child of the ContentPage which is valid.
I am new in xamarin I wan to add a shadow effect to my frame and avoid the top border line of my frame, I tried "hasShadow" property of frame but that doesn't help me. How can I do this.
Please help me
Here is my Xaml
<ListView x:Name="lv_search" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" RowHeight="105" ItemTapped="lv_search_ItemTapped"
SeparatorColor="White" BackgroundColor="Black" Margin="0,15,0,0">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="White">
<Grid Margin="20,10,0,10" BackgroundColor="White">
<Frame BackgroundColor="White" >
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand" VerticalOptions="FillAndExpand" Margin="0,0,10,0">
<AbsoluteLayout HorizontalOptions="StartAndExpand">
<Image Source="ellipse_1" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand"
AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0.01,0.4,1,1" BackgroundColor="White"/>
<Image Source="{Binding Image}" AbsoluteLayout.LayoutBounds="0.02,0.4,1,1" AbsoluteLayout.LayoutFlags="All"
HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
</AbsoluteLayout>
<StackLayout AbsoluteLayout.LayoutBounds="0.035,0.5,1,1" AbsoluteLayout.LayoutFlags="All" Orientation="Horizontal"
HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand">
<Label x:Name="lbl_categories" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand"
Margin="10,0,0,0" FontFamily="Proxima-Nova-Semibold" TextColor="#222222" Text="{Binding Title}"
LineBreakMode="WordWrap" HorizontalTextAlignment="Start" FontSize="17.3" FontAttributes="Bold"/>
</StackLayout>
</StackLayout>
<Image HorizontalOptions="EndAndExpand" VerticalOptions="Center" Source="arrow"
AbsoluteLayout.LayoutBounds="0.9,0.3,0,0.3" AbsoluteLayout.LayoutFlags="All" />
</StackLayout>
</Frame>
</Grid>
<Image Source="img_frm" Margin="15,0,0,0" AbsoluteLayout.LayoutBounds="1,0.5,1,1" HorizontalOptions="StartAndExpand"
AbsoluteLayout.LayoutFlags="All"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The code gives this output
But I want a page like this
The page difference is marked by blue ink.
This article by Alex Dunn looks like what you want exactly:
https://alexdunn.org/2018/06/06/xamarin-tip-dynamic-elevation-frames/
Note that you can control the Elevation as much as you want
You can use the HasShadow="True" atribute on Frame definition.
Where did you place the HasShadow? It need to be like this
<i> <Frame HasShadow="True" ...> </Frame> </i>
I have a carousel view inside a stasklayout which is also inside a scroll view, the carousel view contains an image which is displayed in miniature, I want that the image is displayed in actual size.How to do it please?
<ScrollView>
<StackLayout>
<StackLayout VerticalOptions="Fill">
<cv:CarouselView ItemsSource="{Binding MediaItems}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<cv:CarouselView.ItemTemplate>
<DataTemplate>
<Image Aspect="AspectFit" HorizontalOptions="FillAndExpand" Source="{Binding Uri}" />
</DataTemplate>
</cv:CarouselView.ItemTemplate>
</cv:CarouselView>
</StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Text="{Binding tappedItem.ShortDesc}" IsVisible="{Binding ShortText,Mode=OneWay}" FontAttributes="Italic" FontFamily="Sans-serif" />
<Label Text="{Binding tappedItem.LongDesc}" IsVisible="{Binding LongText,Mode=OneWay}" FontAttributes="Italic"/>
<local:BorderlessButton Text="{Binding BtnText}" FontSize="Medium" TextColor="DodgerBlue" FontAttributes="None" Clicked="Button_Clicked" />
</StackLayout>
</ScrollView>
See is there any property for caursoel view like HasUnEvenRows property in listview.
This code is working :
<ListView ItemsSource="{Binding ItemsSourcePrimary}" VerticalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Padding="15, 5, 15, 5" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Image Source="{Binding IconSource}" Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="{Binding Title}" VerticalOptions="Center" />
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
But I would like to seperate a part into a class like this :
<ListView ItemsSource="{Binding ItemsSourcePrimary}" VerticalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<local:MenuListCell Title="{Binding Title}" IconSource="{Binding IconSource}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
But I have an error :
No Property of Text Name found
I implement the class MenuListCell in a xaml file with this code :
<?xml version="1.0" encoding="utf-8" ?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Test.MenuListCell">
<ViewCell.View>
<StackLayout Padding="15, 5, 15, 5" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Image Source="{Binding IconSource}" Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="{Binding Title}" VerticalOptions="Center" />
</StackLayout>
</ViewCell.View>
</ViewCell>
Do you have a solution ?
Do we need to create a c# file .cs in order to implement the properties or we can do it in xaml ?
If you bind the MenuListCell always to the same type of objects, you just have to change
<local:MenuListCell Title="{Binding Title}" IconSource="{Binding IconSource}" />
to
<local:MenuListCell />
The Datacontext of the cell is your item. So the Title in
<Label Text="{Binding Title}" VerticalOptions="Center" />
is a property of the list item.