In my Xamarin.Forms application, i have a CarouselView with images inside it.
I want to position the images inside the CarouselView on the top of the Carousel. i tried with VerticalOptions="Start" but it doesn't work.
Here is my Carousel Xaml:
<controls:CarouselViewControl
x:Name="TeaserCarouselView"
ShowIndicators="true"
InterPageSpacing="16"
CurrentPageIndicatorTintColor="#4A9630"
IndicatorsTintColor="#8bdc6f"
HeightRequest="300"
ItemsSource="{Binding MainTeaserImageUrls}">
<controls:CarouselViewControl.ItemTemplate>
<DataTemplate>
<ffimageloading:CachedImage
VerticalOptions="Start"
Source="{Binding .}">
</ffimageloading:CachedImage>
</DataTemplate>
</controls:CarouselViewControl.ItemTemplate>
</controls:CarouselViewControl>
The images are always in the center of the Carousel. How can i change this?
I figured it out. I just had to put the image inside a Grid. The Code above does not change except of the encapsulation of the ffimageloading inside a <Grid>. Now it works fine!
Related
My app contains a Flexlayout inside a scrollview. This flexlayout is used as a bindablelayout and contains some items. When there are enough items to fill the screen the vertical itemspacing is nicely done:
However, if the list gets smaller, and less items are visible, the vertical spacing becomes weird (I suspect the items want to fill out the whole available space, but I'm not sure of that):
I want the items to always have the same space between rows. Is this possible?
Xaml:
<ScrollView Margin="10" Grid.Row="1" x:Name="UserActionScrollView">
<FlexLayout x:Name="UserActionFlexLayout" BindableLayout.ItemsSource="{Binding DisplayedUserActions}" JustifyContent="Start" Wrap="Wrap" Direction="Row">
<BindableLayout.ItemTemplate>
<DataTemplate>
-- Datatemplate --
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
</ScrollView>
Based on your code, the main axis is horizontal direction with multiple lines. So you could set the alignment of cross axis(vertical direction) using AlignContent.
You could set like this:
<FlexLayout x:Name="UserActionFlexLayout" ... AlignContent="Start">
By the way, i think you could use CollectionView instead for this case. You could customize the layout you want. For example, you could use ItemsLayout property:
<CollectionView ItemsSource="{Binding DisplayedUserActions}">
<!--set 3 columns, and itemspacing for each direction-->
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="3" VerticalItemSpacing="20" HorizontalItemSpacing="20"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Also, you don't have to put it in a ScrollView as CollectionView can scroll itself.
For more info, you could refer to FlexLayout and Specify CollectionView layout
Hope it works for you.
I am currently working on a UI for an application and I want to align the following label Text automatically horizontally, so I wanted to test, how I can align text normally.
The Label Documentation of Maui state, that I have to do it with the HorizontalTextAlignment Element. I tried it several times and it worked, but here it won't:
<CollectionView Grid.Row="1" BackgroundColor="Black">
<CollectionView.ItemsSource>
<x:Array Type="{x:Type models:MessageModel}">
<models:MessageModel Message="Hallo" Created="01.01.2001 00:00:00"/>
<models:MessageModel Message="Hey na!" Created="01.01.2001 00:00:00"/>
</x:Array>
</CollectionView.ItemsSource>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:MessageModel">
<Label HorizontalTextAlignment="End" TextColor="White" Text="{Binding Created}"/>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
The Output is the following (And yeah I could use one Label, but I wanted to try both ways):
Edit: adding the following Element HorizontalOptions="FillAndExpand" at the label + a Background Color:
Edit2:
The CollectionView in Xamarin Forms does not support the Padding Property. Therefore the last item in the collection can be hidden behind overlaying items higher in the z-stack, like floating action buttons. Is there a workaround for this?
The best workaround I found is to use the Footer property of collectionview and add an empty, fixed height, transparent StackLayout to act as the missing padding.
<CollectionView ItemsSource="{Binding Items}" ... >
<CollectionView.Footer>
<!--A fixed height footer,to simulate bottom padding and keep the last item in view when scrolling-->
<StackLayout Padding="0,0,0,70" BackgroundColor="Transparent"/>
</CollectionView.Footer>
</CollectionView>
A simple workaround for that is to create a view that contains it, and create padding on this View. I think it is better than placing a footer.
I wanted to use a floating button in a project but used the Footer also for a button.
Then there is no problem with overlaying .
<CollectionView.Footer>
<StackLayout BackgroundColor="LightGray">
<Button Margin="10,0,0,0"
Text="Friends of Xamarin Monkey"
FontSize="Small"
FontAttributes="Bold"
Clicked="Button_Clicked"/>
</StackLayout>
</CollectionView.Footer>
I am using ImageCircle plugin for xamarin forms
and it works well sometimes, when the picture is a kind of square...
But, when it's a rectangle, my image is resized and it's not that I planned
what Can I do to the image stop resize?
my code
<controls:CircleImage WidthRequest="75" HeightRequest="75" Grid.Row ="0" Grid.Column="1" Source="cadastrarPhoto.png" x:Name="cadastrar_foto_perfil">
I seted a fix height and width as you can see, but it didn't solve my problem, maybe because this circle image is a child of a grid and its grandfather (lol) is a relative layout but I really don't know if WidthRequest can change because of that...
How it always should be
How it is when the image is a rectangle:
EDIT---------------------------------------------
I put it in a Stach layout and I defined Aspect as fit...it helped but didnt solve...
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" WidthRequest="75" HeightRequest="75" Grid.Row="0" Grid.Column="1">
<controls:CircleImage Aspect="AspectFit" VerticalOptions="EndAndExpand" HorizontalOptions="EndAndExpand" Source="cadastrarPhoto.png" x:Name="cadastrar_foto_perfil">
<controls:CircleImage.GestureRecognizers>
<TapGestureRecognizer Tapped="ChamaPickerImage"/>
</controls:CircleImage.GestureRecognizers>
</controls:CircleImage>
</StackLayout>
I changed the api that I was using.
Now I use ffimage
Setting your HorizontalOptions="EndAndExpand" is what is causing you issues.
Instead, try setting both HorizontalOptions and VerticalOptions to a vaule that doesn't expand (Start, Center, End)
Note: I've noticed that you actually have to explicitly set HorizontalOptions to something that doesn't expand in order to get iOS to avoid stretching your CircleImage. Simply leaving it blank will default to stretching the image.
In the image, instead of HorizontalOptions="EndAndExpand" or VerticalOptions="EndAndExpand", just set it as "Start", "Center" or "End".
By default if you set it as "xxExpand" or do not set it at all, Xamarin iOS expands the image...
I have content page in my xaml file. I have a Stacklayout with orientation vertical in it. I want to put a dialog in middle of content page above this stacklayout. Please suggest some way. Thanks in advance!
An easy way to provide dialogs that feel native to the platform your on is through using the UserDialogs plugin.
If you want to create something of your own you would probably have to come up with something like this:
<Grid>
<StackLayout>
...
</StackLayout>
<Grid IsVisible="{Binding ShowMessage}">
<Label Text="Message" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
</Grid>
The nested Grid will act as an overlay of sorts spanning your entire page.