How can I make this work ? My aim is to make a div that fulfills the screen, I'm searching the simpliest and proper way for it, but this does not work.
<StackLayout VerticalOptions="FillAndExpand" Background="Red">
<Button Text="Button Title"></Button>
</StackLayout>
Thank you.
The attribute should be BackgroundColor.
<StackLayout VerticalOptions="FillAndExpand" BackgroundColor="Red">
<Button Text="Button Title"></Button>
</StackLayout>
Related
I have a HorizontalStackLayout with elements in it added via the BindableLayout.Itemsource.
This is an example of what I mean:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="StackLayoutStretchTest.MainPage">
<VerticalStackLayout>
<HorizontalStackLayout
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="Green">
<BindableLayout.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Baboon</x:String>
<x:String>Capuchin Monkey</x:String>
<x:String>Blue Monkey</x:String>
<x:String>Squirrel Monkey</x:String>
<x:String>Golden Lion Tamarin</x:String>
<x:String>Howler Monkey</x:String>
<x:String>Japanese Macaque</x:String>
</x:Array>
</BindableLayout.ItemsSource>
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label Text="{Binding .}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
TextColor="White"
BackgroundColor="DarkBlue"/>
</DataTemplate>
</BindableLayout.ItemTemplate>
</HorizontalStackLayout>
<VerticalStackLayout HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Label Text="Text"
HorizontalTextAlignment="Center"
TextColor="Black"
BackgroundColor="White"/>
</VerticalStackLayout>
</VerticalStackLayout>
</ContentPage>
How can I make the Labels(Blue) FillAndExpand into the free space(Green)?
The Maui learn page says:
A HorizontalStackLayout only respects the alignment preferences on
child views that are in the opposite direction to the orientation of
the layout.
Is there a way to stretch the children, or what is the appropriate "container" for this use case?
Please be noted that it's a known issue that being tracked in [Bug] LayoutOptions Expand not work in HorizontalStackLayout and VerticalStackLayout . To be clear, the AndExpand options are deprecated, and are not supported in the new HorizontalStackLayout and VerticalStackLayout. As an alternative solution, you can achieve the same layout with a Grid. Or you can continue to use StackLayout for another choice.
I have an AbsoluteLayout on a view in my Xamarin.Forms app, with 3 buttons in it. After another control is added programmatically, it covers the buttons. I cannot figure out how I can make the buttons to be always in front.
<ContentPage.Content>
<AbsoluteLayout x:Name="Container" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Button
Style="{StaticResource CallButtonStyle}"
...
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".85,.02"
Text="{Binding CameraSwitchIcon}" />
<Button
...
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".15,.95,80,80"
Text="{Binding VideoToggleIcon}" />
<Button
...
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".85,.95,80,80"
Text="{Binding AudioToggleIcon}" />
</AbsoluteLayout>
</ContentPage.Content>
all XF Layouts have RaiseChild() and LowerChild() methods you can use to adjust the Z index
I have a problem. I recently had this problem: Xamarin forms Add button in TabbedPage, but that is fixed using the accepted anwser. In short, I am using a CarouselView and an IndicatorView, so I can have an overlay over multiple screens. Both the views replace my TabbedPage, but the IndicatorView needs to look like the TabbedPageBar. The only good page about styling an IndicatorView was this one: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/indicatorview.
Here is the page I have:
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
Padding="0"
Spacing="0">
<IndicatorView x:Name="indicatorView">
<IndicatorView.IndicatorTemplate>
<DataTemplate>
<StackLayout HorizontalOptions="FillAndExpand">
<Frame Margin="10">
<Label/>
</Frame>
</StackLayout>
</DataTemplate>
</IndicatorView.IndicatorTemplate>
</IndicatorView>
<CarouselView ItemTemplate="{StaticResource templateSelector}"
IndicatorView="indicatorView">
<CarouselView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
</x:Array>
</CarouselView.ItemsSource>
</CarouselView>
</StackLayout>
Now how can I let the IndicatorView look like a TabbedPageBar?
I think the key point here is remove the Shadow and CornerRadius of Frame, then you can customize the layout in the Frame. Here is an example:
<IndicatorView x:Name="indicatorView" >
<IndicatorView.IndicatorTemplate>
<DataTemplate>
<StackLayout HorizontalOptions="FillAndExpand" Spacing="0">
<Frame HasShadow="False" CornerRadius="0">
<StackLayout Orientation="Vertical">
<Image Source="Images"/>
<Label Text="123" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</IndicatorView.IndicatorTemplate>
</IndicatorView>
I work on a Xamarin.Forms app that will contain a page with 2 CollectionView items:
an horizontal CollectionView that will display events
a vertical CollectionView that will display posts
I would like that the first list is progressively hidden as soon as the user starts to scroll on the second list.
We can found this behaviour on a sample from Syncfusion: but they use a SfRotator as control for the horizontal list:
I've tried to reproduce the same behaviour on my page, but it doesn't work as expected. My horizontal list is not hidden until I scroll vertically on this first list itself. If I scroll on the second vertical list, the first list is still visible:
My XAML looks like this:
<ContentPage.Content>
<RefreshView x:DataType="vm:NewsViewModel"
IsRefreshing="{Binding IsRefreshing}"
Command="{Binding RefreshCommand}">
<ScrollView>
<StackLayout Padding="16" Spacing="16">
<CollectionView x:Name="EventsListView"
ItemsSource="{Binding Events}"
HeightRequest="250"
VerticalScrollBarVisibility="Never"
SelectionMode="None">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal"
ItemSpacing="20" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<ctrl:ShadowFrame BackgroundColor="Red">
<StackLayout x:DataType="model:Event" >
<Label Text="{Binding Name}" />
<Image Source="{Binding Image}" />
</StackLayout>
</ctrl:ShadowFrame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<CollectionView x:Name="NewsListView"
ItemsSource="{Binding News}"
VerticalScrollBarVisibility="Never"
SelectionMode="None">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical"
ItemSpacing="20" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<ctrl:ShadowFrame>
<StackLayout x:DataType="model:News">
<Label Text="{Binding Description}" />
<Label Text="{Binding Date}" />
<Image Source="{Binding Image}" />
</StackLayout>
</ctrl:ShadowFrame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ScrollView>
</RefreshView>
</ContentPage.Content>
=> Is there a way to achieve this?
Quick reminder that you Shouldn't use Scrollable Elements inside other Scrollable Element, it usually breaks how both work, Quoting:
Xamarin doesn't recommend using the ListView, WebView, or ScrollView
inside a ScrollView. Microsoft Xamarin.Forms Official Documentation
says that ScrollViews should not be nested. In addition, ScrollViews
should not be nested with other controls that provide scrolling, like
ListView and WebView.
And this is what happening:
The ScrollView isn't actually scrolling, the Vertical CollectionView is the one giving the Illusion that the page is scrolling, meaning that the Horizontal one is always on top.
How to fix it?
To fix this, you should remove the Vertical CollectionView and use some kind of Repeater View, this Post will guide you on how to achieve it.
I'm trying to setup a XAML form definition which shows a WebView but which has a Floating Action Button over the bottom right.
If I use an AbsoluteLayout, the FAB appears correctly over the WebView. However, due to the Height/WidthRequest of the Webview, it is displayed at full size - the text disappears off the right side and doesn't wrap, so the page doesn't scroll.
<ContentPage ...snip... Title="Document">
<StackLayout Padding="5,5,5,5" HorizontalOptions="FillAndExpand" Orientation="Vertical">
<WebView x:Name="webViewDocument" WidthRequest="1000" HeightRequest="1000" />
<Label Text="{Binding UpdatedWhen, StringFormat='Last Updated: {0:dd MMM yyyy HH:mm}'}"
VerticalTextAlignment="Center" HorizontalTextAlignment="End" FontSize="Small" />
<customControls:ImageButton x:Name="fab"
Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
Command="{Binding AddCommand}"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.95,0.975,-1,-1"
Margin="10" />
</StackLayout>
</ContentPage>
If I use a StackLayout, the WebView sizes and scrolls correctly, however the FAB occupies a full width strip at the bottom of the screen and the text does not appear behind it - the WebView stops above it.
I've spent the last hour and a half trying every combination of nested Layout I can think of to solve this and just can't get it right - can some kind layout genius out there please tell me how I can solve this.
Thanks
Use a Grid and do not indicate rows or columns.
Something like this:
<Grid Padding="5,5,5,5"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<WebView x:Name="webViewDocument"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding UpdatedWhen, StringFormat='Last Updated: {0:dd MMM yyyy HH:mm}'}"
VerticalOptions="End"
HorizontalOptions="Center"
HorizontalTextAlignment="End"
FontSize="Small" />
<customControls:ImageButton x:Name="fab"
Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
Command="{Binding AddCommand}"
VerticalOptions="End"
HorizontalOptions="End"
Margin="10" />
</Grid>
This should work for you.