center item in carouselView - xamarin.forms

I am struggling to get my item centered in the carousel view, as simple as this sounds for same reason the item always starts at starts.
I need to display the items one at the time.
<StackLayout x:Name="innerStack"
HorizontalOptions="CenterAndExpand">
<Label Text="tesyt"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"></Label>
<CarouselView HorizontalScrollBarVisibility="Never" BackgroundColor="Blue"
x:Name="carousel"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
HeightRequest="500"
> <CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" ItemSpacing="0"/>
</CarouselView.ItemsLayout>
<CarouselView.ItemsSource >
<x:Array Type="{x:Type Label}">
<Label Text="tesyt" TextColor="Green" Margin="10,0,0,0"
></Label>
<Label Text="tesyt" TextColor="Brown"></Label>
</x:Array>
</CarouselView.ItemsSource>
</CarouselView>
</StackLayout>

I am struggling to get my item centered in the carousel view。
If you want to set item center in carouselview, you can set HorizontalOptions="CenterAndExpand" and VerticalOptions="CenterAndExpand" for item in carouselview datatemplate.
And I find there are some error for carouselview.itemsource, you can refer to x:Array markup extension firstly, you can also take a look the following code:
<CarouselView
x:Name="carousel"
BackgroundColor="Blue"
HeightRequest="500"
HorizontalOptions="CenterAndExpand"
HorizontalScrollBarVisibility="Never"
VerticalOptions="CenterAndExpand">
<CarouselView.ItemsLayout>
<LinearItemsLayout ItemSpacing="20" Orientation="Horizontal" />
</CarouselView.ItemsLayout>
<CarouselView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>mono</x:String>
<x:String>monodroid</x:String>
<x:String>monotouch</x:String>
<x:String>monorail</x:String>
<x:String>monodevelop</x:String>
<x:String>monotone</x:String>
<x:String>monopoly</x:String>
<x:String>monomodal</x:String>
<x:String>mononucleosis</x:String>
</x:Array>
</CarouselView.ItemsSource>
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame
Margin="20"
BorderColor="Red"
CornerRadius="5"
HasShadow="True"
HeightRequest="50"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<Label
HorizontalOptions="CenterAndExpand"
Text="{Binding .}"
VerticalOptions="CenterAndExpand" />
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>

Related

Fill items Horizentally in CollectionView each taking screen width in xamarin forms

I am trying to place items in CollectionView horizentally in one row as each item should fill the screen width. However, in the current setup it doesn't fill width of the screen. What I am looking is one item at a time in the horizental direction.
<DataTemplate x:Key="UpdateRecentItemTemplate">
<ContentView BackgroundColor="Yellow" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<yummy:PancakeView Style="{StaticResource Pancake}" VerticalOptions="Center" HeightRequest="80" BackgroundGradientStartPoint="0,0" BackgroundGradientEndPoint="0,1">
<yummy:PancakeView.Shadow>
<yummy:DropShadow Color="{Binding BindingContext.FirstColor, Source={x:Reference MyPage}}" BlurRadius="1"></yummy:DropShadow>
</yummy:PancakeView.Shadow>
<yummy:PancakeView.BackgroundGradientStops>
<yummy:GradientStopCollection>
<yummy:GradientStop Color="{Binding BindingContext.FirstColor, Source={x:Reference MyPage}}" Offset="0" />
<yummy:GradientStop Color="{Binding BindingContext.SecondColor, Source={x:Reference MyPage}}" Offset="1" />
</yummy:GradientStopCollection>
</yummy:PancakeView.BackgroundGradientStops>
<StackLayout VerticalOptions="Center" BackgroundColor="Transparent">
<Label Grid.Row="0">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding ChapterID, StringFormat=' {0} '}" FontSize="Small"/>
<Span Text="{Binding ArabicEnglishName, StringFormat=' {0} '}" FontSize="Medium" FontAttributes="Bold"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Grid.Row="1">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding AyaNumber, StringFormat=' Ayat No. {0}'}" FontSize="Medium"/>
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
</yummy:PancakeView>
</ContentView>
[![<Grid HeightRequest="140" Padding="0" BackgroundColor="Red">
<CollectionView ItemsSource="{Binding Recents}"
VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never" HorizontalOptions="FillAndExpand"
ItemTemplate="{StaticResource UpdateRecentItemTemplate}" x:Name="RecentView">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Horizontal" HorizontalItemSpacing="5" Span="1" />
</CollectionView.ItemsLayout>
</CollectionView>
</Grid>
The easiest would be to use Carouselview instead of CollectionView. With Carouselview we can manage to show one item at a time horizentally. So changed CollectionView with Carouselview and it worked. Additionally, I had only 4 items to show one at a time, so in this case Carouselview is more approperiate then CollectionView.

Xamarin.Forms Why so much space between two stacklayouts in PopUp view

```
<pages:PopupPage.Resources>
<local1:ChangeFrameBackgroudColor x:Key="ChangeFrameBackgroudColor" />
</pages:PopupPage.Resources>
<pages:PopupPage.Animation>
<animations:ScaleAnimation DurationIn="400"
DurationOut="300"
EasingIn="SinOut"
EasingOut="SinIn"
HasBackgroundAnimation="True"
PositionIn="Center"
PositionOut="Center"
ScaleIn="1.2"
ScaleOut="0.8" />
</pages:PopupPage.Animation>
<StackLayout Margin="12"
BackgroundColor="WhiteSmoke"
HorizontalOptions="Center"
VerticalOptions="Center"
>
<StackLayout>
<ListView x:Name="list" HasUnevenRows="True" ItemsSource="{Binding Firms}" SelectedItem="{Binding FirmId} " Header="{Binding}" ItemTapped="Choose_firm" SelectionMode="Single" Margin="0" >
<ListView.ItemTemplate >
<DataTemplate>
<local:ExtendedViewCell SelectedBackgroundColor="WhiteSmoke" >
<StackLayout Padding="20, 10" >
<Frame x:Name="frameLabel" BorderColor="#2188ff" BackgroundColor="{Binding IsActive, Converter={StaticResource ChangeFrameBackgroudColor}}" CornerRadius="10">
<Label FontAttributes="Bold" FontSize="18" TextColor="Black" Text="{Binding Name}" ></Label>
</Frame>
</StackLayout>
</local:ExtendedViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.HeaderTemplate>
<DataTemplate>
<ContentView BackgroundColor="#006BE6" >
<Label Margin="10" HorizontalOptions="CenterAndExpand" Text="Choose Firm" TextColor="White" FontSize="20" FontAttributes="Bold"/>
</ContentView>
</DataTemplate>
</ListView.HeaderTemplate>
</ListView>
<StackLayout VerticalOptions="End" Orientation="Horizontal" >
<Label Text="Check Default:" FontSize="18" />
<CheckBox IsChecked="False" Color="#006BE6" ></CheckBox>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,0,0,10">
<Button Text="CHANGE" BackgroundColor="#006BE6" IsEnabled="{Binding !IsBusy}" TextColor="White" Command="{Binding LoadFirmCommand}" CommandParameter="{Binding FirmId}" CornerRadius="10"></Button>
<Button Text="CANCEL" BackgroundColor="Gray" IsEnabled="{Binding !IsBusy}" TextColor="White" Clicked="ClosePopUp" CornerRadius="10"></Button>
</StackLayout>
</StackLayout>
</pages:PopupPage>
In first StackLayout i got ListView with only 3 elements. After that is lot empty space , and at the bottom of the PopUp are other two StackLayouts. I tried with Margins , Padding but nothing changed. I don't know what is the problem. Why is so much space. The bottom two StackLayouts dont have space between. How to solve this empty space?
I have not ran your code, but, looking at your XAML I can see that for your stack layout in the vertical option we tell it to end
<StackLayout VerticalOptions="End" Orientation="Horizontal" >
<Label Text="Check Default:" FontSize="18" />
<CheckBox IsChecked="False" Color="#006BE6" ></CheckBox>
However, Note how it is wrapped in the parent stack layout. Since it doesn't have a height request, it simply obeys what it was told to do. The parent stacklayout is the one where the list view is defined. So it loads the list view and then it renders the other stack layout at the bottom (End), does causing the massive gap
so in essence:
<StackLayout VerticalOptions="End" Orientation="Horizontal" >
<Label Text="Check Default:" FontSize="18" />
<CheckBox IsChecked="False" Color="#006BE6" ></CheckBox>
</StackLayout>
</StackLayout>
Goes To:
</StackLayout>
<StackLayout VerticalOptions="End" Orientation="Horizontal" >
<Label Text="Check Default:" FontSize="18" />
<CheckBox IsChecked="False" Color="#006BE6" ></CheckBox>
</StackLayout>

Xamarin.Forms when click on ListView ViewCell background color changed to orange , but not initialized to a color

This is my code
<ListView x:Name="listViewClient" ItemsSource="{Binding Client}" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell >
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<BoxView Grid.Column="0" Color="#84DCC6"/>
<StackLayout Grid.Column="1" Padding="20, 10">
<Frame BorderColor="WhiteSmoke">
<StackLayout>
<Label Text="Name:" FontSize="16" />
<Label FontSize="Medium" Text="{Binding Name}" FontAttributes="Bold" />
</StackLayout>
</Frame>
<Frame BorderColor="WhiteSmoke">
<StackLayout>
<Label Text="Adress:" FontSize="16"/>
<Label FontSize="Medium" Text="{Binding Adress}" FontAttributes="Bold"/>
</StackLayout>
</Frame>
<Frame BorderColor="WhiteSmoke">
<StackLayout>
<Label Text="Place:" FontSize="16"/>
<Label FontSize="Medium" Text="{Binding Place}" FontAttributes="Bold" />
</StackLayout>
</Frame>
<Frame BorderColor="WhiteSmoke" >
<Grid >
<StackLayout Grid.Column="0">
<Label Text="Mobile:" FontSize="16"/>
<Label FontSize="Medium" Text="{Binding Mobile}" FontAttributes="Bold" />
</StackLayout>
<Button Grid.Column="1" Text="Call" Clicked="PovikajPartnerClicked" BackgroundColor="#84DCC6"></Button>
</Grid>
</Frame>
<Frame BorderColor="WhiteSmoke">
<StackLayout>
<Label Text="Е-mail:" FontSize="16"/>
<Label FontSize="Medium" Text="{Binding EMAIL}" FontAttributes="Bold" />
</StackLayout>
</Frame>
<Frame BorderColor="WhiteSmoke">
<StackLayout>
<Label Text="LAW:" FontSize="16"/>
<Label FontSize="Medium" Text="{Binding LAW}" FontAttributes="Bold" />
</StackLayout>
</Frame>
<Frame BorderColor="WhiteSmoke
">
<StackLayout>
<Label Text="SECNUM:" FontSize="16"/>
<Label FontSize="Medium" Text="{Binding SECNUM}" FontAttributes="Bold" />
</StackLayout>
</Frame>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I dont know from where get that orange background color when i tap on the listview. From the code you can see that i dont have choosed samo backgroud color . Is there a default tap event to make the color orange? I tried everything but cant find is there anyplace i forgot to add a color.
I know this may be a bit late, but I hope it will help someone, Just go your styles.xml file under AppName.Android/Resources/values and inside your Main Theme add the following:
<item name="android:colorActivatedHighlight">#android:color/transparent</item>
That is the default selection colour of your ListView that comes from the theme of your App that Xamarin by default has set in the template to solve it just add the following to your ListView
<ListView SelectionMode="None" ..../>
I am late to the party, but this solution I found on Grepper might be helpful. It is simple and is unique for each content page.
You can alter the background color of the current cell and the previous cell using the ViewCell Tapped event.
XAML:
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Tapped="ViewCell_Tapped" >
<Label Text="{Binding Name}" TextColor="DarkGoldenrod" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
In your code add:
ViewCell lastCell;
private void ViewCell_Tapped(object sender, System.EventArgs e)
{
if (lastCell != null)
lastCell.View.BackgroundColor = Color.Transparent;
var viewCell = (ViewCell)sender;
if (viewCell.View != null)
{
viewCell.View.BackgroundColor = Color.LightGray;
lastCell = viewCell;
}
}

Xamarin Formns: Multiple empty rows getting created after the data in list view

PFB the code for my list view,
<ListView HasUnevenRows="true" ItemsSource="{Binding UserEmailList}" IsGroupingEnabled="true">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Vertical" Spacing="0" Margin="0" Padding="0">
<BoxView Style="{StaticResource separator}"></BoxView>
<Label Text="{Binding Heading}" Style="{StaticResource labelHeaderTitle}" />
<BoxView Style="{StaticResource separator}"></BoxView>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Horizontal" Spacing="0" >
<StackLayout IsVisible="{Binding UserEmailDetails.HasEmailAddress}" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label Text="{Binding UserEmailDetails.EmailAddress}" Style="{StaticResource labelListItem}" HorizontalOptions="FillAndExpand">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="SelectEmailAddress_Tapped" CommandParameter="{Binding UserEmailDetails}" />
</Label.GestureRecognizers>
</Label>
<Image HeightRequest="16" HorizontalOptions="End" VerticalOptions="Center" Source="arrow.png" Margin="0,0,15,0">
</Image>
</StackLayout>
<StackLayout IsVisible="{Binding UserEmailDetails.HasEmailAddress, Converter={StaticResource NotConverter}}" Padding="15,0,0,0">
<Label Text="Add email" Style="{StaticResource labelLink}">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="SelectEmailAddress_Tapped" CommandParameter="{Binding UserEmailDetails}" />
</Label.GestureRecognizers>
</Label>
</StackLayout>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Even if there are only two rows, on IOS multiple empty rows are getting populated as in the below snapshot.
Please let me know how to avoid this and hav things working in both Android and IOS
I would hide the Separator by setting SeparatorVisibility="None" on ListView Property. If you still need the Separator I would define in the ViewCell.
<ListView HasUnevenRows="true" SeparatorVisibility="None">
The other way is to put Empty Footer on List View:
<ListView>
<ListView.Footer>
<Label />
</ListView.Footer>
</ListView>
I hope one of these helps you. Let me know if anything.

xamarin forms - image wrapped in frame(with property cornerRadius set) not showing round corners

I am trying to create layout similar to Android cardview.
My progress for now.
image1
As you can see It looks guide well. However when I change Image property Aspect="Fill" to Aspect="AspectFill" images would lost round corners.
image2
My code
<Frame
VerticalOptions="Start"
Margin="8"
CornerRadius="10"
Padding="0"
BackgroundColor="White"
IsClippedToBounds="False">
<StackLayout Spacing="0">
<Image
HeightRequest="150"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
/>
<StackLayout
Spacing="1"
Margin="8"
>
<Label
FontFamily="{StaticResource MontserratMedium}"
TextColor="Black"
Text="{Binding Title}">
</Label>
<StackLayout
Orientation="Horizontal"
>
<Label
FontFamily="{StaticResource MontserratMedium}"
FontSize="13"
TextColor="{StaticResource TextColorDate}"
Text="Price">
</Label>
<Label
FontFamily="{StaticResource MontserratBold}"
FontSize="13"
HorizontalOptions="EndAndExpand"
TextColor="{StaticResource TextColorCash}"
Text="{Binding Price,StringFormat='{0}K'}">
</Label>
</StackLayout>
</StackLayout>
</StackLayout>
</Frame>
Is there solution to have Image with property Aspect="AspectFill" and with rounded corners?

Resources