I have been facing this weird behaviour for a while now and I am unable to understand what exactly is causing the problem.
I am using FreshMvvm and I have a ListView with two buttons inside of it.
Now the problem is one of the buttons gets its text from Binding, Secondly to assign the button with a click command I had to follow this.
Now after adding this, the click event works perfectly but the text binding is not working I suspected this happened because of binding context change which I am sure is the whole reason but I am not able to find a way to fix this my listview code is as follows:
<ListView Grid.Row="1"
ItemsSource="{Binding CategoryAndActivities}"
x:Name="WishListName"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame>
<Grid VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!--Image and Title-->
<AbsoluteLayout Grid.Row="0"
HeightRequest="70"
IsClippedToBounds = "true">
<ffimageloading:CachedImage Source="{Binding ActivityImage}"
Aspect="AspectFill"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0.0, 0.0, 0.3, 0.85"
Margin="5, 0, 5, 5"
ErrorPlaceholder="nopreviewlandscape"
LoadingPlaceholder="loadingicon"/>
<Label x:Name="ActivityNameLabel"
Text="{Binding ActivityName}"
FontAttributes="Bold"
VerticalTextAlignment="Start"
TextColor="{StaticResource price_text_color}"
FontSize="Small"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="1.0, 0.0, 0.7, 0.85"
Margin="5, 5, 5, 5">
</Label>
</AbsoluteLayout>
<!--Descp-->
<StackLayout Grid.Row = "1"
IsClippedToBounds="true">
<Label Text="{Binding AcitivityDescription}"
FontSize="Small"
LineBreakMode="WordWrap"
Margin="5, 0, 5, 5"/>
</StackLayout>
<Grid BackgroundColor="White"
Grid.Row = "2"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="50*"/>
</Grid.ColumnDefinitions>
<Button BackgroundColor="{StaticResource ColorBrandingYellow}"
HorizontalOptions="FillAndExpand"
Command="{Binding AddToWishListCommand}"
Grid.Column="0"
BindingContext="{Binding Source={x:Reference ListName}, Path=BindingContext}"
CommandParameter="{Binding Source={x:Reference ActivityNameLabel},Path=BindingContext}"
TextColor="Black"
Text="{resourceLocal:Translate addToWishlist}"
FontSize = "Small" />
<Button BackgroundColor="{StaticResource ColorBrandingYellow}"
HorizontalOptions="FillAndExpand"
Grid.Column="1"
TextColor="Black"
Text="{Binding ActivityAmount}"
FontSize = "Small"
Command="{Binding GoFeatureActivityDetail}"
BindingContext="{Binding Source={x:Reference ListName}, Path=BindingContext}"
CommandParameter="{Binding Source={x:Reference ActivityNameLabel},Path=BindingContext}"/>
</Grid>
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The problem is in the button with binding as text what happems is the text just show empty even though the data actually exist.
The Click event code is as follows:
public ICommand GoFeatureActivityDetail { get; set; }
public BrowseFeaturesPageModel()
{
AddToWishListCommand = new Command(WishListCommand);
GoFeatureActivityDetail = new Command(FeatureActivityDetailCommand);
}
private async void FeatureActivityDetailCommand(object obj)
{}
Right thinking, bad implementation.
What's going on here is that you've changed the Button's BindingContext and now it's not anymore able to "see" the ActivityAmount property of the item 'cause it's 'looking' to the BrowseFeaturesPageModel object.
You can keep the things simpler, changing the BindingContext only where you'll use, not the whole View (the button in this case):
<Button BackgroundColor="{StaticResource ColorBrandingYellow}"
HorizontalOptions="FillAndExpand"
Grid.Column="1"
TextColor="Black"
Text="{Binding ActivityAmount}"
FontSize = "Small"
Command="{Binding BindingContext.GoFeatureActivityDetail, Source={x:Reference ListName}}"
CommandParameter="{Binding .}"/>
Related
I have the below XAML structure using a collection view which is using a list called 'users' as its ItemSource. I have a bound property which controls if the items are visible or not :
<StackLayout Orientation="Horizontal">
<Frame IsVisible="{Binding isVisible}" HasShadow="True" BackgroundColor="White" Padding="0">
The issue is that unless I remove the StackLayout around the Frame then the IsVisible binding doesn't work. Does anyone know why the binding works without the StackLayout, but not with ?
<CollectionView Grid.Row="1" x:Name="users" IsGrouped="True" SelectionMode="Single">
<CollectionView.GroupHeaderTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal" MinimumHeightRequest="200" BackgroundColor="{Binding tint_colour}">
<Image Source="{Binding school_image}" WidthRequest="120" HeightRequest="100"/>
<Label Text="{Binding organisation_title}"
TextColor="{Binding font_colour}"
FontSize="Large"
FontAttributes="Bold"
VerticalTextAlignment="Center"></Label>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="HeaderTapped" CommandParameter="{Binding organisation_title}"></TapGestureRecognizer>
</StackLayout.GestureRecognizers>
</StackLayout>
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" ItemSpacing="1"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal">
<Frame IsVisible="{Binding isVisible}" HasShadow="True" BackgroundColor="White" Padding="0">
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<behaviors:Expander x:Name="MainExpander" CollapseAnimationLength="500" IsExpanded="False" IsVisible="True" >
<behaviors:Expander.Header>
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Frame HeightRequest="40" WidthRequest="40" CornerRadius="20" HorizontalOptions="Start" VerticalOptions="Center" Margin="20" Padding="0" BackgroundColor="Maroon">
<Label Text="{Binding student_initial}" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
</Frame>
<StackLayout Grid.Column="2" HorizontalOptions="StartAndExpand" VerticalOptions="Center" Margin="20">
<Label IsVisible="{Binding isVisible}" x:Name="StudentName" Text="{Binding student_fullname}"></Label>
<Label x:Name="StudentID" IsVisible="false" Text="{Binding student_unique_id}"></Label>
</StackLayout>
</Grid>
</behaviors:Expander.Header>
<Grid RowSpacing="0" HorizontalOptions="FillAndExpand" HeightRequest="240" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Text="Messages" Clicked="Button_Clicked"></Button>
<Button x:Name="btnTopUp" Grid.Row="1" Text="Quick Topup" Clicked="Button_Clicked" IsVisible="{Binding topup_product_id, Converter={StaticResource IsNotNullOrEmptyConverter}}"></Button>
<Button Grid.Row="2" Text="Payments" Clicked="Button_Clicked"></Button>
</Grid>
<!-- TODO: Look at adding a balance for childrens topups? -->
</behaviors:Expander>
</Grid>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
I did a test about it and it works fine, here are xaml and codebehind:
xmal:
<StackLayout>
<CollectionView x:Name="mycol">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout >
<Frame BackgroundColor="Red" IsVisible="{Binding isvisible}">
<Label Text="{Binding Name}"/>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
codebehind:
public partial class CollectionTest : ContentPage
{
ObservableCollection<People> peoples = new ObservableCollection<People> {
new People{ Name="Adam",isvisible=true},
new People{ Name="Bob",isvisible=true},
new People {Name="Adam2",isvisible=false },
new People{ Name="Bob2",isvisible=true} };
public CollectionTest()
{
InitializeComponent();
mycol.ItemsSource = peoples;
}
I have a CollectionView on my project with the most stable version of Xamarin Forms that supports CollectionView (4.3.0.908675) with the following code below.
<CollectionView x:Name="ScrollButtons"
ItemsSource="{Binding MenuItems}"
SelectedItem="{Binding SelectedMenuItem, Mode=TwoWay}"
Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2"
HeightRequest="90"
SelectionMode="Single"
SelectionChangedCommand="{Binding MenuItemSelectedCommand}"
BackgroundColor="{DynamicResource BackgroundColorShell}">
<CollectionView.Footer>
<!--HACK to keep showing last item on CollectionView -->
<BoxView BackgroundColor="Transparent" HeightRequest="90" WidthRequest="50"/>
</CollectionView.Footer>
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Horizontal"
Span="1" HorizontalItemSpacing="5"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid WidthRequest="90" HeightRequest="90" Padding="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Frame Grid.Column="0"
Grid.Row="0"
BorderColor="Black"
BackgroundColor="{Binding BackgroundColor}"
>
</Frame>
<StackLayout Padding="5" Grid.Row="0" Grid.Column="0">
<Label Text="{Binding Text}"
TextColor="{Binding TextColor}"
LineBreakMode="WordWrap"
FontSize="{StaticResource BaseFontSize}"
x:Name="tileLabel">
</Label>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand">
<Image Source="{Binding SecondaryIconSource}"
HorizontalOptions="Start"
VerticalOptions="EndAndExpand"
WidthRequest="25"
HeightRequest="25"
IsVisible="{Binding IsSecondaryIconVisible}"
/>
<Image Source= "{Binding ImageIcon}"
HorizontalOptions="EndAndExpand"
VerticalOptions="EndAndExpand"
WidthRequest="25"
HeightRequest="25"
x:Name="tileIcon">
</Image>
</StackLayout>
</StackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
OnMenuSelectedItemCommand
private async Task OnMenuItemSelected()
{
Console.WriteLine("OnMenuItemSelected");
await NavigationService.NavigateAsync($"{SelectedMenuItem.NavigationPath}");
HighlightedMenuItem = SelectedMenuItem;
SelectedMenuItem = null;
}
The CollectionView consists of a collection of BottomMenuItem class which inherits from BindableBase for Prism. My goal is to change the properties of a BottomMenuItem as its selected on the CollectionView. However, the collection view is acting weird and it only changes based on BottomMenuItem that is not currently in the screen. As shown below, it only works on the 5th item and beyond, items that are not initially loaded on the screen.
Any help would be greatly appreciated. Thank you!
I figured it out. The problem is that my code relies on the scrolling to an item in order for a selectedItem to be highlighted. I made an assumption that the bug is based on item cells that are initially loaded are not working but in reality it was items that doesn't need scrolling.
Based on my OnMenuItemSelected, I pass the highlighted item to the next page. Handle that logic with the OnNavigatingTo logic below.
public override async void OnNavigatingTo(INavigationParameters parameters)
{
base.OnNavigatingTo(parameters);
Console.WriteLine("OnNavigatingTo");
HighlightedMenuItem = parameters.GetValue<BottomMenuItem>("highlightedMenuItem");
foreach (var item in MenuItems)
{
item.IsActive = false;
}
if (HighlightedMenuItem != null)
{
Console.WriteLine("OnNavigatingTo HighlightedItem - {0}", HighlightedMenuItem.Text);
HighlightedMenuItem.IsActive = true;
}
}
I wish to get selected item for the GroupHeaderTemplate in ExpandableListView. But How to catch ExpandableListView group click event in Xamarin Forms , I am finding Solutions for Xamarin Android but none for the Forms . Moreover List item selection only works for child , How to get clicked event for Group Items. Any Link or Reference would be helpful.
My updated Xaml
<ListView VerticalOptions="FillAndExpand"
x:Name="HotelsList" SeparatorColor="Black"
BackgroundColor="Transparent" ItemSelected="HotelsList_ItemSelected"
IsGroupingEnabled="True"
IsPullToRefreshEnabled="true"
ItemsSource="{Binding StaffLoansList}"
RefreshCommand="{Binding LoadHotelsCommand}" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid VerticalOptions="StartAndExpand" Margin="10" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Aspect="AspectFit" HeightRequest="20" WidthRequest="30"
HorizontalOptions="StartAndExpand" Margin="5"
VerticalOptions="CenterAndExpand">
<Image.Source>
<FileImageSource File="{Binding ImageStatus}" />
</Image.Source>
</Image>
<Label Grid.Column="1" Text="{Binding actionName}" FontSize="15" HorizontalTextAlignment="Start"
HorizontalOptions="Start"
VerticalOptions="CenterAndExpand" />
<Label Grid.Column="2" Text="{Binding actionDate}" FontSize="15"
HorizontalOptions="EndAndExpand"
VerticalOptions="CenterAndExpand" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Label
FontSize="16"
Text="{Binding Name}"
TextColor="Gray"
VerticalOptions="Center">
</Label>
<Image x:Name="ImgA" Source="{Binding StateIcon}" Margin="0,0,5,0" HeightRequest="20" WidthRequest="20" HorizontalOptions="End">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.DummyCommand, Source={x:Reference HotelsList}}" NumberOfTapsRequired="1" CommandParameter="{Binding .}"/>
</Image.GestureRecognizers>
</Image>
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.ShowDetailCommand, Source={x:Reference HotelsList}}" CommandParameter="{Binding .}"/>
</Grid.GestureRecognizers>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
</ListView>
ViewModel
In Constructor:
ShowDetailCommand = new Command<StaffLoanPageViewModel>(Showdetail);
ViewModel Class
public ICommand ShowDetailCommand { get; set; }
public void Showdetail(object obj)
{
NavigationService.NavigateTo(ViewModelLocator.StaffLoanDetailPopupPage, Staffloans);
}
That's easy in your first child of ViewCell just add a GestureRecognizor
<ViewCell>
<Grid>
.
.
.
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.DoSomethingCommand, Source={x:Reference HotelsList}}"
CommandParameter="{Binding .}"/>
</Grid.GestureRecognizers>
</Grid>
</ViewCell>
Then in your command receive this tap event
DoSomethingCommand= new Command(DoSomething);
And your Commands receiver would look something like this:
private void DoSomething(object obj)
{
}
And in this obj object you will get your clicked item's details of the type which is bonded to the ListView, Note this will be a single object and not a collection
Update:
The command property would look something like this:
public ICommand DoSomethingCommand{ get; set; }
Hi I am creating an expanding ListView in Xamarin Forms. I have taken a grid with two rows. First height as 50.. and Second as AUTO... When I am clicking on first row and making the below row Visible. The below row becomes Visible but height of cell remains same.. I have made ListView rows as Uneven also.. Please find the code below
<localRenderer:NativeListView x:Name="SkillsListView"
HasUnevenRows="true"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1"
Margin="5,5,5,5"
SelectionMode="None"
BackgroundColor="#F3F4F6"
SeparatorVisibility="None"
>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Padding="0">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<AbsoluteLayout HorizontalOptions="FillAndExpand"
VerticalOptions="Fill"
HeightRequest="50"
Grid.Row="0"
BackgroundColor="#F3F4F5">
<AbsoluteLayout Margin="5,5,5,5" AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1"
BackgroundColor="#FCFCFD">
<Label Text="{Binding SkillCode}"
FontFamily="Roboto#300"
FontSize="16"
FontAttributes="None"
TextColor="#FF888888"
Margin="10,0,0,0"
AbsoluteLayout.LayoutBounds="0,0.5,-1,-1"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<Image x:Name="statusButton"
Margin="0,0,20,0"
Source="{Binding StateIcon}" HeightRequest="7" WidthRequest="13" AbsoluteLayout.LayoutBounds="1,0.5,-1,-1" AbsoluteLayout.LayoutFlags="PositionProportional" />
<Button AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1" BackgroundColor="Transparent" Clicked="SkillListHeaderTapped" CommandParameter="{Binding .}" />
</AbsoluteLayout>
</AbsoluteLayout>
<Editor Text="{Binding Description}"
FontFamily="Roboto#300"
FontSize="16"
IsEnabled="false"
IsVisible="{Binding IsVisible}"
Margin="10,0,0,10"
BackgroundColor="White"
FontAttributes="None"
Grid.Row="1"
TextColor="#FF686868"
/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</localRenderer:NativeListView>
I am trying to add a tap gesture to an Image within a ListView
The following Image renders correctly in the ListView without the Image.GestureRecognizers section, but with it, the ListView does not render anything at all (no error message). To clarify this, there is also a Label in the ListView and that does not render either.
<Image x:Name="newsImage" VerticalOptions="End" HeightRequest="200" WidthRequest="200" Aspect="AspectFill" Source="{Binding Imageurllarge}">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnTapGestureRecognizerTapped"
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
I took this from - http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/gestures/ (assume this example is for not listview image, but assumed it should work within a listview).
Also (as per comment suggestion)
<Image.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding TapCommand}"
CommandParameter="newsImage" />
Does not seem to fair any better.
If anyone has an example of how to add this in the code behind (without a viewmodel is fine) then that will do.
You can use the DataTemplate in the ListView and inside the DataTemplate have a Grid then add the UI elements. In the given sample, I am showing the Name, contact number and Image, I have used the GestureRecognizers on the Image. Try this:
<ListView x:Name="myListView" ItemsSource="{Binding Contacts}" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Height="75">
<Grid Padding="5">
<Grid.RowDefinitions>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="80"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Source="user_img.png" Grid.Column="0" Grid.RowSpan="2" VerticalOptions="CenterAndExpand"/>
<Label Grid.Row="0" Grid.Column="1" Font="16" Text="{Binding DisplayName}" LineBreakMode="TailTruncation"></Label>
<Label Grid.Row="1" Grid.Column="1" Font="12" Text="{Binding Number}" LineBreakMode="TailTruncation"></Label>
<Image Grid.Row="0" Grid.RowSpan="3" Grid.Column="2" Source="add.png" Aspect="AspectFill">
<Image.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding AddCommand}"
CommandParameter="{Binding Number}" />
</Image.GestureRecognizers>
</Image>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I have had success with TapGestureRecognizer in uses like this one by specifying it in XAML with its own x:Name attribute, then adding a tap handler in code.
Example markup:
<Image.GestureRecognizers>
<TapGestureRecognizer x:Name="tapImage" NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
Then in code something like:
this.tapImage.Tapped += async (object sender, EventArgs e) => {
... // Do whatever is wanted here
}
The handler need not necessarily be marked async, it is just common for my uses that something async is happening in there, like a confirm dialog or scanning a bar code.
You can also attach a gesture recognizer to an image inside a listview. The gesture recognizer can bind to a command in a view model
<ListView x:Name="ExampleList" SeparatorVisibility="None" VerticalOptions="Start" HeightRequest="{Binding HeightRequest}"
HasUnevenRows="True"
CachingStrategy="RecycleElement"
ItemsSource="{Binding FeedItems}"
IsPullToRefreshEnabled="True"
RefreshCommand="{Binding LoadItemsCommand}"
IsRefreshing="{Binding IsBusy, Mode=OneWay}">
<ListView.ItemTemplate >
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<StackLayout Orientation="Vertical">
<Label Text="{Binding TimeAgo}" FontSize="8"></Label>
<StackLayout Orientation="Horizontal">
<Image Source="Accept.png" HeightRequest="30" WidthRequest="45" IsVisible="{Binding IsAccepted, Converter={StaticResource inverse}}">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={StaticResource sampleViewModel}, Path=AcceptCommand}" CommandParameter="{Binding RequestID}" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>