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>
Related
I am using FlowListView for showing multiple items in a row and label to show the content on UI. My problem is label text sometimes showing only a part of the data. There is enough space on the UI, but sometimes it only shows a single word from the data. It is also happening when scrolling. Initially show full content, after scroll down and coming back only the first word of the content is present in the UI.
I have uploaded a sample on here. The first content is Act of Contrition, but sometimes it shows only Act on UI.
Also, there is a problem with the expected UI(Mainly on IOS).
Suggest me solution for these 2 problems.
Thanks in advance.
For the question 1:You can change the Label code like following code.
<Label
Text="{Binding title}"
FontSize="Large"
TextColor="Black"
HorizontalOptions="FillAndExpand"
Margin="10,0,0,0"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
VerticalOptions="FillAndExpand"
/>
For the second question, you can see this thread, Cole has test this issue in the IPhone 7 and IPhone 11, both of all them are Ok.
https://forums.xamarin.com/discussion/173197/label-text-sometimes-showing-only-first-word-on-ui
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
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.
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 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