<Shell.FlyoutHeaderTemplate>
<DataTemplate>
<ScrollView>
<StackLayout>
.....................................
<StackLayout/>
<ScrollView/>
</DataTemplate>
</Shell.FlyoutHeaderTemplate>
There is a lot of content inside the StackLayout which is being cut off.
I did a test on sample Xaminals according to your code,and used the following code ,it worked normally.
You can refer to the following code:
<Shell.FlyoutHeaderTemplate>
<DataTemplate>
<ScrollView>
<StackLayout Orientation="Vertical" HeightRequest="600" BackgroundColor="DarkGreen">
<Image Aspect="AspectFill"
Source="watermelon.png"
HeightRequest="550"
WidthRequest="550"
Opacity="0.6" />
<Label Text="test header"
TextColor="White"
FontAttributes="Bold"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center" />
</StackLayout>
</ScrollView>
</DataTemplate>
</Shell.FlyoutHeaderTemplate>
The result is:
Related
I need to display a list with about 30 to 40 items that the user has to choose from, and I don't wont to use a combobox, so a Listview seems the way to go.
However, once I put a listview on the page, the listview grows so much in height that it goes off the screen, how can I prevent that ?
I need something like this
<gttCompound:PageBase xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:gttCompound="clr-namespace:gttCompound.Pages"
x:Class="gttCompound.Pages.PageDamageSelectFromList">
<gttCompound:PageBase.ChildStackLayoutContent>
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" Margin="5, 5">
<StackLayout VerticalOptions="Start" Orientation="Horizontal" HorizontalOptions="Center">
<Label Text="SELECT THE DAMAGE LOCATION" FontAttributes="Bold" FontSize="{StaticResource FontSizeLabelSmall}" TextColor="{StaticResource TextColor}" ></Label>
</StackLayout>
<StackLayout x:Name="entirePage" BackgroundColor="Yellow">
<ListView x:Name="listView" ItemsSource="{Binding Items}" Margin="0" BackgroundColor="Red">
<!-- ListView Stuff -->
</ListView>
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal" VerticalOptions="EndAndExpand">
<Button x:Name="ButtonDamageBack" WidthRequest="150" FontAttributes="Bold" HorizontalOptions="Start" TextTransform="Uppercase" Text="{Binding Back}" BackgroundColor="{StaticResource ElementBackgroundColor}" TextColor="{StaticResource ElementTextColor}" FontSize="{StaticResource FontSizeButtonLittle}" />
<Button x:Name="ButtonDamageNext" WidthRequest="150" FontAttributes="Bold" HorizontalOptions="EndAndExpand" TextTransform="Uppercase" IsEnabled="False" Text="{Binding Next}" BackgroundColor="{StaticResource ElementDisabledBackgroundColor}" TextColor="{StaticResource ElementTextColor}" FontSize="{StaticResource FontSizeButtonLittle}" />
</StackLayout>
</StackLayout>
</gttCompound:PageBase.ChildStackLayoutContent>
I gave some elements a noticable background color so I can see how much space they take
The listview takes way to much space.
Might it be because the page is an inherited page ?
The base page looks like this
<?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="gttCompound.Pages.PageBase"
xmlns:helpers="clr-namespace:gttCompound.Pages.Helpers">
<ContentPage.Resources>
<ResourceDictionary>
<helpers:StringNewLineConverter x:Key="StringNewLineConverter"/>
<helpers:StringToTitleCaseConverter x:Key="StringToTitleCaseConverter"/>
<helpers:StringSubstringConverter x:Key="StringSubstringConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
<!-- All the stuff about the AbsoluteLayout is to get a WaitCursor that can show in the center of the screen, see this url
https://stackoverflow.com/questions/48295792/xamarin-forms-how-to-fix-activity-indicator-in-centre-of-screen-in-scrollview
-->
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<ScrollView AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<StackLayout>
<StackLayout x:Name="TopStackLayout" VerticalOptions="Start" BackgroundColor="{StaticResource HeaderColor}" Orientation="Horizontal">
<Frame VerticalOptions="Center" Padding="0" BackgroundColor="{StaticResource HeaderColor}" BorderColor="Transparent" WidthRequest="40">
<Button x:Name="ButtonBack" VerticalOptions="Start" Text="" Image="Back.png" BackgroundColor="{StaticResource HeaderColor}" TextColor="{StaticResource TextColor}" FontSize="8" HeightRequest="14" />
</Frame>
<Frame VerticalOptions="CenterAndExpand" Padding="0" BackgroundColor="{StaticResource HeaderColor}" BorderColor="Transparent">
<Label Text="{Binding AppName}" HorizontalOptions="Start" HorizontalTextAlignment="Center" TextColor="White" FontSize="{StaticResource FontSizeLabelBig}" Padding="0" x:Name="Page_Title" />
</Frame>
</StackLayout>
<StackLayout x:Name="ChildStackLayout" VerticalOptions="FillAndExpand" Orientation="Vertical" Margin="0,-6">
</StackLayout>
<StackLayout x:Name="BottomStackLayout" VerticalOptions="End" Orientation="Horizontal" BackgroundColor="{StaticResource HeaderColor}">
<Label x:Name="LabelUser" Text="" TextColor="White" FontSize="{StaticResource FontSizeLabelTiny}" BackgroundColor="{StaticResource HeaderColor}" Margin="0,0,0,-6" HorizontalTextAlignment="Start" IsVisible= "True" />
<Label x:Name="LabelVersion" Text="" HorizontalOptions="CenterAndExpand" TextColor="White" FontSize="{StaticResource FontSizeLabelTiny}" BackgroundColor="{StaticResource HeaderColor}" Margin="0,0,0,-6" HorizontalTextAlignment="Center" IsVisible= "True" />
<Label Text="{Binding CopyRight}" HorizontalOptions="EndAndExpand" BackgroundColor="{StaticResource HeaderColor}" HorizontalTextAlignment="End" TextColor="White" FontSize="{StaticResource FontSizeLabelTiny}" />
</StackLayout>
</StackLayout>
</ScrollView>
<AbsoluteLayout x:Name="LayoutWaitCursor" BackgroundColor="#22000000" AbsoluteLayout.LayoutBounds="0.5,0.5,1,1" AbsoluteLayout.LayoutFlags="All" IsVisible="false">
<ActivityIndicator IsVisible="true" IsRunning="True" Color="{StaticResource TextColor}" AbsoluteLayout.LayoutBounds="0.5,0.5,0.1,0.1" AbsoluteLayout.LayoutFlags="All" />
</AbsoluteLayout>
</AbsoluteLayout>
</ContentPage>
Here is how the form looks like at runtime
And without the listview it looks like this
I changed just this
<StackLayout x:Name="entirePage" BackgroundColor="Yellow">
<!--
<ListView x:Name="listView" ItemsSource="{Binding Items}" Margin="0" BackgroundColor="Red">
</ListView>
-->
</StackLayout>
What I want is that the listview is visible and scrollable, but the 2 buttons should always stay visible. The listview must only occupy the space between the label on top of the page and the 2 buttons on the bottom of the page.
How can I do that ?
1) REMOVE ScrollView.
2) <StackLayout x:Name="ChildStackLayout" VerticalOptions="FillAndExpand" .... Try different VerticalOptions. Try Center. Also try CenterAndExpand..
3) If still wrong, change the outer StackLayout to Grid, and use RowDefinitions="Auto,*,Auto", with the 3 sections marked Grid.Row="0" / "1" / "2".
ChildStackLayout is "1" (numbered from 0), so gets the * in RowDefinitions.
I am trying to disable scrolling in my collection view. The reason why I want to do that is there is a scroll view already in my XAML code. When I try to scroll all page elements on the page, collection view elements are also scrolled themselves but I don't want that.
<ScrollView>
<StackLayout Padding="20" Spacing="20" >
<Frame CornerRadius="15"
BackgroundColor="#A6EDB3"
VerticalOptions="StartAndExpand"
HeightRequest="200"
IsClippedToBounds="True"
Padding="0" >
<StackLayout Padding="10,5,10,5"
Orientation="Horizontal" >
<Image Source="settingsIcon"
HeightRequest="25"
WidthRequest="25"
Aspect="Fill" />
<Label Text="Filter"
FontSize="Medium"
VerticalTextAlignment="Center"
VerticalOptions="Center"/>
</StackLayout>
</Frame>
<Label Text="Vocabulary topics" TextColor="black" FontSize="20" FontAttributes="Bold" ></Label>
<CollectionView x:Name="topics" Scrolled="topics_Scrolled" VerticalScrollBarVisibility="Never" >
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="0,10,0,10">
<Frame HasShadow="False"
HeightRequest="60"
CornerRadius="15"
BackgroundColor="{Binding BackgroundColor}"
HorizontalOptions="Fill" >
<StackLayout Orientation="Horizontal">
<Frame BackgroundColor="{Binding BoxColor}" WidthRequest="40" ></Frame>
<StackLayout>
<Label Text="{Binding Name}"></Label>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ScrollView>
Having two scrolls on the same page is not the correct way.
Also if you just want to place items above/below your collectionView use the Header/Footer properties then!!
For instance, for the current design, your CollectionView could look something like below and work as you want it to.
<CollectionView Padding="20" x:Name="topics" Scrolled="topics_Scrolled" VerticalScrollBarVisibility="Never" >
<CollectionView.Header>
<StackLayout Spacing="20" >
<Frame CornerRadius="15"
BackgroundColor="#A6EDB3"
VerticalOptions="StartAndExpand"
HeightRequest="200"
IsClippedToBounds="True"
Padding="0" >
<StackLayout Padding="10,5,10,5"
Orientation="Horizontal" >
<Image Source="settingsIcon"
HeightRequest="25"
WidthRequest="25"
Aspect="Fill" />
<Label Text="Filter"
FontSize="Medium"
VerticalTextAlignment="Center"
VerticalOptions="Center"/>
</StackLayout>
</Frame>
<Label Text="Vocabulary topics" TextColor="black" FontSize="20" FontAttributes="Bold" ></Label>
</StackLayout>
</CollectionView.Header>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="0,10,0,10">
<Frame HasShadow="False"
HeightRequest="60"
CornerRadius="15"
BackgroundColor="{Binding BackgroundColor}"
HorizontalOptions="Fill" >
<StackLayout Orientation="Horizontal">
<Frame BackgroundColor="{Binding BoxColor}" WidthRequest="40" ></Frame>
<StackLayout>
<Label Text="{Binding Name}"></Label>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Note: you might have to adjust the margin and padding properties for it to look the exact same. My code is just an example.
For more information on CollectionView check: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/
You can use InputTransparent.
In your case what I would do would be to wrap the CollectionView in a <ContentView> as:
<ContentView InputTransparent="True"
x:Name="content">
<CollectionView ItemsSource="{Binding Items}"...>
...
</CollectionView>
</ContentView>
Create a scroll event to your scroll view:
<ScrollView Scrolled="ScrollView_Scrolled">
...
</ScrollView>
Then, with this event, make sure that the InputTransparent switches depending on the scroll position:
private void ScrollView_Scrolled(object sender, ScrolledEventArgs e)
{
var scrollView = sender as ScrollView;
// Get the height of your scroll view
var contentSize = scrollView.ContentSize.Height;
// Get the max position of the scrollview
var maxPos = contentSize - scrollView.Height;
// Compare it to the current position
if (Convert.ToInt16(e.ScrollY) >= Convert.ToInt16(maxPos))
{
// Switch input transparent value
content.InputTransparent = false;
}
else if (Convert.ToInt16(e.ScrollY) == 0)
{
content.InputTransparent = true;
}
}
This is perfectly fine to use two scrollable controls on the same page for what you want to do. And I don't think <CollectionView.Header> would give you the result you want.
I hope it was helpful! 🙂
I am working with Xamarin's CollectionView and Stacklayout and I'm trying to display item lists from different sources in the form of collection views. However, the output of the code shown below is something I didn't expect it. The result of the first collection view is getting displayed in a small window and all the remaining items can be read by scrolling. However, I want to display them all without using a scroll and the same should work if more collectionviews are added in the code. Is there anything I'm missing here?
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="Arhoo"
x:Class="Arhoo.Pages.MainFeedPage">
<StackLayout>
<StackLayout VerticalOptions="FillAndExpand">
<CollectionView x:Name="ItemsListView"
ItemsSource="{Binding Hotels}"
VerticalOptions="FillAndExpand" Margin="10" Visual="Material">
<CollectionView.Header>
<StackLayout BackgroundColor="LightGray" HeightRequest="50" >
<Label Visual="Material" Text="Hotels" FontSize="Medium" FontAttributes="Bold" />
</StackLayout>
</CollectionView.Header>
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="2"/>
</CollectionView.ItemsLayout>
<CollectionView.EmptyView>
<StackLayout>
<Label HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="Loading Hotels"/>
</StackLayout>
</CollectionView.EmptyView>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Visual="Material">
<ContentView Padding="10">
<Frame HasShadow="false" OutlineColor="#2f2f2f" Padding="0" CornerRadius="2">
<Grid BackgroundColor="#f2f2f2" MinimumHeightRequest="400">
<Image Source="{Binding Image}" Aspect="AspectFill"/>
<BoxView BackgroundColor="#000000" Opacity="0.4"/>
<Label Text="{Binding Text}" Margin="15" TextColor="White" VerticalOptions="End"
VerticalTextAlignment="End" LineBreakMode="NoWrap" FontSize="18" />
</Grid>
</Frame>
</ContentView>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
<StackLayout VerticalOptions="FillAndExpand">
<CollectionView x:Name="TOsListView"
ItemsSource="{Binding TourOperators}"
VerticalOptions="FillAndExpand" >
<CollectionView.Header>
<StackLayout BackgroundColor="LightGray" HeightRequest="20" >
<Label Margin="10,0,0,0" Text="Tour Operators" FontSize="Medium" FontAttributes="Bold" />
</StackLayout>
</CollectionView.Header>
<CollectionView.ItemsLayout>
<GridItemsLayout
Orientation="Vertical"
Span="2"/>
</CollectionView.ItemsLayout>
<CollectionView.EmptyView>
<StackLayout>
<Label
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Text="Loading TOs"/>
</StackLayout>
</CollectionView.EmptyView>
<CollectionView.ItemTemplate>
<DataTemplate>
<ContentView Padding="10" >
<Frame HasShadow="false"
OutlineColor="#2f2f2f"
Padding="0"
CornerRadius="2">
<Grid BackgroundColor="#f2f2f2">
<Image Source="{Binding Image}"
Aspect="AspectFill"/>
<BoxView BackgroundColor="#000000"
Opacity="0.4"/>
<Label Text="{Binding Text}"
Margin="15"
TextColor="White"
VerticalOptions="End"
VerticalTextAlignment="End"
LineBreakMode="NoWrap"
FontSize="18" />
</Grid>
</Frame>
</ContentView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</StackLayout>
</ContentPage>
I have added a <ScrollView> at my code and the collectionview items displayed as I wanted it. Here is the modified code that is working for me.
?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="Arhoo"
x:Class="Arhoo.Pages.MainFeedPage">
<ScrollView>
<StackLayout>
<CollectionView x:Name="HotelsListView" ... </CollcetionView>
</StackLayout>
<StackLayout>
<CollectionView x:Name="HotelsListView" ... </CollcetionView>
</StackLayout>
<StackLayout>
<CollectionView x:Name="HotelsListView" ... </CollcetionView>
</StackLayout>
</StackLayout>
</ScrollView>
</ContentPage>
I just can't understand why the background for my side menu on xamarin forms won't render the same on my xamarin.ios. Yet in other parts of the project my list views render and look the same when I use transparent backgrounds, I even tried copying and pasting the xaml code from other parts of the project where it does render the same, but still it does not work. In case anyone's wondering the side menu on ios was requested by the client.
Attached below I have 2 images showing how the side menu renders differently on the 2 platforms
Here's the Xaml code I'm using for my Side Menu:
<MasterDetailPage.Master>
<StackLayout Orientation="Vertical" BackgroundColor="Transparent" Spacing="0">
<StackLayout
HorizontalOptions="Fill"
Orientation="Horizontal"
VerticalOptions="Fill" BackgroundColor="Black" Padding="50, 50, 50, 50">
<StackLayout HorizontalOptions="Center" Orientation="Vertical">
<ffimageloading:CachedImage x:Name="ProfilePictureCircleImage"
LoadingPlaceholder="profile_image_placeholder.png"
ErrorPlaceholder="profile_image_placeholder.png"
DownsampleToViewSize="true"
FadeAnimationEnabled="true"
HeightRequest="65"
WidthRequest="65">
<ffimageloading:CachedImage.Transformations>
<fftransformations:CircleTransformation/>
</ffimageloading:CachedImage.Transformations>
</ffimageloading:CachedImage>
</StackLayout>
<StackLayout
HorizontalOptions="CenterAndExpand"
Orientation="Vertical"
VerticalOptions="CenterAndExpand">
<Label
x:Name="FullNameLabel"
FontSize="18"
HorizontalOptions="Center"
TextColor="White"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</StackLayout>
<BoxView HeightRequest="2" BackgroundColor="#D90B31"/>
<ListView
x:Name="NavigationMenuItems"
ItemSelected="OnMenuItemSelected"
BackgroundColor="{StaticResource TileColour}"
RowHeight="60"
SeparatorVisibility="None"
SeparatorColor="Transparent">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Main design for menu items -->
<StackLayout
Padding="20,10,0,10"
Orientation="Horizontal"
Spacing="20"
VerticalOptions="FillAndExpand"
BackgroundColor="Transparent">
<local:TintedCachedImage TintColor="{StaticResource SideMenuIconColor}"
Source="{Binding Icon}"
VerticalOptions="Center"
DownsampleToViewSize="true"
HeightRequest="19"
WidthRequest="19"/>
<Label
FontSize="15"
Text="{Binding Title}"
TextColor="{StaticResource SideMenuTextColor}"
VerticalOptions="Center" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage />
</MasterDetailPage.Detail>
above are pictures illustrating how it looks across the 2 platforms.
Found the solution to this question on another stackoverflow thread I had to use a custom renderer:
public class CustomSideMenuRenderer: TabletMasterDetailRenderer
{
public override void ViewWillLayoutSubviews()
{
base.ViewWillLayoutSubviews();
var master = ViewControllers[0];
master.View.BackgroundColor = UIColor.Clear;
var detail = ViewController.ChildViewControllers[1];
}
}
<?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="Dh.ListPage">
<ContentPage.Content>
<ScrollView>
<StackLayout Style="{StaticResource MainStackLayoutWhenLoggedInStyle}">
<Frame Style="{StaticResource FrameStyle2}">
<StackLayout>
<Label Text="Vragenlijsten" Style="{StaticResource TitelLabelStyle}" />
</StackLayout>
</Frame>
<Frame Style="{StaticResource FrameStyle2}">
<StackLayout>
<Label Text="DRINGENDE VRAGEN: vul deze vragen meteen in!" Style="{StaticResource StandardLabelStyle}"/>
<Frame Style="{StaticResource FrameStyle2}">
<StackLayout Style="{StaticResource ListViewStackLayoutStyle}" >
<ListView ItemTapped="OnItemTapped" ItemsSource="{Binding Question_Lists}" Style="{StaticResource StandardListViewStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Label Text="{Binding Title}" Style="{StaticResource StandardLabelStyle}" />
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Frame>
</StackLayout>
</Frame>
</StackLayout>
</ScrollView>
</ContentPage.Content>
When my screen is too small then my listview does not want to scroll. If my screen is not too small then listview does scroll. Can someone help me pls?
Never stack a ListView inside a ScrollView as both implement scrolling on Android at least.
Xamarin.Forms.ScrollView Class documentation says:
Application developers should not nest one ScrollView within another. Additionally, they should refrain from nesting them other elements that can scroll, such as WebView.
ListView.ScrollTo Method Scrolls the ListView to the item.
Put your StackLayout in ListView.Header or ListView.Footer
<ListView ItemsSource="{Binding Comments}">
<ListView.Header>
<StackLayout Padding="30,30,30,0">
<Label Text="Article" />
</StackLayout>
</ListView.Header>
<ListView.Footer>
<StackLayout HeightRequest="85" />
</ListView.Footer>
</ListView>