In my Xamarin.Forms app, I have a view in my StackLayout. I want to make an effect so that when the user presses on the StackLayout the background changes color, and then reverts the color back when the user releases his/her finger, for a "flash" effect.
I was advised that since views don't have an "on pressed" event, I would have to use a custom renderer. But I don't know how to make a custom renderer for a StackLayout?
You don't really need a CustomRenderer to have a "on pressed" event on your StackLayout, you can use TapGestureRecognizer instead.
<StackLayout>
...
<StackLayout.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnTapGestureRecognizerTapped" />
</StackLayout.GestureRecognizers>
</StackLayout>
You can read more about GestureRecognizers in the official documentation.
P.S.: If you really need to react to "finger release" than you might need an Effect or a CustomRenderer.
Related
I'm new to Xamarin and would like to implement something like animated circular "SOS button" in Xamarin forms. Intended functionality is that if user presses and holds the button for more than 3 second (countdown period) some activity will be initiated.
I want the SOS button to be visually attractive so when user presses and holds the button some progress animation will occur around the button indicating that the button is pressed and countdown to SOS action is started. If the button will be released sooner everything will be reset back to its initial state.
We've created different button bitmaps (animations) that represent the countdown progress and decided to use SKCanvasView to render them during the countdown period. And now the issue begins as we need to recognize Press and Release events made on SKCanvasView from SKiaSharp.Views.Forms assembly. There is only TapGestureRecognizer available according to my investigation.
Can you recommend, point me to solution how to catch press and release events on SKCanvasView in Xamarin forms so I can implement above mentioned functionality?
Thank you
After some research I've used following initial approach. I've placed button on canvas and used its Pressed and Released events to draw on background canvas. I will continue to investigate more regarding custom renderers that might be ideal fine tuned solution.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
x:Class="SkiaSharpFormsDemos.Basics.TapToggleFillPage"
Title="Tap Toggle Fill">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<skia:SKCanvasView x:Name="Canvas" PaintSurface="OnCanvasViewPaintSurface" VerticalOptions="Fill" HorizontalOptions="Fill">
</skia:SKCanvasView>
<Button Text="SOS"
VerticalOptions="Center"
HorizontalOptions="Center"
WidthRequest="160"
HeightRequest="160"
BackgroundColor="#B91F67"
BorderColor="Red"
BorderRadius="120"
TextColor="White"
FontSize="40"
FontAttributes="Bold"
Grid.Row="0"
Pressed="OnButtonPressed"
Released="OnButtonReleased"/>
</Grid>
</ContentPage>
How to use ComboBox in Xamarin forms because xamarin forms does not have ComboBox Control, In my application i want to show list of country, so that user can select country(search as well as dropdown)both way, Give me suggestion to resolve this issue
Note:I found one solution syncfusion combobox but that is paid service, i don't want paid service
Xamarin Forms does include a combo box control, it just isn't called a combo box. XF calls it a Picker. It's pretty easy to use and includes properties you can bind to for ItemSource and SelectedItem/SelectedIndex.
You can use Picker control at xamarin to achieve list some objects in a box.
I recommend you to follow the MVVM pattern to bind datasource and handle events. There is code samples for it that created by Microsoft.
But basically you have to add a Picker to your xaml:
<StackLayout Margin="20">
<Label Text="Bindable Picker Demo" FontAttributes="Bold" HorizontalOptions="Center" />
<Picker Title="Select a country" ItemsSource="{Binding CountryList}" SelectedItem="{Binding SelectedColorName, Mode=TwoWay}" />
</StackLayout>
And in your model just set your Countrylist property and It is selected item.
public IList<string> CountryList
{
get
{
return new List<string> {"USA","Germany","England"};
}
}
If you want to make search in your Picker you have to create your own control. According your wishes an Entry and a Listview may be enough. You have to update your list in TextChanged event of Entry.
You can create your own ListView with ItemsSource as a country list, and SearchView with TextChanged method, where you change your ItemsSource by search value (and firstly, ItemsSource would be empty, because of empty search filter).
Also you can check this link, that could be also useful.
UPDATE:
If you need a searchable Picker, there is a github project, that you can use. It has a search. Link to project.
Using Picker Control is useful for creating Combo Box
Step1: Follow First Criteria for Layout Control in .xaml File
<StackLayout>
<Picker Title="Placeholder" BackgroundColor="Red" x:Name="liname"></Picker>
</StackLayout>
Step2: Now Add the the Values in .xaml.cs File
public yourcode()
{
InitializeComponent();
liname.Items.Add("class1");
liname.Items.Add("class2");
liname.Items.Add("class3");
liname.Items.Add("class4");
}
Now Start the Emulator in Vs, See the Output Screen Below of my Code
I got a solution guys. I am using picker instead of combo box, There is no combo box option in xamarin forms, If you want exact combo box, need to subscribe syncfusion
I have a view in my Xamarin forms application where I need to detect if the user is interacting with the screen or not, and go back to the previous view afteer some time if there is no activity.
Is there a simple way to detect it from my ViewModel?
Otherwise, detecting the scrolling on a ListView can be enough. But the ListView has no "Scrolled" event... Maybe with a GestureRecognizer ?
What can I do ?
This was interesting so I tried it on a project I am working on
I added this to the scrollview which contains all the views in my page but you can add it to any view you want:
<ScrollView.GestureRecognizers>
<TapGestureRecognizer Command="{Binding HelpClickedCommand}" NumberOfTapsRequired="1" />
</ScrollView.GestureRecognizers>
It's working fine and the command is fired when you tab on the screen but not when you swipe or scroll.
I think the new update of Xamarin will include the Swipe gesture but for now, many people implemented the swipe using pan gesture and some other simple gestures.
Here is a nice article I found with sample code in GitHub and I am sure that I found a nice example with all gestures. If I found it I will update you
Gesture Recognizers with Xamarin.Forms
I am using ListView control in Xamarin.Forms. In that, I have loaded a Label view as child view using ItemTemplate in ListView like below,
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<Label Text="MyLabel"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Now, if I touch the label, events related to the label only triggered since the touch is passed to Label view. But I need to trigger the touch events of the parent view(here ListView) i.e., need to pass the touch to ListView.
Is it possible to achieve this?
Thanks in advance.
Yes. It is possible to achieve this in Xamarin.Forms.
Set the "InputTransparent" property of Label view to "false" as below,
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<Label Text="MyLabel" InputTransparent="true"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
So, the touch will be passed to the parent view. i.e, ListView in your case.
I am currently using a Datagrid binding to a list of items in Silverlight 3. Each row has two checkboxes. Anyone please help me how to prevent the Datagrid from firing the Selection_Changed event each time I click on any checkbox? I have been stuck with this for some days, deadline is coming near.
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
<data:DataGridTemplateColumn Header="Track" SortMemberPath="IsTracked" CanUserResize="False" CanUserReorder="False">
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<CheckBox
Tag="{Binding unitID, Mode=OneWay}"
Click="ShowB_Clicked" IsChecked="{Binding IsTracked, Mode=TwoWay}"></CheckBox>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
</data:DataGrid.Columns>
When I click on either the checkbox, the dgList_SelectionChanged of the Datagrid is fired and the SelectedIndex/Item also changed to the row that contains the clicked checkbox. What I want is not change the SelectedItem, in other word not fire dgList_SelectionChanged, of the datagrid.
Please help.
Thanks alot in advance.
Middlevn
Having a similar issue, starting to contemplate putting a see-through image over the checkbox to prevent the click, then use the cell changed event to get the checkbox value, then on current cell change set the current cell to something else.
I can't wait for better support for html5 so I can dump this MS garbage