Is there a custom circular activity indicator for UWP/ Win10 apps using Xamarin?
Is there a custom circular activity indicator for UWP/ Win10 apps using Xamarin?
You need to create your own View for UWP's ProgressRing:
Shared Project\MyProgressRing.cs:
public class MyProgressRing:View
{
}
UWP Project\MyProgressRingRenderer.cs:
[assembly:ExportRenderer(typeof(MyProgressRing),typeof(MyProgressRingRenderer))]
namespace CircularActivityDemo.UWP
{
public class MyProgressRingRenderer:ViewRenderer<MyProgressRing,ProgressRing>
{
ProgressRing ring;
protected override void OnElementChanged(ElementChangedEventArgs<MyProgressRing> e)
{
base.OnElementChanged(e);
if (Control == null)
{
ring = new ProgressRing();
ring.IsActive = true;
ring.Visibility = Windows.UI.Xaml.Visibility.Visible;
ring.IsEnabled = true;
SetNativeControl(ring);
}
}
}
}
Notes: I hardcoded the properties of ProgressRing Control. You can create DependencyProperties for your custom ProgressRing control.
Related
I am using xamarin forms SearchBar control. I want to remove clear button x icon without using custom renderer.
<controls:ExSearchBar
x:Name="entrySearch"
BackgroundColor="White"
CornerRadius="6"
BorderWidth="1"
HeightRequest="45"
Text="{Binding SearchText}"
HorizontalOptions="FillAndExpand"
Placeholder="search">
</controls:ExSearchBar>
This is ExSearchBar control in shared project
public class ExSearchBar : SearchBar
{
public static readonly BindableProperty ElevationProperty = BindableProperty.Create(nameof(Elevation), typeof(float), typeof(ExFrame), default(float));
public float Elevation
{
get { return (float)GetValue(ElevationProperty); }
set { SetValue(ElevationProperty, value); }
}
}
How can I do that?
The situation you are describing is the exact reason why Xamarin Forms ships with the ability to create custom renderers. The forms team define the UI elements in abstract (seperate from their native implementation) and when there is a specific feature that is not defined in their API, you must go down to the platform level to change it.
You can also use an Effect to achieve the same result, I have provided a custom renderer for iOS & Android to show you how you would go about achieving the UI you desire:
iOS:
public class SearchBarButtonRenderer : SearchBarRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
Control.SearchTextField.ClearButtonMode = UITextFieldViewMode.Never;
}
}
}
Really simple, just remove the clear button from the underlying UITextField
Android
public class SearchBarButtonRenderer : SearchBarRenderer
{
private readonly Context _context;
public SearchBarButtonRenderer(Context context)
: base(context)
{
_context = context;
}
protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
// Get Search Close Button Drawable
var closeButtonId = Resources.GetIdentifier("android:id/search_close_btn", null, null);
var searchEditText = Control.FindViewById<ImageView>(closeButtonId);
// Get Close Button Drawable To Replace Existing Drawable
var closeDrawable = GetCloseButtonDrawable() as VectorDrawable;
if (closeDrawable is null) return;
// Apply Transparent Color To Drawable (To Make Invisible)
var buttonColor = Xamarin.Forms.Color.Transparent.ToAndroid();
closeDrawable.SetTint(buttonColor);
// Set Drawable On Control
searchEditText.SetImageDrawable(closeDrawable);
}
}
private Drawable GetCloseButtonDrawable()
{
return ContextCompat.GetDrawable(_context, Resource.Drawable.abc_ic_clear_material);
}
}
A little bit of a fiddle, find the close button drawable and replace it with a custom styled drawable
I’m new to Xamarin.Forms and tried using WebView on my Windows 10 x64 v1803 machine with UWP but I can’t see how to get it to work with WebGL.
Sites which use WebGL either display a message that “Your video card does not support WebGL or just don’t display and graphical content at all.
Is this a limitation of UWP or WebView itself?
Is it a WebView configuration issue?
WebGL works in all other browsers on this machine.
UWP WebView control is support WebGL. There is similar issue case in msdn you could refer. Please try to use SeparateProcess mode WebView to replace the default one.
public MainPage()
{
this.InitializeComponent();
var MyWebView = new WebView(WebViewExecutionMode.SeparateProcess);
MyWebView.Source = new Uri("http://cycleblob.com/");
this.RootGrid.Children.Add(MyWebView);
}
I had the same problem, but with the newer Xamarin Forms it took a little more poking around to get this took work right. However, I do like that they moved the native WebView resolver back to the responsibility of the UWP/iOS/Android project (as a native XAML object) instead of using code branching with compiler directives in the Shared project.
Start by creating a HybridWebView class in the shared project to use as your WebForm view object:
public class HybridWebView : Xamarin.Forms.WebView
{
Action<string> action;
public static readonly BindableProperty UriProperty = BindableProperty.Create(
propertyName: "Uri",
returnType: typeof(string),
declaringType: typeof(HybridWebView),
defaultValue: default(string));
public string Uri
{
get { return (string)GetValue(UriProperty); }
set { SetValue(UriProperty, value); }
}
public void RegisterAction(Action<string> callback)
{
action = callback;
}
public void Cleanup()
{
action = null;
}
public void InvokeAction(string data)
{
if (action == null || data == null)
{
return;
}
action.Invoke(data);
}
}
Then in the UWP project, create a custom renderer, which will construct the native WebView and relay the events back to the WebForms object in the Shared project:
Put this at the top of the namespace, to link the HybridWebView with the Custom Renderer:
[assembly: ExportRenderer(typeof(HybridWebView), typeof(WebViewRenderer2))]
Then create the renderer class (for the IOS and android projects, if you leave this class out, it defaults to the standard native controls which seem to work fine for me):
public class WebViewRenderer2 : ViewRenderer<Xamarin.Forms.WebView, Windows.UI.Xaml.Controls.WebView>, IWebViewDelegate
{
Windows.UI.Xaml.Controls.WebView _control;
public void LoadHtml(string html, string baseUrl)
{
}
public void LoadUrl(string url)
{
}
protected override void Dispose(bool disposing)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
{
if (_control == null) {
_control = new Windows.UI.Xaml.Controls.WebView(WebViewExecutionMode.SeparateProcess);
SetNativeControl(_control);
}
}
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
var xamWebView = sender as HybridWebView;
switch(e.PropertyName.ToLower())
{
case "source":
var urlSource = xamWebView.Source as Xamarin.Forms.UrlWebViewSource;
_control.Source = new Uri(urlSource.Url);
break;
case "width":
_control.Width = xamWebView.Width;
break;
case "height":
_control.Height = xamWebView.Height;
break;
case "isfocused":
var focused = xamWebView.IsFocused;
if (focused)
_control.Focus(FocusState.Programmatic);
else
_control.Focus(FocusState.Unfocused);
break;
}
}
}
You can also use the Custom Renderer to inject scripts, and you can use it to communicate from the native webview back to the Xamarin App, as seen here: HybridWebView Communication
I want to hide listview scrollbar in my xamarin andorid and xamarin ios application's. I have searched many post's but only few post's are having the helpful that to not clear. Please suggest any idea of hide scrollbar in listview.
Here is what I did:
Android custom renderer:
[assembly: ExportRenderer(typeof(CustomListView),typeof(CustomListViewRenderer))]
namespace ImageList.Droid
{
public class CustomListViewRenderer : ListViewRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
{
base.OnElementChanged(e);
if(Control != null)
{
Control.VerticalScrollBarEnabled = false;
}
}
}
}
iOS custom renderer:
[assembly: ExportRenderer(typeof(CustomListView), typeof(CustomListViewRenderer))]
namespace ImageList.iOS
{
public class CustomListViewRenderer : ListViewRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.ShowsVerticalScrollIndicator = false;
}
}
}
}
Remember: We need to use the Custom ListView instead of the native ListView in the PCL Forms
Update: Now from Xamarin.Forms version 3.5.0, we can use VerticalScrollBarVisibility, HorizontalScrollBarVisibility properties to handle ListView ScrollBarVisibility.
You can also find full source code and document from http://bsubramanyamraju.blogspot.com/2019/03/hide-listview-scrollbar-in-xamarinforms.html
Custom renders for the solution here, check official documents for that
https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/listview/
Android:
ListView.VericalScrollbarEnabled = false;
iOS:
UIScrollView.ShowsVerticalScrollIndicator = false;
I tried to add my own image to switch Control in xamarin forms using rendering concept but i am unable to override the existing image.Below is my code.
In shared project i added code like this
Switch switcher = new ExtendedSwitchnew();
and in ios
[assembly: ExportRenderer(typeof(ExtendedSwitchnew),typeof(SwitchRenderernew))]
namespace test.iOS
{
public class SwitchRenderernew :SwitchRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Switch> e)
{
base.OnElementChanged(e);
if (Control != null)
{
UIImage imgon = UIImage.FromFile("Images/switchon.png");
UIImage imgoff = UIImage.FromFile("Images/switchoff.png");
Control.OnImage = imgon;
Control.OffImage = imgoff;
}
}
}
}
Help me.Thanks in advace.
I'm working on a Xamarin.forms project but i need to use Android.Widget.AutoCompleteTextView how can i apply that?
When i am trying to add AutoCompleteTextView UserNameAutoComplete; to ContentPage i get the following error:
Content = new StackLayout
{
VerticalOptions = LayoutOptions.Center,
Padding = new Thickness(25),
Children =
{
UserNameAutoComplete,
passwordEditor,
}
};
cannot convert from 'Android.Widget.AutoCompleteTextView' to
'Xamarin.Forms.View'
Android.Widget.AutoCompleteTextView is a View from Android.
Solution for PCL:
You can't use platform specific View's on Xamarin Forms (PCL) ContentPage.
To use platform specific View you should use a custom render.
There is a blog post from #JamesMontemagno that shows how to do what you need.
This code is draft exemple please use it as such.
1 - Create your own custom Xamarin.Forms control that will be renderered in Android as an AutoCompleteTextView:
public class AutoCompleteView : View
{
// Place need properties here.
}
2 - In Android project add a renderer for AutoCompleteView:
[assembly: ExportRenderer(typeof(AutoCompleteView), typeof(AutoCompleteViewRenderer))]
namespace App.Droid
{
public class AutoCompleteViewRenderer : ViewRenderer<AutoCompleteView, AutoCompleteTextView>
{
// Initialize the AutoCompleteTextView
protected override void OnElementChanged (ElementChangedEventArgs<AutoComplete> e)
{
base.OnElementChanged (e);
if (e.OldElement != null || this.Element == null)
return;
var autoComplete = new AutoCompleteTextView(Forms.Context);
SetNativeControl (autoComplete);
}
// Use the control here.
protected override void OnElementPropertyChanged (object sender, PropertyChangedEventArgs e) {
base.OnElementPropertyChanged (sender, e);
if (this.Element == null || this.Control == null)
return;
// variable this.Control is the AutoCompleteTextView, so you an manipulate it.
}
}
}
Solution for Shared Project:
When using Shared Project there is a possibility to use Native Embedding, like:
...
var textView = new TextView (Forms.Context) { Text = originalText };
stackLayout.Children.Add (textView);
contentView.Content = textView.ToView();
...