My ActivityIndicator is at the bottom of the Page, but it should be in the middle. I tried everything I found in the internet but nothing worked.
Image
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<SearchBar Placeholder="Parkhaus suchen" Text="{Binding SearchText}"/>
<ListView x:Name="HomeListView" ItemsSource="{Binding Parking}" HasUnevenRows="False" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Footer/>
</ListView>
</StackLayout>
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<ActivityIndicator IsRunning="{Binding IsBusy}" IsVisible="{Binding IsBusy}" VerticalOptions="Center" HorizontalOptions="Center"/>
</StackLayout>
</AbsoluteLayout>
Try changing your StackLayout around your ActivityIndicator to use:
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"
The PositionPropertional flag tells the AbsoluteLayout that the x and y position of the element is based on the size of the absolute layout, taking the size of the element into account. So 0.5 tells it to center the element within the AbsoluteLayout.
The values for the width and height are both set to -1. This is considered a "special value" for width and height meaning "Auto".
Related
I have a ListView in Xamarin forms which has a Viewcell in it. The Viewcell contains an lable control with a x:Name attribute. Now I tried to x:name in code behind but it is showing compile time error(The x:name does not exists in current context).
The below code im using.
<ListView x:Name="UnPaidInvoicesList"
SeparatorVisibility="None" IsPullToRefreshEnabled="True"
HasUnevenRows="True"
ItemSelected="UnPaidInvoicesList_ItemSelected"
VerticalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell >
<StackLayout x:Name="stkDuedate" Orientation="Horizontal">
<Label x:Name="lblDueDate1" Text="Due Date:" TextColor="Gray" />
<Label x:Name="lblDueDate" TextColor="{StaticResource Pink}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>```
Im new to this xamarin forms. Please help on this.
What features do you want to implement?
Just as Jason said,elements inside a template cannot be referenced by name.
If you want to disply a data list , you can bind the data to a ListView.
For this, you can refer to the following code:
<ListView x:Name="lstView" RowHeight="60" ItemsSource="{Binding veggies}" HasUnevenRows="True" IsPullToRefreshEnabled="False" SelectionMode="None">
<ListView.ItemTemplate >
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="Olive">
<StackLayout Orientation="Vertical">
<Label Text = "{Binding Name}" FontSize="24" AbsoluteLayout.LayoutBounds="0.25, 0.25, 400, 40"/>
<Label Text = "{Binding Type}" AbsoluteLayout.LayoutBounds="50, 35, 200, 25"/>
</StackLayout>
<Image Source="{Binding Image}" HorizontalOptions="End" AbsoluteLayout.LayoutBounds="250.25, 0.25, 50, 50 "/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
For more,you can check document Xamarin.Forms ListView and
Customizing ListView Cell Appearance.
You can also check the sample Xamarin.Forms - ListView Sample: Custom Cells.
I have a StackLayout with a Frame, ScrollView & Button as it's child controls.
When the ScrollView content is beyond a certain Height, the ScrollView seems to push the Frame above it, squashing it. I would expect that the ScrollView as a container not push upwards the view above it, but contain its content within it.
Frame - red circle, ScrollView - Blue, ScrollView's content - light blue, Button - green
EXPECTED
<?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="Class">
<ContentPage.Content>
<StackLayout
VerticalOptions="FillAndExpand"
Orientation="Vertical">
<Frame
Padding="0"
HeightRequest="60"
WidthRequest="60"
VerticalOptions="Center"
HorizontalOptions="Center"
CornerRadius="30"
BackgroundColor="Red"/>
<ScrollView
Background="Blue"
VerticalOptions="FillAndExpand">
<StackLayout
Margin="20,5,20,0"
BackgroundColor="LightBlue"
HeightRequest="150"/>
</ScrollView>
<Button
VerticalOptions="End"
Text="Next"
BackgroundColor="Green"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Ouputs (Which is what i expect):
Then if i change the ScrollView's StackLayout content's height to 950, it then squashes the content above and it looks as below:
Why is the ScrollView pushing upwards, even when the Frame has an assigned HeightRequest. How can i resolve this?
Why is the ScrollView pushing upwards, even when the Frame has an assigned HeightRequest.
From ScrollView as a child layout, a ScrollView will often be the child of a StackLayout. A ScrollView requires a specific height to compute the difference between the height of its content and its own height, with the difference being the amount that the ScrollView can scroll its content.
So you can assign specific height to Scrollview.
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
<Frame
Padding="0"
BackgroundColor="Red"
CornerRadius="30"
HeightRequest="60"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="60" />
<ScrollView
Background="Blue"
HeightRequest="150"
VerticalOptions="FillAndExpand">
<StackLayout
Margin="20,5,20,0"
BackgroundColor="LightBlue"
HeightRequest="950" />
</ScrollView>
<Button
BackgroundColor="Green"
Text="Next"
VerticalOptions="End" />
</StackLayout>
Another way is to use Gird to assign specific height for Scrollview.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Frame
Padding="0"
BackgroundColor="Red"
CornerRadius="30"
HeightRequest="60"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="60" />
<ScrollView
Grid.Row="1"
Background="Blue"
VerticalOptions="FillAndExpand">
<StackLayout
Margin="20,5,20,0"
BackgroundColor="LightBlue"
HeightRequest="950" />
</ScrollView>
<Button
Grid.Row="2"
BackgroundColor="Green"
Text="Next"
VerticalOptions="End" />
</Grid>
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 am trying to round the corners of a stack layout, it works on android but on iOS, they still appear square but it does display the Frame shadow
My XAML is
<ContentPage.Content>
<StackLayout BackgroundColor="WHITE">
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Frame CornerRadius="10" Padding="0" Margin="10, 10, 10, 10">
<StackLayout>
. . .
</StackLayout>
</Frame>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
Set IsClippedToBounds property to Frame control:
<Frame IsClippedToBounds="True" CornerRadius="10" Padding="0" Margin="10, 10, 10, 10">
<StackLayout>
</StackLayout>
</Frame>
they still appear square
Actually, the Frame is round not the StackLayout, we just use Frame wrap it ,so it looks the StackLayout has round corners.
Frame
<Frame CornerRadius="10" Padding="0" Margin="10, 10, 10, 10" HasShadow="False" BackgroundColor="Red">
<StackLayout >
<Label Text="{Binding}"/>
</StackLayout>
</Frame>
StackLayout
<Frame CornerRadius="10" Padding="0" Margin="10, 10, 10, 10" HasShadow="False" >
<StackLayout BackgroundColor="Red">
<Label Text="{Binding}"/>
</StackLayout>
</Frame>
it does display the Frame shadow
You can disable it by HasShadow="False".
Actually I believe, it is a bug of Xamarin.Forms. UWP, Android and iOS should behave the same, but they don't. As a result to implement the same behaviour developers need to use OnPlatform feature.
The bug is described and discussed here, it is still open: https://github.com/xamarin/Xamarin.Forms/issues/2405
How can I do stacklayout take all screen width when device is in Landscape?
in Landscape mode stacklayout does not fill parent
here is my Xaml:
<?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:local="clr-namespace:ListView"
x:Class="ListView.MainPage">
<ContentPage.Content>
<AbsoluteLayout BackgroundColor="Silver" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand" BackgroundColor="Maroon" VerticalOptions="StartAndExpand">
<Button Text="Reload data" Clicked="reloadData" x:Name="btnReload"/>
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="#eee" Orientation="Vertical">
<StackLayout Orientation="Horizontal" VerticalOptions="FillAndExpand">
<Image Source="{Binding Imagen}" HeightRequest="100" WidthRequest="120"/>
<Label Text="{Binding Titulo}" TextColor="Gray"/>
<Label Text="{Binding Fecha}" HorizontalOptions="EndAndExpand"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<ActivityIndicator BackgroundColor="Green" AbsoluteLayout.LayoutBounds=".5,.5,.2,.2" AbsoluteLayout.LayoutFlags="All" Color="Blue"
IsRunning="True" IsVisible="False" x:Name="overlay"/>
</AbsoluteLayout>
</ContentPage.Content>
I want stacklayout take screen width on landscape; but only on portrait is work.
When controls are direct children of an AbsoluteLayout setting HorizontalOptions and VerticalOptions has no effect. All of the sizing must come from setting AbsoluteLayout.LayoutBounds and AbsoluteLayout.LayoutFlags. So try changing your StackLayout to this:
<AbsoluteLayout BackgroundColor="Silver"
HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
BackgroundColor="Maroon"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
...
Then you also may need to set your ListView.HorizontalOptions to FillAndExpand but try without that first.