I'm experimenting with the new SwipeView controls in Xamarin forms 4.4, and have been going through the FavFighters example (Code on Github) and think it's brilliant.
I'm able to add a Swipe right/left gesture as I wanted, but I can't find out how to add an OnClick event to an item in the list, in a Master/Detail type of project. I was hoping to use the swipe left/right actions for shortcuts, but want the user to click on the listed item to drill-into it further.
Is there a way of adding an OnClick (or an onSelected) event to the SwipeView items?
Yes you can definitely go with Xamarin.Forms.Effects which allows you implement different effects with native features.
You can refer this: https://github.com/mrxten/XamEffects it shows how to have tap effect, long tap effect, which will be helpful in your case [you can do that even without installing third party plugin].
Do you want to achieve the result like following GIF.
If you want to add the click event for your SwipeView. you just add the GestureRecognizers in your swipeView like following code.
<SwipeView>
<SwipeView.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</SwipeView.GestureRecognizers>
<SwipeView.LeftItems>
<SwipeItems>
<SwipeItem Text="Favorite"
BackgroundColor="LightGreen"
Invoked="SwipeItem_Invoked" />
<SwipeItem Text="Delete"
BackgroundColor="LightPink"
Invoked="SwipeItem_Invoked_1" />
</SwipeItems>
</SwipeView.LeftItems>
<!-- Content -->
<Grid HeightRequest="60"
WidthRequest="300"
BackgroundColor="LightGray">
<Label Text="Swipe right"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Grid>
</SwipeView>
In the background code.
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
Navigation.PushModalAsync(new Page1());
}
Related
I have a card in Xamarin Forms that I want to be visible only if a button is visible as well. For some reason the same IsVisible attribute for the button isn't working for the card, so is there a way for me to say if the button is visible, let the card be visible?
<cor:BindableToolbarItem x:Name="Inside"
Command="{Binding InsideCommand}"
IsVisible="{Binding SelectedReading.Inside, Converter={StaticResource valueIsNotNull}}"
Icon="hi.png"
Order="Primary" />
That's the button on the toolbar:
<controls:InsideCard
BindingContext="{x:Reference Inside}"
IsVisible="{Binding SelectedReading.Inside, Converter={StaticResource valueIsNotNull}}">
</controls:InsideCard>
As you can see the IsVisible is the same for both, but it isn't working, so I tried referencing the button inside the card but it doesn't work obviously. How can I do it properly?
The BindingContext is set to the Inside element hence the SelectedReading.Inside property will not be available in the Inside object. Hence the binding won't work. Bind the IsVisible property of Inside.
<controls:InsideCard BindingContext="{x:Reference Inside}" IsVisible="{Binding IsVisible}"/>
Or set the source of binding to {x:Reference Inside} in Binding markup itself.
<controls:InsideCard IsVisible="{Binding IsVisible, Source={x:Reference Inside}}"/>
Just to add:
Moreover binding same property to two different Views should work too (If you are setting it in ViewModel). Or also setting Mode as TwoWay for Inside element. For both the cases you must have implemented the NotifyPropertyChanged for the binded property of ViewModel.
<Label
x:Name="label1"
IsVisible="{Binding ViewVisiblity}"
Text="Hi there"/>
<Label
x:Name="label2"
Text="Hi there2"
IsVisible="{Binding ViewVisiblity, Mode=TwoWay}"/>
How to hide keyboard of an entry.I have an entry inside of a listview. When I tap on the entry the keyboard is showing, but the keyboard is not hiding when I tap outside. The listview row is adding dynamically so in first case only one row is in it.Android is working perfectly. But in iOS this issue is there.
Please help me
<ListView HorizontalOptions="FillAndExpand" ItemsSource="_list"
VerticalOptions="FillAndExpand"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation=Horizontal>
<Label Text="Name"/>
<Entry PlaceHolder="Name" />
<Label Text="+" FontSize="50">
<Label .GestureRecognizers>
<TapGestureRecognizer Tapped="AddMore_Tapped"
CommandParameter="{Binding Id}"/>
</Label .GestureRecognizers>
</Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Xaml.CS
private async void AddMore_Tapped(object sender, EventArgs e)
{
_list.Add("1");
}
here is my code,
first time only one row is there after clicking the "+" icon one row will be added to listview. So in the case of listview with one row, when I tap on that entry the keyboard is showing, but when I tap outside it's not hiding.It's hiding only when I tap on the first row.
You could update your Xamarin.forms version to the last.
In ios, the keyboard would hide when you click on the other place of listview except the “+” label.
Or you could use custom renderer to make the done button, to hide the keyboard manually.
CustomEntry:cs
public class CustomEntry : Entry
{
}
CustomEntryRenderer.cs
[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomEntryRenderer))]
namespace HidekeyboardOfEntryDemo.iOS
{
public class CustomEntryRenderer : EntryRenderer
{
private UITextField textField;
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
textField = (UITextField)this.Control;
textField.ReturnKeyType = UIReturnKeyType.Done;
}
}
}
Usage
<hidekeyboardofentrydemo:CustomEntry Placeholder="Name" />
You could download HidekeyboardOfEntryDemo project from GitHub for reference.
https://github.com/WendyZang/Test.git
I am writing a cross-platform application (IOS, Droid) and like to catch all the Pan Gestures.
The problem is that I have (buttons + Webview) on my interface. none of them catch the "Pan Gestures". If the user swipe over the button I catch only the click event.
<Grid VerticalOptions="Fill" HorizontalOptions="Fill">
<Grid.GestureRecognizers>
<PanGestureRecognizer PanUpdated="OnPanUpdated" />
</Grid.GestureRecognizers>
<Button text="Test" />
<Webview />
</Grid>
void OnPanUpdated(object sender, PanUpdatedEventArgs e)
{
//My code here
}
It should detect the Pan event anywhere, but it did not do with the Webview and button.
Idea
Can I put a transparent control over the form that can allow click events to go through, but at the same time can catch the Pan event only?
I tried to use custom render and nothing help.
Thanks in advance
In SL4 DataGrid I have the following multicontrol column:
<sdk:DataGridTemplateColumn Header="Address Line1
Address Line 2" MinWidth="200">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Address1}"/>
<TextBlock Text="{Binding Path=Address2}"/>
</StackPanel>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
<sdk:DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<StackPanel>
<TextBox Background="Transparent" BorderThickness="0"
TabIndex="0"
Text="{Binding Path=Address1, Mode=TwoWay}"/>
<TextBox Background="Transparent" BorderThickness="0"
TabIndex="1"
Text="{Binding Path=Address2, Mode=TwoWay}"/>
</StackPanel>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellEditingTemplate>
</sdk:DataGridTemplateColumn>
In edit mode pressing Tab key while at address1 moves focus to next DataGrid column but not to address2 textbox. If I delete CellTemplate and CellEditingTemplate to be CellTemplate instead, then TabIndex works as expected, however, current column stay the same, so if datagrid has many columns, some of which are hidden, then auto scrolling doesn't occur. What should I do to solve this problem?
A little bit late, but i found a workaround for this problem.
Just add a KeyDown EventHandler to your CustomControl:
private void address1_KeyDown(object sender, KeyEventArgs e)
{
if (e.Key.Equals(Key.Tab) && address2.IsEnabled)
{
address2.Focus();
e.Handled = true;
}
}
Probably, having multiple controls inside datagrid cell is bad idea. If multiple controls needs to be inside cell, then better way seems to be to create custom composite control and place it inside cell.
I am using a code snippet from codeproject of dropdown button.
< m:SplitButton Content="TWB" Name="btnSearch"
Grid.Row="0" Grid.Column="0"
Style="{StaticResource aeroNormalColorSplitButtonStyle}"
Click="btnSearch_Click"
Width="60" Height="30"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Mode="{Binding ElementName=modeSelector, Path=SelectedItem}"
Placement="{Binding ElementName=placementSelector, Path=SelectedItem}" MouseLeftButtonDown="btnSearch_MouseLeftButtonDown"
MenuItem Header="TWB"/>
MenuItem Header="PWB">
/MenuItem>
</m:SplitButton>
so, beside this splitdown button, I have a textbox(which is basically a search box). So, as the above code snippet shows the 2 menu items as "TWB" and "PWB", I have to fill the textbox when TWB is selected from the dropdown button and also the same text should be displayed on the button too (TWB).
if i click PWB from the dropdownbutton, I should get the "PWB" name on the button and the same PWB name should be displayed in the textbox too.
Please help me.
Thank You,
Ramm
I tried by adding ListBox to the SplitButton, Now I am able to see the text in the textbox.
Modified the above Xaml code to
<m:SplitButton Content="TWB" Name="btnSearch"
Grid.Row="0" Grid.Column="0"
Style="{StaticResource aeroNormalColorSplitButtonStyle}"
Click="btnSearch_Click"
Width="60" Height="30"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Mode="{Binding ElementName=modeSelector, Path=SelectedItem}"
Placement="{Binding ElementName=placementSelector, Path=SelectedItem}">
<ListBox x:Name="TransitionKind" SelectionChanged="TransitionKind_SelectionChanged">
<ListBoxItem Content="TWB"/>
<ListBoxItem Content="PWB"/>
</ListBox>
</m:SplitButton>
in the code behind,
btnSearch.Click += new RoutedEventHandler(btnSearch_Click);
TransitionKind.SelectionChanged += new System.Windows.Controls.SelectionChangedEventHandler(TransitionKind_SelectionChanged);
private void TransitionKind_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
btnSearch.Content = ((ListBoxItem)TransitionKind.SelectedItem).Content;
txtBxSearch.Text = "Search " + (string) btnSearch.Content;
}
Now, I am able to see the text in the textbox changing to the click of dropdown button.
Thank you,
Ramm