Elongated Carousel View
I have used Xamarin's native CarouselView as below and it is retrieving data as it is supposed to.
The problem is that the individual columns are too long (elongated more than the content). I want an effect similar to that of shopping sites where the individual column height fits the content as with ASP.NET DIV Card. I have tried to use two carousels to see if it is a bug but both carousels expand beyond the height needed.
I have tried using StackLayout the problem still persists. Is there a simple template that you can direct me to or some correction that is needed?
//James
<?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:xct="http://xamarin.com/schemas/2020/toolkit"
x:Class="ApplicationName.Views.HomePage">
<ContentPage.ToolbarItems>
<ToolbarItem x:Name="tlbarLogin" Text="Sign Up/Login" Clicked="Launch_Login"/>
</ContentPage.ToolbarItems>
<ContentPage.Resources>
<ResourceDictionary>
<Color x:Key="Accent">#96d1ff</Color>
</ResourceDictionary>
</ContentPage.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout BackgroundColor="#2C5C2C" VerticalOptions="FillAndExpand" HorizontalOptions="Fill">
<SearchBar BackgroundColor="White" Placeholder="Search items..." PlaceholderColor="LightGray"
CancelButtonColor="black"
TextColor="Black"
FontSize="Medium"
/>
</StackLayout>
<ScrollView Grid.Row="1">
<!--<StackLayout Orientation="Vertical" Padding="30,24,30,24" Spacing="10">-->
<Grid Margin="0, 5, 0, 0">
<Grid.RowDefinitions>
<!--One RowDefinition in * si useless by the way -->
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackLayout>
<CarouselView x:Name="TheCarousel" PeekAreaInsets="50" Loop="False" Grid.ColumnSpan="5">
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame HasShadow="True"
BorderColor="DarkGray"
CornerRadius="5"
Margin="10"
VerticalOptions="Start" >
<StackLayout >
<Image Source="{Binding strImagePath}" Aspect="AspectFill"/>
<Label Text="{Binding strLocalisedString}" FontSize="20"/>
</StackLayout>
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<CarouselView x:Name="TheCarousel2" PeekAreaInsets="50" Loop="False" Grid.ColumnSpan="5">
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame HasShadow="True"
BorderColor="DarkGray"
CornerRadius="5"
Margin="10"
HeightRequest="50"
VerticalOptions="Start" >
<StackLayout >
<Image Source="{Binding strImagePath}" Aspect="AspectFill"/>
<Label Text="{Binding strLocalisedString}" FontSize="20"/>
</StackLayout>
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</StackLayout>
<!--</StackLayout>-->
</Grid>
</ScrollView>
</Grid>
</ContentPage>
Adding Height to Carousel as suggested by Jason worked
I simply added the HeightRequest value to the CarouselVeiw elements and they adjusted themselves to the set height of "250".
Related
So have following xaml that has a code behind method named HotelReservationOption_Tapped that does not fire in Android only. I am using version 18.3.0.40 for Syncfusion.Xamarin.SFListView.
Using Xamarin.Forms v4.8.0.560
<StackLayout x:Name="ActiveList" IsVisible="{Binding IsActiveListVisible}" Padding="0" Spacing="0" Margin="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<syncfusion:SfListView AutoFitMode="Height" ItemsSource="{Binding ReservationListActive}" SelectionBackgroundColor="Transparent" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Margin="0,10,0,0">
<syncfusion:SfListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<ScrollView VerticalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Margin="20,9,20,14" Orientation="Horizontal">
<StackLayout Orientation="Vertical" Spacing="6">
<Label Text="{Binding HotelName}" TextColor="{StaticResource LabelColor}" FontSize="18"/>
<StackLayout Orientation="Horizontal" Spacing="9">
<Image Source="calendarPageEmpty1"/>
<Label Text="{Binding HotelName}" TextColor="{StaticResource LightGrey2}" FontSize="14"/>
</StackLayout>
</StackLayout>
<Image HorizontalOptions="EndAndExpand" Source="dots.png" HeightRequest="20" WidthRequest="20" BackgroundColor="Transparent">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="HotelReservationOption_Tapped" CommandParameter="{Binding HotelID}"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
<BoxView Grid.Row="1" HeightRequest="1" Color="{StaticResource LineColor}"/>
</Grid>
</ScrollView>
</StackLayout>
</ViewCell>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
</StackLayout>
Is anyone aware of any bugs specific to Android for this control?
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 .
Using StartAndExpand or EndAndExpand does not seem to actually expand the elements inside StackLayout. Even though there is more space available as seen in the blue area. Only FillAndExpand works.
Here is the code:
<?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:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
xmlns:local="clr-namespace:App6"
x:Class="App6.MainPage"
ios:Page.UseSafeArea="True">
<StackLayout BackgroundColor="Blue"
HeightRequest="100"
Orientation="Horizontal"
Spacing="0"
VerticalOptions="Start">
<Label BackgroundColor="Red"
HorizontalOptions="Start"
Text="Hi" />
<StackLayout BackgroundColor="Salmon"
HorizontalOptions="EndAndExpand"
Orientation="Vertical">
<BoxView BackgroundColor="Red"
HeightRequest="30"
HorizontalOptions="End"
VerticalOptions="Center"
WidthRequest="30" />
</StackLayout>
</StackLayout>
</ContentPage>
And here is what I get:
Top result is when using FillAndExpand for the child StackLayout, followed by EndAndExpand which does not expand, and lastly StartAndExpand, which also does not expand.
Isn't expand supposed to expand the element if the parent element has more space? If yes, why then StartAndExpand and EndAndExpand does not work?
Note: This is tested on Android only with Xamarin.Forms version 3.4.0.1008975.
Referring to #AndroDevil comment, the space is actually distributed between StackLayout's child elements, but they cannot fill it, unless their layout option contains Fill. It works more or less like FlexLayout's space between option.
I just added another element to the StackLayout, and it is clearer now what is going on.
Here is the code:
<?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:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
xmlns:local="clr-namespace:App6"
x:Class="App6.MainPage"
ios:Page.UseSafeArea="True">
<StackLayout BackgroundColor="Blue"
HeightRequest="100"
Orientation="Horizontal"
Spacing="0"
VerticalOptions="Start">
<Label BackgroundColor="Red"
HorizontalOptions="Start"
Text="Hi" />
<Label BackgroundColor="Red"
HorizontalOptions="EndAndExpand"
Text="Bye" />
<StackLayout BackgroundColor="Salmon"
HorizontalOptions="EndAndExpand"
Orientation="Vertical">
<BoxView BackgroundColor="Red"
HeightRequest="30"
HorizontalOptions="End"
VerticalOptions="Center"
WidthRequest="30" />
</StackLayout>
</StackLayout>
</ContentPage>
And here what I get:
So Expand mean the following:
StartAndExpand: Give me more space, but put me to the left.
CenterAndExpand: Give me more space, but put me in the center.
EndAndExpand: Give me more space, but put me to the right.
FillAndExpand: Give me more space, I am gonna fill it.
Cause: When you add labels in stackLayout ,stackLayout will not make the subviews fit the size.
Solution:
Put the labels in a Grid. Refer the following code.
For example: If you want to set the label "Hi" as half of width of screen
<Grid BackgroundColor="Blue" >
<Grid.RowDefinitions>
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label HeightRequest="100" Grid.Row="0" Grid.Column="0" Text="Hi" BackgroundColor="Red" />
<BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Red"
HeightRequest="30"
HorizontalOptions="End"
VerticalOptions="Center"
WidthRequest="30"/>
</Grid>
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