I have this code:
<StackLayout BindableLayout.ItemsSource="{Binding Classes}">
....
<StackLayout BindableLayout.ItemsSource="{Binding Class1}">
...
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="Class_Tapped" CommandParameter="{Binding .}" />
</StackLayout.GestureRecognizers>
</StackLayout>
</StackLayout>
The problem is that I am getting the binding of Classes and not of Class1. I want the Class1 binding in Tapped CommandParameter. Is this possible?
Thank you!
Place the inner StackLayout into the DataTemplate of the outer StackLayout , the BindingContext of the TapGestureRecognizer must be Class1 .
<StackLayout BindableLayout.ItemsSource="{Binding Classes}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BindableLayout.ItemsSource="{Binding Class1}">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="Class_Tapped" CommandParameter="{Binding .}" />
</StackLayout.GestureRecognizers>
</StackLayout>
</ViewCell>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
Related
<ListView Grid.Column="0" ItemsSource="{Binding CardItems[0]}" RowHeight="100">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CardItemTapCommand}" />
</StackLayout.GestureRecognizers>
<Image Source="{Binding Image}" HeightRequest="64"/>
<Label Text="{Binding Text}"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
My view has its binding context set to the corresponding viewmodel.
My CardItemTapCommand doesn't work.(i think this is happening because the binding context of each viewcell is the cardItem[0] list). Is setting the binding context of the cell to the viewmodel again a bad idea?
You can try this
<ContentPage ...
x:Name="PageName">
<ContentPage.Content>
...
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.TapCommand,
Source={x:Reference PageName}}"/>
</StackLayout.GestureRecognizers>
...
</ContentPage.Content>
</ContentPage>
Currently, I've got a ListView implementation that looks something like this:
{Alert1}
{Alert2}
{Alert3}
{Alert4}
{Alert5}
{Alert6]
{Alert7}
xaml:
<ListView Grid.Row="4"
ItemsSource="{Binding Alerts}"
HasUnevenRows="True"
VerticalOptions="Start"
SeparatorVisibility="None" Margin="10,0"
x:Name="AlertsList">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame BackgroundColor="#333333" Margin="0,5" Padding="5">
<StackLayout Margin="0" Padding="0">
<Label
Text="{Binding Name, Mode=OneWay}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
Margin="0" />
<Label
Text="{Binding Value, Mode=OneWay}"
HorizontalOptions="Center"
FontSize="Medium"
Margin="0" />
</StackLayout>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Any suggestion on how to modify this so that the output is displayed in a 2 column grid instead with equal width columns such as?
{Alert1}{Alert2}
{Alert3}{Alert4}
{Alert5}{Alert6]
{Alert7}
I'm using Xamarin Forms v2.3.3
As Jason said,you could upgrade your XF version and use CollectionView with its ItemsLayout property.
<CollectionView ItemsSource="{Binding Alerts}"
ItemsLayout="VerticalGrid, 2">
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame BackgroundColor="#333333" Margin="0,5" Padding="5">
<StackLayout Margin="0" Padding="0">
<Label
Text="{Binding Name, Mode=OneWay}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
Margin="0" />
<Label
Text="{Binding Value, Mode=OneWay}"
HorizontalOptions="Center"
FontSize="Medium"
Margin="0" />
</StackLayout>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
The more you could refer to the doc.
I have a listview with itemSource from viewModel but i need to bind a label text in this listview to outside the itemSource
<ListView
ItemsSource="{Binding reports, Mode=TwoWay}"
HasUnevenRows="True" ItemTapped="ListView_ItemTapped"
VerticalOptions="Center" SeparatorVisibility="Default"
SeparatorColor="Black" x:Name="listview">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame Padding="0.20" Margin="2">
<Grid x:Name="gridview">
<BoxView Grid.Column="0" Grid.Row="0" BackgroundColor="Black" WidthRequest="1" VerticalOptions="Center" HorizontalOptions="End"/>
<Label Text="{Binding Governerate}" Grid.Column="0"/>
<BoxView Grid.Column="1" Grid.Row="0" BackgroundColor="Black" WidthRequest="1" VerticalOptions="Center" HorizontalOptions="End"/>
<Label Text="{Binding VisitCount}" Grid.Column="2" x:Name="visitcounts" TextColor="Red"/>
<BoxView Grid.Column="2" Grid.Row="0" BackgroundColor="Black" WidthRequest="1" VerticalOptions="Center" HorizontalOptions="End"/>
<Label Text="{Binding item outside itemsource}" Grid.Column="3"/>
<Label Grid.Column="1"/>
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
That easy you do it something like this:
First, give your ListView a name(Already there)
Then In the Binding use that name as a Reference for the Binding Context:
Text="{Binding Path=BindingContext.YourItem, Source={x:Reference listview}}"
Where YourItem is the Name of your string Property outside the ItemsSource
PFB the code for my list view,
<ListView HasUnevenRows="true" ItemsSource="{Binding UserEmailList}" IsGroupingEnabled="true">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Vertical" Spacing="0" Margin="0" Padding="0">
<BoxView Style="{StaticResource separator}"></BoxView>
<Label Text="{Binding Heading}" Style="{StaticResource labelHeaderTitle}" />
<BoxView Style="{StaticResource separator}"></BoxView>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Horizontal" Spacing="0" >
<StackLayout IsVisible="{Binding UserEmailDetails.HasEmailAddress}" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label Text="{Binding UserEmailDetails.EmailAddress}" Style="{StaticResource labelListItem}" HorizontalOptions="FillAndExpand">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="SelectEmailAddress_Tapped" CommandParameter="{Binding UserEmailDetails}" />
</Label.GestureRecognizers>
</Label>
<Image HeightRequest="16" HorizontalOptions="End" VerticalOptions="Center" Source="arrow.png" Margin="0,0,15,0">
</Image>
</StackLayout>
<StackLayout IsVisible="{Binding UserEmailDetails.HasEmailAddress, Converter={StaticResource NotConverter}}" Padding="15,0,0,0">
<Label Text="Add email" Style="{StaticResource labelLink}">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="SelectEmailAddress_Tapped" CommandParameter="{Binding UserEmailDetails}" />
</Label.GestureRecognizers>
</Label>
</StackLayout>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Even if there are only two rows, on IOS multiple empty rows are getting populated as in the below snapshot.
Please let me know how to avoid this and hav things working in both Android and IOS
I would hide the Separator by setting SeparatorVisibility="None" on ListView Property. If you still need the Separator I would define in the ViewCell.
<ListView HasUnevenRows="true" SeparatorVisibility="None">
The other way is to put Empty Footer on List View:
<ListView>
<ListView.Footer>
<Label />
</ListView.Footer>
</ListView>
I hope one of these helps you. Let me know if anything.
In my Xamarin.Forms app, I have a ListView:
<ListView ItemsSource="{Binding MyItems}"
Grid.Row="1"
Margin="0,20,0,0">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text="ABC" FontSize="Large" TextColor="Black" BackgroundColor="Red" Margin="20" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Where the "ABC" should appear, is only a thin red line for the background of the label. I don't see the actually letters. I've made many ListView before with no problem, I don't know what I'm doing wrong here?
ViewCell needs to contain a layout control, otherwise it will not render correctly.
For simplicity, you could implement a StackLayout:
<ListView
ItemsSource="{Binding MyItems}"
Grid.Row="1"
Margin="0,20,0,0>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout
HorizontalOptions="FillAndExpand"
Margin="0"
Padding="0"
Spacing="0"
VerticalOptions="Fill">
<Label
BackgroundColor="Red"
FontSize="Large"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
Margin="20"
Text="ABC"
TextColor="Black"
VerticalOptions="FillAndExpand"
VerticalTextAlignment="Center"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>