Xamarin Picker add TagGesture - xamarin

I'd like to add a tap gesture to the Picker - so when a value is selected (double tapped) I can call a method. I have tried the following. But it never fires! Any ideas?
<Picker Grid.Row="5" Margin="0,0,100,0" Title=" -Select State" SelectedIndex="{Binding StatesSelectedIndex, Mode=TwoWay}" ItemsSource="{Binding PPStates}" ItemDisplayBinding="{Binding Path=[display_name]}">
<Picker.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding OnTapPicker}"
NumberOfTapsRequired="1" />
</Picker.GestureRecognizers>
</Picker>
I have tired the sample code in
https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/gestures/tap/
By adding this Tapped="OnTapGestureRecognizerTapped"

I don't know how you could do that in the way you desire, but you could fire the selectedindexchanged. If I'm right this should fire when the user selected one of the 50 states. Here you have some documentation about the picker.
https://developer.xamarin.com/api/type/Xamarin.Forms.Picker
If you want to use a picker that is bindable you should use this:
https://forums.xamarin.com/discussion/30801/xamarin-forms-bindable-picker
let me know if this helped you.
Edit:
Pickers are bindable by default nowadays

Related

How to recognize swipe gestures over a TableView in .NET MAUI?

I want to allow users to close a page by swiping down.
The page consists of a Grid with a TableView inside of it.
If I add the SwipeGestureRecognizer to the Grid, it works as expected, as long as I start swiping on the grid itself (i.e. outside of the TableView).
But if I start swiping over the table, nothing happens, even if I add the same type of gesture recognizer to the TableView.
I'm guessing it has something to do with the scrollability of the TableView.
Is there any way to make a "quick swipe" down trigger the command to close the page, while still allowing the user to scroll the table?
If not, is there a way to disable the scrollability of the table and instead have the gesture recognizer pick up the swipe?
<Grid>
<Grid.GestureRecognizers>
<SwipeGestureRecognizer Direction="Down" Command="{Binding Source={RelativeSource AncestorType={x:Type pages:DetailsPage}}, Path=BackCommand}" />
</Grid.GestureRecognizers>
<TableView>
<TableView.GestureRecognizers>
<SwipeGestureRecognizer Direction="Down" Command="{Binding Source={RelativeSource AncestorType={x:Type pages:DetailsPage}}, Path=BackCommand}" />
</TableView.GestureRecognizers>
<TableRoot>
<TableSection Title="Type">
<TextCell Text="Manufacturer" Detail="{Binding Manufacturer}" />
<TextCell Text="Model" Detail="{Binding Model}" />
</TableSection>
</TableRoot>
</TableView>
</Grid>

Flyout in Xamarin Forms

I am trying to implement Flyout in Xamarin forms. All the references that I have got are of shell.Flyout but none of them are fulfilling my requirements.
I am showing some data in a ListView and on the click of any perticular item I want the Flyout to open as shown in the mockup.
Please suggest any supporting library or control in Xamarin.
You can try and add it for each item then control the IsVisible attribute
something like this in your Listview item template
<FlexLayout Direction="Row" HorizontalOptions="CenterAndExpand">
<StackLayout FlexLayout.Basis="40%">
<Label Text="Item"
HorizontalTextAlignment="Center"/>
</StackLayout>
<StackLayout FlexLayout.Grow="1" Padding="5">
<Frame IsVisible="True">
<!--Your Flyout here-->
</Frame>
</StackLayout>
</FlexLayout>
But that means you have to manage them in the back code your self
changing the IsVisible attribute on the Flyout when an item of the list is clicked

Xamarin Forms: handle multiple item per row

In Xamarin Forms i want show multiple image (2) in a row: this is an example of what i'd like to do:
In many Q&A i've seen the use of XLabs gridview but the project is no longer maintained.
I think that i can create a custom cell with a stacklayout inside a row but the recycle policy work? And how can i handle the item tapped if i have two column per row?
Thanks
Alessandros answer should work, but if you want to roll something yourself without any third party controls, keep reading:
Recycling will still work if you use a Custom ViewCell. So I would suggest doing that and adding two items in a custom model and render them in one cell at a time.
Now for handling taps: Override the ItemSelected event on your ListView and set the ListView.SelectedItem to null. Then inside your custom ViewCell, add a TapGestureRecognizer to each of the separate models. One thing to note, is that the Command on your TapGestureRecognizer will bind to your individual list item, so you need to set it relative to the BindingContext of the ListView:
<ListView x:Name="MyListView" ...>
<ListView.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal>
<Image ...>
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={x:Reference MyListView}, Path=BindingContext.Item1Command}"/>
</Image.GestureRecognizers>
</Image>
<Image ...>
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={x:Reference MyListView}, Path=BindingContext.Item2Command}"/>
</Image.GestureRecognizers
</Image>
</StackLayout>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You can take a look to this FlowListView.
I have never used it but sounds good.
<flv:FlowListView.FlowColumnTemplate>
<DataTemplate>
<Label HorizontalOptions="Fill" VerticalOptions="Fill"
XAlign="Center" YAlign="Center" Text="{Binding Title}"/>
</DataTemplate>
</flv:FlowListView.FlowColumnTemplate>

get listview values after click on menuItem

how to pick up the values of a listview done in WindowsPhone 8.1 then click on a MenuFlyoutItem. Example I have a listview with id, name and telephone after holding the list to appear MenuFlyoutItem want to click on a menu option and know the values of the id, name and telephone number of the line selected.
I think that this question was answered many times but I will try to give you a solution.
You can add flyout to ItemTemplate of your ListView, like this:
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<FlyoutBase.AttachedFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Delete" />
<MenuFlyoutItem Text="Refresh" />
<MenuFlyoutItem Text="Share" />
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
<TextBlock Text="{Binding Title}" Style="{ThemeResource ListViewItemTextBlockStyle}" />
</StackPanel>
</DataTemplate>
Now, MenuFlyoutItem has event named "Click" so if you are using a "code-behind" approach you can create event handlers for your click events of menuFlyoutItems in page code. I believe that event args of this event will have information about which item was clicked.
Please look at this blog note I found, it may be useful for you:
http://igrali.com/2014/04/28/show-context-menu-using-menuflyout-windows-phone-8-1/

Getting Tap even of user control in viewmodel

In my application i am using a content control to display my user control
<ContentControl Content="{Binding LayoutControl}" Grid.Row="0" Height="700" Width="450"/>
In here the binding content is a user control with the following elements.
<Grid x:Name="LayoutRoot" Background="#6C7172">
<Border BorderBrush="White" BorderThickness="7">
<Image Source="{Binding ImagePath0}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<cmd:EventToCommand Command="{Binding Path=ImageTap}" PassEventArgsToCommand="True"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
</Border>
</Grid>
In the above code what i am tried to implement is, while tapping on the image i need to fire the corresponding event in my view model, But through this code the tap event is not firing. But when i apply the interactivity to content control the click is working. I cannot simply add tap event to content control because some other cases i need to handle tap events of more than two Image controls . Can any one help me to solve this issue.
Give a fixed height and width to you image control and then try. It will work. If there is no image in the container means, the mouse will not get a position for tapping. Try this and if you still face the same issue give me a feedback.

Resources