I am using the following XAML code to render some data in a ListView:
<ListView x:Name="myListView"
ItemsSource="{Binding myData}"
RowHeight="230">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<RelativeLayout Padding="1">
<StackLayout x:Name="stackLayoutTitle"
Padding="5"
Orientation="Vertical"
VerticalOptions="EndAndExpand"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.6}">
<Label Text="{Binding myText}"
FontSize="Medium"
FontAttributes="Bold"
TextColor="Black">
</Label>
</StackLayout>
</RelativeLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The data is rendering OK. Now, what I would like to do is to use banding for the Factor property of the RelativeYConstranit to position the respective StackLayout based on some calculation. Something like this (see the Factor property):
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor={Binding someValue}}"
But, when running the App I am getting an error.
Does anyone knows if it's possible to using binding expression for this?
Thanks.
I have this problem. "Factor" is not BindingProperty. Therefore now is not possible.
I tried a similar thing and failed to bind factor for YConstraint, here is an explanation of why it doesn't work
From the documentation:
In C#, relative constraints are defined as functions. Concepts like Factor aren't there, but can be implemented manually.
The error message I got:
Cannot assig property "Factor": Property does not exist, or is not assignable, or mismatching type between value and property
Conclusion:
There is no bindable property (note it has to be a bindable property otherwise you can not bind) Factor in the underlying code so it is not possible to bind.
Related
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?
Why can I not use a TextCell like this in a ListView item template? When I use it the rows render but they are empty.
<ListView ItemsSource="{Binding Courses}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical">
<TextCell Text="{Binding Title}" Detail="{Binding SubTitle}"></TextCell>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
When using a Label I can see the text contents in each row:
<ListView ItemsSource="{Binding Courses}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical">
<Label Text="{Binding Title}"></Label>
<Label Text="{Binding SubTitle}"></Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Is there anyway I can use the TextCell inside the list item template? I am trying to build a more complext layout inside the StackLayout and it would be greatly simplified if I could re-use the Title/Detail structure of the TextCell.
According to the Xamarin.Forms Cell Reference, cells are only designed to be added to ListViews or TableViews. In particular, it says:
However Cell is not a visual element, it just describes a template for
creating a visual element.
So it cannot be added directly to the children of a StackLayout. You will have to create a ViewCell with a custom template for that.. You can probably look at the source code on Github to find out the proper spacing that a TextCell uses between it's Text and TextDetail labels, to keep it consistent.
You Can Use Stack Layout in a text cell!
Here is the way for using it.
<TextCell>
<TextCell.BindingContext>
<StackLayout Orientation="Horizontal" >
<Label Text="{Binding Name}"
HorizontalOptions="CenterAndExpand" TextColor="Black"/>
<Label Text="{Binding Description}"
HorizontalOptions="CenterAndExpand" TextColor="Black"/>
<Label Text="{Binding Price}"
HorizontalOptions="CenterAndExpand" TextColor="Black"/>
</StackLayout>
</TextCell.BindingContext>
</TextCell>
I have a ListView whose ItemSource is binded to ArticleList. I need to Bind the FontSize of the Label inside it to MyFontSize which is NOT inside ArticleList. Its just another property in my view model, just like ArticleList
XAML code:
<ListView ItemsSource="{Binding ArticleList}"
x:Name="ArticleListView" HasUnevenRows="True"
SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<ContentView>
<StackLayout Padding="10,0,20,10">
<Image Source="{Binding _Image}"/>
<Label Text="{Binding _Description}"
FontSize="{Binding MyFontSize}"/>
</StackLayout>
</ContentView>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You need to 'target' the element which holds the correct datacontext for your ViewModel. I would guess you hooked it up to your page? Anyhow, the syntax is as follows - with elementname the element with the correct datacontext.
{Binding DataContext.MyFontSize, ElementName=LayoutRoot}
Great catch by Dushyant Bangal, seems in Xamarin you need to use the Source property for the binding to work :)
FontSize="{Binding BindingContext.MyFontSize, Source={Reference LayoutRoot}}"
Try something like this:
FontSize="{Binding ElementName=ArticleListView, Path=DataContext.MyFontSize}"
<ListView
ItemsSource="{Binding Messages}"
Grid.ColumnSpan="2"
HeightRequest="100">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout>
<Label
Text="{Binding When}"
XAlign="Center"/>
<StackLayout
BackgroundColor="Gray"
Orientation="Vertical"
VerticalOptions="Center">
<Label
Text="{Binding Message}"
XAlign="Start"/>
<Label
Text="{Binding Sender}"
XAlign="Start"
TextColor="Red"/>
</StackLayout>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I am rendering a custom ListView in Xamarin.Forms application. The StackLayout which contains two Labels (to which "Message" and "Sender" has been bound), currently displays only one child. With the code above, it displays only "Message". If I change code to be
<StackLayout
BackgroundColor="Gray"
Orientation="Vertical"
VerticalOptions="Center">
<Label
Text="{Binding Sender}"
XAlign="Start"
TextColor="Red"/>
<Label
Text="{Binding Message}"
XAlign="Start"/>
</StackLayout>
it displays only sender. In short it is displaying only first child. What have I done wrong here ?
Issue was similar to what #Grisha had pointed out. RowHeight was proving to be lesser, and the second StackLayout was getting clipped.
The solution was to set HasUnevenRows property of the ListView to be TRUE. Thus, RowHeight was calculated automatically.