Is it possible to hide or remove the footer at runtime?
I have a footer with a view inside it in xaml,however I would like to add and remove the footer at runtime in the codebehind.How can I do that?
<CollectionView ItemTemplate="{StaticResource MyTemplate}"
ItemsSource="{Binding Customers}">
<CollectionView.EmptyView >
<views1:MyEmptyView IsVisible ="{Binding IsEmptyViewVisible}" />
</CollectionView.EmptyView>
<CollectionView.Footer >
<MyFooterView IsVisible="{Binding IsLoading}" />
</CollectionView.Footer>
</CollectionView>
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 am currently working with a Xamarin app for reading RFID temperature tags and updating their values in real time. The current setup uses two Horizontal StackLayouts, one with a ListView showing a list of tags and their values, and the other with a Grid of Images of the human body that I wish to display the values on as well (in specific places).
In the ListView side, I can successfully call an object called TagInfoList, which is an ObservableCollection in the Class I call from the BasePage initialization. However, on the Grid side, I've tried multiple methods of using the TagInfoList, but it does not work. I've tried BindableLayouts, DataTemplates + ViewCells, and none allow me to get TagInfoList usable within my second StackLayout.
Here is the XAML code for the two horizontal StackLayouts:
<StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand">
<ListView x:Name="liewViewTagData" ItemsSource="{Binding TagInfoList}" SelectedItem="{Binding objItemSelected, Mode=TwoWay}">
<ListView.Header>
<StackLayout BackgroundColor="#cccccc">
<Grid>
<!-- Grid + Label code irrelevant to my issue-->
</Grid>
</StackLayout>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical">
<Grid>
<!-- Grid + Label code irrelevant to my issue-->
</Grid>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout> <!-- RFID Tag Section -->
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand"> <!-- Body Model Section -->
<!-- HERE: WHAT TO PUT FOR TagInfoList TO BE USABLE? -->
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" WidthRequest="400" ColumnSpacing="0">
<!-- Grid + Label + Images I want to use TagInfoList information in -->
</Grid>
<!-- HERE: WHAT TO PUT FOR TagInfoList TO BE USABLE? -->
</StackLayout> <!-- Body Model Section -->
</StackLayout>```
I've deleted the bulk of inside Grids since it's not relevant. TagInfoList is an ObservableCollection of a class which contains all the data I need (strings and ints). How do I utilize TagInfoList within the second StackLayout? If I do it the same method as the first StackLayout, I get an error that I've called TagInfoList twice (through the 'liewViewTagData' item). Here is that code in the .xaml.cs file:
liewViewTagData.ItemSelected += (sender, e) => {
if (e.SelectedItem == null) return; // Don't do anything if we just de-selected the row
((ListView)sender).SelectedItem = null; // De-select the row
};
My sole goal is to use the TagInfoList ObservableCollection within both StackLayouts, but I'm not sure how to do that.
Thanks!
If I do it the same method as the first StackLayout, I get an error
that I've called TagInfoList twice (through the 'liewViewTagData'
item).
You can do it in the same way as the first StackLayout.And you can change property x:Name of the two listviews to different Name.
You can refer to the following code:
<ScrollView Orientation="Horizontal">
<StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand">
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<ListView x:Name="liewViewTagData" RowHeight="60" ItemsSource="{ Binding TagInfoList}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!--other code-->
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<ListView x:Name="liewView2" RowHeight="60" ItemsSource="{ Binding TagInfoList}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!--other code-->
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</StackLayout>
</ScrollView>
Note:
If you run out of horizontal space, I suggest you add a ScrollView to the outer layer.
We have a ListView bound to a List of objects of a type called Trial. Each Trial has a property, called Pictures, that is a List of objects of a type, Picture, that represents an image and some metadata. We are using a horizontal CollectionView within the ListView item template to display thumbnails of the images, if any. The problem is in getting a little space between the images. We've tried setting a Margin property value on the Image in the CollectionView item template, but the images are still appearing right next to each other as seen in the illustration.
This is the XAML describing the ListView:
<ListView x:Name="trialsListView"
ItemsSource="{Binding .}"
ItemTapped="Handle_ItemTapped"
CachingStrategy="RecycleElement"
HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="20">
<Label
Text="{Binding Prompt}"
BackgroundColor="{Binding TrialType, Converter={StaticResource TrialTypeToColorConverter}}"
Padding="5" />
<Label Text="{Binding Response}" />
<CollectionView
BindingContext="{Binding Pictures}"
ItemsSource="{Binding .}"
ItemsLayout="HorizontalList"
HeightRequest="{Binding Count, Converter={StaticResource PicturesCountToHeightConverter}}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Image
HeightRequest="80"
Source="{Binding PictureName, Converter={StaticResource PictureNameToImageSourceConverter}}"
Margin="10" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
And this is an example of output (from an iOS device):
I suppose we can enclose the Image in a Frame or some layout, but that feels like a 90s web hack. Surely there is a right way to get some spacing without resorting to adding screen elements? What do I not yet understand here?
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 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.