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>
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 want to enable user to resize the NavigationView in my UWP app. Couldn't find any resources how I could do that.
I see some of the apps have "Resizable splitView" but for SplitView also, I cannot see any such resize property exposed to set by default.
Pls help.
Thanks in Advance
There are no such property can resize SplitView and NavigationView, you need to custom layout to implement a similar effect. You could use Slider control and bind the OpenPaneLength Property of SplitView to Slider.Value to do this. Please refer to the following code.
<Grid>
<SplitView Name="CoreSplitView"
DisplayMode="Inline"
IsPaneOpen="True"
OpenPaneLength="{Binding Value, ElementName=MasterSlider, Mode=OneWay}">
<SplitView.Pane>
<Grid Name="PaneGrid" Background="Gray">
<Slider Name="MasterSlider"
MinWidth="480"
VerticalAlignment="Stretch"
Maximum="480"
Minimum="10"
Opacity="0"
Value="150"
/>
<StackPanel Name="PaneStackPanel"
Margin="0,0,10,0" Background="LightGray">
<TextBlock TextWrapping="Wrap" Text="Use a slider when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).A slider is a good choice when you know that users think of the value as a relative quantity" />
</StackPanel>
</Grid>
</SplitView.Pane>
<Grid Name="ContentGrid" Background="LightSteelBlue">
</Grid>
</SplitView>
</Grid>
The StackPanel that is directly under our slider, acts like a cover for our Slider. Notice the StackPanel has Margin="0,0,10,0", this translates to a 10px distance from the right wall, which allows the Slider area to be exposed as a gray strip that is used to drag the Pane, again the 10px is arbitrary but it has to match the Minimum of the Slider.
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!
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.