How to handle touch event for a FlexLayout in Xamarin - c#

So Im building an app where I should show multiple products, since I want to show more than just one product in one row, i couldn't use a ListView, so I thought about using a FlexLayout as a Bindable-Layout and use the ItemsSource to display my list of products, whiche was a sucess. So I wanted to add a touch event to each of my products shown in the flexlayout, to do so I created a new Behaviour, this is the link for the code I used :
https://gist.github.com/jtaubensee/96a5e49c66a205e36ff32787f1d2114d
that did work and therefor I can use a Command. my problem is that I want to get the product that was clicked, and I can't figure out how to do ? is there anyone who can possibly help me with that ?

If you are not adverse to xaml, this is how I handle it.
<FlexLayout BindableLayout.ItemsSource="{Binding Abilities}" IsVisible="{Binding HasAbilities}" BindableLayout.ItemTemplate="{DataTemplate attitm:AttachedAbility}"
AlignItems="Center" Wrap="Wrap" JustifyContent="Center"/>
and the template implements the touch gesture, and passes the object as the Command Parameter;
<ContentView.Content>
<StackLayout Padding="20,8" HorizontalOptions="Center">
<Frame BorderColor="{OnPlatform Android=DarkCyan, UWP=Accent}" Padding="4">
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding DrillIntoCommand}" CommandParameter="{Binding}"/>
</Frame.GestureRecognizers>
<StackLayout HorizontalOptions="Center" Orientation="Horizontal">
<Label x:Name="TitleLabel" Text="{Binding Title}" HorizontalOptions="Center" VerticalOptions="Center"/>
<Label Text="" FontFamily="{StaticResource FontAwesomeSolid}" IsVisible="{Binding IsUserCreated}" TextColor="Orange" HorizontalOptions="Center"/>
</StackLayout>
</Frame>
</StackLayout>
</ContentView.Content>

Related

Xamarin forms select carousel item

I am learning Xamarin, I would like to get the value of the carousel item selected. I cannot add ItemSelected as in a listview.
Here my Xaml code :
<CarouselView x:Name="NewsList" >
<CarouselView.ItemTemplate >
<DataTemplate>
<StackLayout>
<Frame HasShadow="True"
BorderColor="DarkGray"
CornerRadius="5"
Margin="20"
HeightRequest="300"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<StackLayout>
<Label Text="{Binding NewsName}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="Center" />
<Image Source="{Binding NewsImageUrl}"
Aspect="Fill"
HeightRequest="150"
WidthRequest="150"
HorizontalOptions="Center" />
<Label Text="{Binding ProviderAndDate}"
HorizontalOptions="Center" />
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
Here is the function I would like to use once my item is selected: Get the value of NewsName and ProviderAndDate
private void OnFrameTapped(object sender, EventArgs e)
{
Console.WriteLine("SelectedNewsName" + "SelectedNewsProviderAndDate");
}
Thanks for your help
CarouselView is sort of a different control when it comes to visualization and events than a ListView so you will have to come up with sort of a different solution too
The easiest way to do something similar to a selected item event here would need customization from your side to add the event in.
A good workaround would be just using the CurrentItem property or passing a CommandParameter on the Tap of a Frame!
<StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CarouselItemTapped,Source={x:Reference currentPage}}" CommandParameter="{Binding .}"/>
</StackLayout.GestureRecognizers>
<Frame ...... />
And then give your current contentpage a x:Name
<ContentPage ..... X:Name="currentPage"
Now in your xaml.cs
Public ICommand CarouselItemTapped{ get; set; }
In the Constructor:
CarouselItemTapped= new Xamarin.Forms.Command((selectItem)=>{//Perform action here});
Feel free to get back if you have questions
More about Commands: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/data-binding/commanding
More about CarouselView: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/carouselview/
Late but it might help someone. The one who is using BindingContext to bind the data, they can get tapped model as shown below.
private void OnFrameTapped(object sender, EventArgs e)
{
var frame = sender as Frame;
var x = frame.BindingContext as YOURMODEL;
}

Why is my Picker's Focused+Unfocused event firing when an Editor is tapped in the same ViewCell?

Using Xamarin.Forms. I have a ListView containing multiple ViewCells and in each one is a Picker and an Editor. Tapping the Editor fires Editor_Focused, but for some reason also fires Picker_Focused and Picker_Unfocused. I use the Picker_Unfocused event handler to add some data to a SQLite database and then refresh the ListView, so I can't have it firing every time the Editor is tapped. Following along with breakpoints, my refresher method is called twice, because Picker_Unfocused is also called twice for unknown reaons. Also worth noting is that Editor_Completed won't fire no matter what I do.
Things I have tried:
Adding a TapGestureRecognizer to the Editor which would set a property, which would then stop Picker_Unfocused from continuing its execution, but the TapGestureRecognizer never fires when the Editor is tapped.
Assigning a value to a property when Editor_Focused is fired that would do the same as above. Editor_Focused does fire first, but then leaves that property in the "don't fire Picker_Unfocused" state even when the Picker actually needs to be used. Countering that by setting the property back to "do fire" state in Picker_Focused doesn't work, as the order goes Editor_Focused -> Picker_Focused -> Picker_Unfocused -> Refresh list method.
Update: Forgot to include any code.
ListView defined in XAML.
<ListView x:Name="ListView"
HasUnevenRows="True"
SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="0,5,0,0">
<Label Text="{Binding Prop0}"
TextColor="DodgerBlue"
VerticalOptions="Center"/>
<Label Text="{Binding Prop1}"
TextColor="Black"
HorizontalOptions="StartAndExpand"
VerticalOptions="Center"/>
<Label Text="Task Time:" TextColor="Black" HorizontalOptions="End"
VerticalOptions="Center"/>
<Picker x:Name="Picker" WidthRequest="80"
Title="Enter time"
FontSize="15"
Focused="Picker_Focused"
Unfocused="Picker_Unfocused"
SelectedItem="{Binding Prop2}">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>0.25</x:String>
<x:String>0.50</x:String>
<x:String>0.75</x:String>
<x:String>1.00</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
IsVisible="{Binding Prop3}">
<Label Text="Comments:" TextColor="Black" VerticalOptions="Center"/>
<Editor x:Name="Editor" Text="{Binding Prop4}" TextColor="Black"
VerticalOptions="Center" HorizontalOptions="StartAndExpand" Focused="Editor_Focused"/>
</StackLayout>
</StackLayout>
<ViewCell.ContextActions>
<MenuItem Text="Delete"
x:Name="DeleteButton"
Clicked="DeleteButton_Clicked"
IsDestructive="True"
CommandParameter="{Binding .}"/>
</ViewCell.ContextActions>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

TapGestureRecognizer no longer working in xamarin.forms

This used to work for me but no longer does. Maybe because of updates? But I am just trying to get a tap event attached to my label called JournalWarning. I was using TapGestureRecognizer.
Before I had the TapGestureRecognizer calling an OnReconnect method in xaml like so
<StackLayout x:Name="Journal" IsVisible="false" VerticalOptions="FillAndExpand" Padding="20, 0, 20, 20" Spacing="10">
<StackLayout Orientation="Horizontal">
<Label x:Name="JournalTitle" FontSize="Micro" />
<Label x:Name="AboutFormat" Text="About Formatted Text" FontSize="Micro" TextColor="{StaticResource InputBackgroundColor}" HorizontalTextAlignment="End" HorizontalOptions="EndAndExpand" />
</StackLayout>
<StackLayout>
<local:DarkKeyboardEditor x:Name="JournalContent" Text="{Binding Source={x:Static local:JournalTracker.Current}, Path=Content}" TextChanged="OnJournalChanged" Focused="OnEdit" Unfocused="OffEdit" FontSize="Small" HeightRequest="{Binding Source={x:Static local:JournalTracker.Current}, Path=EntryHeight}" />
<Label x:Name="JournalWarning" Text="Your device has lost its connection to the journal server. Journals cannot be viewed or edited at this time. Tap here to try and reconnect." FontSize="Medium" Style="{StaticResource warningLabelStyle}" IsVisible="{Binding Source={x:Static local:JournalTracker.Current}, Path=IsConnected, Converter={StaticResource inverser}}" VerticalOptions="EndAndExpand" AutomationProperties.IsInAccessibleTree="true">
<Label.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnReconnect" />
</Label.GestureRecognizers>
</Label>
<BoxView x:Name="spacer" Style="{StaticResource SpacerStyle}" />
</StackLayout>
</StackLayout>
This stopped working so I thought maybe my padding was in the way and started to take away padding and margins but that made no difference so far. I also tried making the TapGestureRecognizer in C# like...
var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += (s, e) => {
OnReconnect();
};
JournalWarning.GestureRecognizers.Add(tapGestureRecognizer);
Thought about making a command instead to see if that would make a difference. I'll probably try that next idk, this seems like a really noob question and I'm not sure why this isn't getting hit at all.
Can you see anything that might be an issue? Or did something changed in an update that I missed? Thanks

Xamarin Listview with grouping won't scroll

I'm working on my first Xamarin app. I want to make a listview with grouping and it succeeded. The only problem I have that it won't scroll. My other listview on another page scrolls without a problem, but my listview with grouping won't do that. I tried this both on an Android simulator as on my Android phone (I don't have a macbook or something to test on iOS), and it won't scroll on either of them. I looked it up but a lot of people put the listview in a scrollview, and I didn't do that.
This is my XAML code:
<StackLayout Margin="10" Orientation="Vertical">
<Label Text="{Binding Title}" FontAttributes="Bold"
FontSize="20" HorizontalOptions="CenterAndExpand" />
<Label Text="{Binding Subtitle}" FontAttributes="Italic"
FontSize="15" HorizontalOptions="CenterAndExpand" />
<ListView HasUnevenRows="True" SeparatorColor="Accent"
VerticalOptions="FillAndExpand" IsEnabled="False"
IsGroupingEnabled="True" GroupDisplayBinding="{Binding Key}"
ItemsSource="{Binding ScansGroup}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Spacing="4">
<StackLayout Orientation="Horizontal" Margin="10,7,10,1">
<Label Text="{Binding Location, StringFormat='{0}'}"
FontAttributes="Bold" FontSize="16" />
<Label Text="{Binding DateTime, StringFormat='{0:dd/MM/y HH:mm}'}"
HorizontalOptions="EndAndExpand" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding ElapsedTimeOnLocation}"
HorizontalOptions="Start"
Margin="10,0,10,7" />
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
I put it in an MVVM structure, and the grouping I did with a MVVM helper that I got from here https://channel9.msdn.com/Shows/XamarinShow/The-Xamarin-Show-12-MVVM-Helpers .
My code behind that is meant for the grouping is the following:
public ObservableRangeCollection<Grouping<string, ScanViewModel>> ScansGroup { get; } =
new ObservableRangeCollection<Grouping<string, ScanViewModel>>();
void Group()
{
var grouped = from scan in Scans
group scan by scan.Day into scanGroup
select new Grouping<string, ScanViewModel>(scanGroup.Key, scanGroup);
ScansGroup.ReplaceRange(grouped);
}
The grouping shows perfectly and the list too. The only problem is that
I can't scroll. Can someone help me?
I've figured it out. There's nothing wrong with your grouping. In your code you set IsEnabled="False" to the ListView. It makes the listview's scroll ability to be handled just if you drag from an enabled item inside the ListView, and even thus, the scroll is like belittled and with a very bad user experience.
Just set your ListView like this:
<ListView HasUnevenRows="True"
SeparatorColor="Accent"
VerticalOptions="FillAndExpand"
IsEnabled="True"
IsGroupingEnabled="True"
GroupDisplayBinding="{Binding Key}"
ItemsSource="{Binding ScansGroup}">
...
</ListView>
I can't tell you if it was designed to be this way, or if it 's a bug, but it is the cause of your issue.
It's probable you have done this to handle some unwanted behavior. If so, let us know what is specifically your intend with this IsEnabled="False", then we'll be able to help you with this.
I hope it helps you.
You didn't add the template for the group. Add this in the <ListView>
<ListView.GroupHeaderTemplate >
<DataTemplate >
<ViewCell Height="28" >
<Label Text="{Binding GroupName}" VerticalTextAlignment="Center" HorizontalOptions="Start" />
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
Also, in the code bend or ViewModel, you need to bind to a group class of the items you want in the list such as:
public class GroupDetails : ObservableCollection<SomeItemsToShow>
{
public string GroupName { get; set; }
}
Check out this Example for more details:
https://xamarinhelp.com/xamarin-forms-listview-grouping/

Xamarin Editor not showing keyboard in ListView

I am totally new to xamarin,
Following is my code :
<ListView x:Name="boxActivitiesList" ItemTapped="boxActivitiesList_ItemTapped" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" Padding="25" VerticalOptions="Start" HorizontalOptions="Start">
<Label Text="{Binding Box}" TextColor="BlueViolet" FontSize="16" FontAttributes="Bold" LineBreakMode="TailTruncation" />
<TableView IsVisible="{Binding IsVisible}" Intent="Settings" HasUnevenRows="True" BackgroundColor="White">
<TableRoot>
<TableSection>
<ViewCell>
<StackLayout Orientation="Horizontal" Padding="15,0">
<Label HorizontalOptions="Fill" Text="Remarks" VerticalOptions="Center" TextColor="Black"></Label>
<Editor x:Name="txtRemarks" HorizontalOptions="FillAndExpand"></Editor>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
<Button x:Name="btnSave" Text="Save" Clicked="btnSave_Clicked" CommandParameter="{Binding BoxId}" IsVisible="{Binding IsVisible}"></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
When I click on Editor, Keyboard does not show. Can you please tell me what I am doing wrong.
I'm not sure why the Editor is not working in the Table, however i would reconsider this design and just use a Grid to realize a more complex layout inside your parent ViewCell.
Although there should be nothing wrong with the way you have it, it does seem to be overly complicating things with more nested controls when its not really needed. Ergo, the nested table should really just be a layout like Grid or StackPanel
Lastly, Xamarin.Forms can be a little fickle at the best of times with the various devices it supports. so its best to keep things as simple as possible

Categories

Resources