I have a ditcionary with values as lists of string. In my xaml I bind the dictionary to a list and within that list I print out the key. I then want to print out a list of value for each key. What should I bind to the Value list and what should I bind to the Value label?
Here is my xaml:
<ListView x:Name ="QuoteListView" ItemsSource ="{Binding dict}" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate >
<ViewCell >
<ViewCell.View >
<StackLayout>
<StackLayout Orientation="Horizontal" Padding="10">
<Label Text ="{Binding Key}" FontSize="10" FontAttributes="Bold" TextColor="White" />
</StackLayout>
<StackLayout Orientation="Horizontal" Padding="10">
<ListView x:Name ="QuoteTextListView" ItemsSource ="{Binding }" HasUnevenRows="True">
<Label Text ="{Binding }" FontSize="10" TextColor="White"/>
</ListView>
</StackLayout>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
This is what I want to achieve:
Name 1
"Quote 1 text"
"Quote 2 text"
Name 2
"Quote 1 text"
"Quote 2 text"
...
I would suggest using ListView Grouping. You can turn your dictionary into 2 lists. ListView Grouping info can be found here.
Basically you will create an object to store the list of Quote strings. Then you take that object and put it into another object representing the list of Names. Let me know if you have any issues.
Related
I have this xaml structure to display categories in CollectionView.
<CollectionView ItemsSource="{Binding Categories}" Grid.ColumnSpan="2">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Horizontal" HorizontalItemSpacing="2"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="{x:Type m:Category}">
<Grid Padding="5">
<Frame CornerRadius="10" IsClippedToBounds="True" BorderColor="LightGray">
<Label Text="{Binding Name}"/>
</Frame>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
I get this result.[1]: https://i.stack.imgur.com/GoHlu.png. But I want to show by 2 categories like on this picture [1]: https://i.stack.imgur.com/S3nZK.png. How can I autosize them by width, so there was not parts of other categories?
I want to use just 1 list view for my ContentPage. The problem is that I need to bind two different types of data from an object list.
I tried to set the bind from code but is working for just 1 list elements
The first ItemSource is the one that is binding the elements.
The second one contains different data but I want to use the same XAML code to display it.
In the xaml part, lets say I can/want reuse: {Binding sRFC} and {Binding sNombre}
PickLista.ItemsSource = lst; // Bound list correctly - this is in code
PickLista.ItemsSource = ls; // List 2 with other object elements - this is in code
<ListView x:Name="myLista" HasUnevenRows="true" Margin="5" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Spacing="5" HeightRequest="40" >
<Label Text="{Binding iId}" VerticalTextAlignment="Start" HorizontalTextAlignment="Start" TextColor="Black" FontSize="15"/>
<Label Text="{Binding sRFC}" VerticalTextAlignment="Start" HorizontalTextAlignment="Start" TextColor="Black" FontSize="15"/>
<Label Text="{Binding sNombre}" VerticalTextAlignment="Start" HorizontalTextAlignment="Start" TextColor="Black" FontSize="15"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I want to be able to display both object elements in the same list view, or if i can use another listview in the same position over the other (via XAML).
If those properties are named the same in both classes and satisfy everything required for binding it will work. So either you have different name or properties in some class are not public or don't have getters...
I have a listview. This list view has 5 rows with two buttons namely A & B. When I tap on button A on a row, I want to change the image on A as well as B on the same row and vice-versa. I am able to individually tap and change the image on the same button but don't know how to change the image on the other button. Here is my listview:
<ListView x:Name="GroupedView" SeparatorColor="Transparent" GroupDisplayBinding="{Binding Title}" IsGroupingEnabled="true" HasUnevenRows="true" >
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Padding="5" BackgroundColor="#E2F5F9">
<Label Text="{Binding Title}" TextColor="{StaticResource NavyBlue}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Spacing="2" Padding="5">
<StackLayout VerticalOptions="FillAndExpand">
<Label Text="{Binding QuestionName}" />
</StackLayout>
<StackLayout IsVisible="{Binding ShowYesNo}" Spacing="15" Orientation="Horizontal" HorizontalOptions="End">
<Button ClassId="Yes" Clicked="ChoiceSelected" CommandParameter="{Binding question_id}" Image="{Binding YesChoiceImg}" />
<Button ClassId="No" Clicked="ChoiceSelected" CommandParameter="{Binding question_id}" Image="{Binding NoChoiceImg}" />
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I am then using the sender to identify the class ID and change the image of the button.
Should I be using a command? Should I be doing something else? Please help. Thanks
If you want to use the CommandParameter you should be using a Command. At the moment you're mixing 2 different ways to handle the click.
One thing to note though is that if you use a command you usually want to bind it to a Command that is defined on your ViewModel but since inside the DataTemplate your BindingContext is the ListView item instead of the ViewModel so you have to reference around that. Something like this should work:
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Spacing="2" Padding="5">
<StackLayout VerticalOptions="FillAndExpand">
<Label Text="{Binding QuestionName}" />
</StackLayout>
<StackLayout IsVisible="{Binding ShowYesNo}" Spacing="15" Orientation="Horizontal" HorizontalOptions="End">
<Button ClassId="Yes" Command="{Binding Path=BindingContext.ButtonCommand, Source={x:Reference MyQuestionPage}}" CommandParameter="{Binding .} Image="{Binding YesChoiceImg}" />
<Button ClassId="No" Clicked="ChoiceSelected" CommandParameter="{Binding question_id}" Image="{Binding NoChoiceImg}" />
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
Note here that you have to give your ContentPage an x:Name (so you can reference it and call the BindingContext on it). And the "{Binding .}" binds to the current list item. So no need to search for it on id you can just plug it into the command directly!
I'm attempting to data bind a list of information to a ListView in Xamarin.forms, but I'm having issues because of how it is indexed. I need to get the string of information found in sortedList[0].Info[multiple indexes].CoverLink to display on my Image element inside of my Xamarin app, but I'm not sure how to go about it. My Xaml file is as follows:
<ListView RowHeight="100" x:Name="PinnedListView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" HorizontalOptions="Start">
<Image Source="{Binding CoverLink}" HeightRequest="100"/>
<StackLayout Orientation="Vertical">
<Label Text="{Binding ID}"/>
<Label Text="{Binding SomeOtherBinding}"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
and I'm assigning the ItemSource via c# by stating:
PinnedListView.ItemsSource = sortedList;
Here is a screenshot of my list architecture:
How to data bind it? Thanks.
you need to specify which element of the Info array you want to use
<Image Source="{Binding Info[0].CoverLink}" HeightRequest="100"/>
As you can see, the CoverLink is in the Infonested array, so, in order to access to it try this:
<Image Source="{Binding Info[0].CoverLink}" HeightRequest="100"/>
I've been working on a UWP app for quite some time. We recently decided to transition over to Xamarin so that we can easily support Android alongside UWP. I've had no issues setting up a PCL to use for our code base. Now I'm running into some nightmares when trying to rewrite our UI for Xamarin.Forms. I'm trying to accomplish something relatively simple and I must be doing something hilariously wrong, but, I cannot figure out what.
I want to display a listView. Here's the XAML:
<ContentPage.Content>
<StackLayout>
<Label Text="This is the bill page."
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
<ListView x:Name="lvBills"
ItemsSource="{Binding Bills}"
SelectedItem="{Binding SelectedBill}">
<ListView.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Amount}"
TextColor="White"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"/>
<Label Text="{Binding DueDate}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
TextColor="White"/>
</StackLayout>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
When I run it, the listView populates with each item in my observable collection. However, no text is actually displayed..even if I remove the bindings and use some placeholder text. Additionally, if I click on any item in the listView, this exception crashes the program.
System.InvalidCastException: Unable to cast object of type
'Xamarin.Forms.StackLayout' to type 'Xamarin.Forms.Cell'.
at Xamarin.Forms.Internals.TemplatedItemsList`2.ActivateContent(Int32 index,
Object item)
at Xamarin.Forms.Internals.TemplatedItemsList`2.CreateContent(Int32 index, O
Object item, Boolean insert)
at Xamarin.Forms.Internals.TemplatedItemsList`2.GetOrCreateContent(Int32
index, Object item)
at Xamarin.Forms.Internals.TemplatedItemsList`2.get_Item(Int32 index)
at Xamarin.Forms.L
I can't figure out any search that yields any meaningful results. I've tried some other things: Adding a binding for ItemSelected in the xaml. I've tried to wire up delegates in the xaml.cs But I cannot make any progress. So, what am I doing wrong?
You need a ViewCell inside a DataTemplate:
<ContentPage.Content>
<StackLayout>
<Label Text="This is the bill page."
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
<ListView x:Name="lvBills"
ItemsSource="{Binding Bills}"
SelectedItem="{Binding SelectedBill}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell> <!-- <----- Add this -->
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Amount}"
TextColor="White"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"/>
<Label Text="{Binding DueDate}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
TextColor="White"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>