I want to display title, text content ( approx 300 characters) from database in an Updates.xaml page. The title, text content should display in a rectangle blocks. When ever user submit a new update the latest one should automatically display on top of the page and each should be properly spaced between one another.
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="soccerapp.UpdatesNews" BackgroundColor="#aa49e3" Title="Updates"
mc:Ignorable="d">
<StackLayout>
<!-- Place new controls here -->
<Button x:Name="plusButton"
Text="+"
WidthRequest="60"
HeightRequest="60"
CornerRadius ="30"
VerticalOptions="Start"
HorizontalOptions="EndAndExpand"
Clicked="OnPlusButtonClicked" />
<Label
HorizontalOptions="Center"
Text="News!"
VerticalOptions="CenterAndExpand" />
<ListView x:Name="LstTest" ItemTapped="LstTest_ItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text="{Binding .}" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
<ViewCell>
<Frame>
<StackLayout>
<Label Text="{Binding Title}" />
<Label Text="{Binding Text}" />
<Label Text="{Binding Content}" />
</StackLayout>
</Frame>
</ViewCell>
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.
It try to move DataTemplate on my CollectionView to a separate xaml file, for reuse it but not work.
the collectionView on my MainPage:
<CollectionView ItemsSource="{Binding Spesa.Articoli}" >
<CollectionView.ItemTemplate>
<control:ArticoloSpesaControl />
</CollectionView.ItemTemplate>
</CollectionView>
and this is the separate ArticoloSpesaControl.xaml file "ArticoloSpesaControl"
<DataTemplate xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Prestospesa.View.Control.ArticoloSpesaControl"
xmlns:plugin="clr-namespace:Plugin.Badge.Abstractions;assembly=Plugin.Badge.Abstractions"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
>
<StackLayout Orientation="Horizontal" Padding="10,0,10,0">
<StackLayout Orientation="Horizontal" HorizontalOptions="Start" Spacing="0">
<plugin:Badge BadgeText="{Binding Articolo.quantita}" Style="{StaticResource Badge}"
BackgroundColor="{StaticResource BadgeColor}"
WidthRequest="35" Margin="0,9,2,0" />
<ffimageloading:CachedImage
Source="loading.gif"
WidthRequest="40"
HorizontalOptions="Start"
VerticalOptions="Center"
IsVisible="{Binding RequestPending}"
/>
<Label Text="{Binding DescrizioneArticolo}" Style="{StaticResource LabelProduct}"
WidthRequest="200"
HeightRequest="40"
HorizontalOptions="FillAndExpand"
/>
<Label Text="{Binding Articolo.prezzoNetto, StringFormat='{0:F}€'}" WidthRequest="90"
TextColor="Red"
HeightRequest="50"
VerticalTextAlignment="Center"
HorizontalOptions="End" HorizontalTextAlignment="End" VerticalOptions="Center" Style="{StaticResource LabelMedium}" />
</StackLayout>
</StackLayout>
Any help is welcome !
You can create a ContentView as the DataTemplate of the CollectionView
<CollectionView ItemsSource="{Binding xxx}">
<CollectionView.ItemTemplate>
<DataTemplate>
<control:ArticoloSpesaControl />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
In ArticoloSpesaControl
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="App3.View1">
<ContentView.Content>
//...
</ContentView.Content>
</ContentView>
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>
In Xamarin.Android it has a class named ViewPager to support "Gestural navigation allows the user to swipe left and right to step through pages of data." (https://learn.microsoft.com/en-us/xamarin/android/user-interface/controls/view-pager/)
But my task is write cross-platform codes for both Android & iOS (without rewrite new code for this gesture). With Xamarin.Form does any library support this ? I have read about Xamarin.Form carousel, but it seem used for slideshow, not appropriate for news list.
I think TabbedPage is more suitable for you. tabbedPage support the Gestural navigation allows the user to swipe left and right to step through pages of data, just set the different pages of data in different tabs.
Here is running GIF.
You can add this Tabbedpage like following code.
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TabbedPageDemo;assembly=TabbedPageDemo"
x:Class="TabbedPageDemo.TabbedPageDemoPage">
<TabbedPage.Resources>
<ResourceDictionary>
<local:NonNullToBooleanConverter x:Key="booleanConverter" />
</ResourceDictionary>
</TabbedPage.Resources>
<TabbedPage.ItemTemplate>
<DataTemplate>
<ContentPage Title="{Binding Name}" Icon="monkeyicon.png">
<StackLayout Padding="5, 25">
<Label Text="{Binding Name}"
Font="Bold,Large"
HorizontalOptions="Center" />
<Image Source="{Binding PhotoUrl}"
WidthRequest="200"
HeightRequest="200" />
<StackLayout Padding="50, 10">
<StackLayout Orientation="Horizontal">
<Label Text="Family:"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Family}"
Font="Bold,Medium" />
</StackLayout>
<StackLayout Orientation="Horizontal"
IsVisible="{Binding Subfamily,
Converter={StaticResource booleanConverter}}">
<Label Text="Subfamily:"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Subfamily}"
Font="Bold,Medium" />
</StackLayout>
<StackLayout Orientation="Horizontal"
IsVisible="{Binding Tribe,
Converter={StaticResource booleanConverter}}">
<Label Text="Tribe:"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Tribe}"
Font="Bold,Medium" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Genus:"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Genus}"
Font="Bold,Medium" />
</StackLayout>
</StackLayout>
</StackLayout>
</ContentPage>
</DataTemplate>
</TabbedPage.ItemTemplate>
</TabbedPage>
You can add different ItemTemplate in the Tabbedpage.
Here is a related link.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/tabbed-page
Update: you can add the listview in the tabbpage like following GIF.
<?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>