Hopefully this doesn't get dinged, I've looked at other posts and nothing seems to work.
Code:
<controls:SearchPageSearchBar Grid.Column="1" Scale=".8" Margin="0,0,0,0" x:Name="searchBar"
BackgroundColor="White"
SearchCommandParameter="{Binding Text, Source={x:Reference searchBar}}"
Placeholder="Search" >
</controls:SearchPageSearchBar>
public class SearchPageSearchBarDroid : SearchBarRenderer
{
public SearchPageSearchBarDroid(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> args)
{
base.OnElementChanged(args);
var plateId = Resources.GetIdentifier("android:id/search_plate", null, null);
var plate = Control.FindViewById(plateId);
plate.SetBackgroundColor(Android.Graphics.Color.Transparent);
}
}
Tried all solutions here too
https://forums.xamarin.com/discussion/140247/how-can-i-remove-the-underline-in-searbar-on-android
[assembly: ExportRenderer(typeof(SearchPageSearchBar), typeof(SearchPageSearchBarDroid))]
i test your code and it works,have you missed the above line in your SearchPageSearchBarDroid ?
[assembly: ExportRenderer(typeof(SearchPageSearchBar), typeof(SearchPageSearchBarDroid))]
namespace App18.Droid
{
class SearchPageSearchBarDroid:SearchBarRenderer
{
public SearchPageSearchBarDroid(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
{
base.OnElementChanged(e);
var plateId = Resources.GetIdentifier("android:id/search_plate", null, null);
var plate = Control.FindViewById(plateId);
plate.SetBackgroundColor(Android.Graphics.Color.Transparent);
}
}
}
Related
I have a xamarin forms application and I have inserted a webview inside the layout stack, the problem is that I have multiple pages and in each page the length of the content is different from the others.
I wanted to ask if there was a way to have the webview automatically adjust the height.
I have read other similar questions on the site, but I admit they seemed confusing to me.
This is my code xaml
<ContentPage.Content>
<StackLayout Padding="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Spacing="0" BackgroundColor="White">
<WebView
x:Name="wvSite"
VerticalOptions="FillAndExpand"
HeightRequest="2300" />
</StackLayout>
</ContentPage.Content>
You could reset the webview height according to the content height when loading page finished via custom renderer.
Android:
[assembly: ExportRenderer(typeof(WebView), typeof(CustomWebViewRenderer))]
namespace App1.Droid
{
public class CustomWebViewRenderer : WebViewRenderer
{
public CustomWebViewRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
{
base.OnElementChanged(e);
Control.SetWebViewClient(new CustomWebViewClient(e.NewElement));
}
}
internal class CustomWebViewClient : Android.Webkit.WebViewClient
{
private WebView webView;
public CustomWebViewClient(WebView webView)
{
this.webView = webView;
}
public async override void OnPageFinished(Android.Webkit.WebView view, string url)
{
if (webView != null)
{
int i = 10;
while (view.ContentHeight == 0 && i-- > 0)
await System.Threading.Tasks.Task.Delay(100);
webView.HeightRequest = view.ContentHeight;
}
base.OnPageFinished(view, url);
}
}
}
iOS:
[assembly: ExportRenderer(typeof(WebView),
typeof(CustomWebviewRenderer))]
namespace App1.iOS
{
public class CustomWebviewRenderer : WkWebViewRenderer
{
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
NavigationDelegate = new CustomWebviewNavigationDelegate();
}
}
internal class CustomWebviewNavigationDelegate : WKNavigationDelegate
{
[Export("webview:didFinishNavigation:")]
public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
{
//base.DidFinishNavigation(webView, navigation);
webView.Frame = new CoreGraphics.CGRect(0, 0, webView.ScrollView.ContentSize.Width, webView.ScrollView.ContentSize.Height);
}
}
}
Why this line
Control.BackgroundTintList = ColorStateList.ValueOf(Android.Graphics.Color.Green);
is working in a custom EntryRenderer in Android (xamarin forms) and not in a custom MaterialEntryRenderer?
I want to change only the underline color of the entry in material and not the underline color and the placeholder text color too.
xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Genesys.App.Views.ConfigurationView"
xmlns:local1="clr-namespace:Genesys.App.CustomControls"
Title="Ingrese Configuración"
Visual="Material">
<ContentPage.Content>
<StackLayout VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
Padding="15"
Background="white">
<local1:MyEntry x:Name="txtServicio"
Placeholder="SERVICIO"
BackgroundColor="White">
</local1:MyEntry>
<Button Padding="5"
Margin="5"
Text="guardar"
TextTransform="Uppercase"
TextColor="white"
BackgroundColor="{StaticResource colorPrimary}"
HorizontalOptions="End"
Command="{Binding ButtonCommand}"></Button>
</StackLayout>
</ContentPage.Content>
</ContentPage>
//class MyEntry
public class MyEntry : Entry
{
}
CustomEntryRenderer in android
[assembly: ExportRenderer(typeof(MyEntry), typeof(MyRenderer))]
namespace Genesys.App.Droid
{
public class MyRenderer : EntryRenderer//this works
{
public MyRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
this.EditText.FocusChange += (sender, ee) => {
bool hasFocus = ee.HasFocus;
if (hasFocus)
{
Control.BackgroundTintList = ColorStateList.ValueOf(Android.Graphics.Color.Green); //changes color
}
else
{
Control.BackgroundTintList = ColorStateList.ValueOf(Android.Graphics.Color.Red); //changes color
}
};
}
}
}
}
//don't work
[assembly: ExportRenderer(typeof(MyEntry), typeof(MyRenderer))]
namespace Genesys.App.Droid
{
public class MyRenderer : MaterialEntryRenderer//don't work
{
public MyRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
this.EditText.FocusChange += (sender, ee) => {
bool hasFocus = ee.HasFocus;
if (hasFocus)
{
Control.BackgroundTintList = ColorStateList.ValueOf(Android.Graphics.Color.Green);//doesn't change color
}
else
{
Control.BackgroundTintList = ColorStateList.ValueOf(Android.Graphics.Color.Red); //doesn't change color
}
};
}
}
}
}
I am trying to get an image in the shape of rectangle with rounded Cornes. I have tried to use nugget fftransformations and frame. So far I am not getting the result I want. Using the nugget turns the image into square no matter what size I give to it. Using frame for some reason doesn't actually round the corners. enter image description here
<StackLayout VerticalOptions="CenterAndExpand">
<ffimageloading:CachedImage VerticalOptions="CenterAndExpand"
WidthRequest="530" HeightRequest="334"
DownsampleToViewSize="true"
Source = "http://loremflickr.com/530/334/nature?filename=simple.jpg">
<ffimageloading:CachedImage.Transformations>
<fftransformations:RoundedTransformation Radius="10"/>
</ffimageloading:CachedImage.Transformations>
</ffimageloading:CachedImage>
<ffimageloading:CachedImage VerticalOptions="CenterAndExpand"
WidthRequest="530" HeightRequest="334"
DownsampleToViewSize="true"
Source = "http://loremflickr.com/530/334/nature?filename=simple.jpg">
<ffimageloading:CachedImage.Transformations>
<fftransformations:CornersTransformation CornersTransformType="AllRounded"/>
</ffimageloading:CachedImage.Transformations>
</ffimageloading:CachedImage>
<Grid VerticalOptions="CenterAndExpand">
<Frame Padding="0" WidthRequest="530" HeightRequest="334"
HorizontalOptions="Center"
VerticalOptions="Center" CornerRadius="20" >
<Image Source = "http://loremflickr.com/530/330/nature?filename=simple.jpg" Aspect="AspectFill" />
</Frame>
</Grid>
</StackLayout>
Some time ago I needed corner effects on other controls. And it applies to image too.
All you need is to create Effect:
public class RoundCornersEffect : RoutingEffect
{
public RoundCornersEffect() : base($"MySuperApp.{nameof(RoundCornersEffect)}")
{
}
public static readonly BindableProperty CornerRadiusProperty =
BindableProperty.CreateAttached(
"CornerRadius",
typeof(int),
typeof(RoundCornersEffect),
0,
propertyChanged: OnCornerRadiusChanged);
public static int GetCornerRadius(BindableObject view) =>
(int)view.GetValue(CornerRadiusProperty);
public static void SetCornerRadius(BindableObject view, int value) =>
view.SetValue(CornerRadiusProperty, value);
private static void OnCornerRadiusChanged(BindableObject bindable, object oldValue, object newValue)
{
if (!(bindable is View view))
return;
var cornerRadius = (int)newValue;
var effect = view.Effects.OfType<RoundCornersEffect>().FirstOrDefault();
if (cornerRadius > 0 && effect == null)
view.Effects.Add(new RoundCornersEffect());
if (cornerRadius == 0 && effect != null)
view.Effects.Remove(effect);
}
}
And implement it on both platforms:
IOS:
public class RoundCornersEffectIOS : PlatformEffect
{
protected override void OnAttached()
{
try
{
PrepareContainer();
SetCornerRadius();
}
catch (Exception e)
{
Debug.WriteLine(e);
}
}
protected override void OnDetached()
{
try
{
Container.Layer.CornerRadius = new nfloat(0);
}
catch (Exception e)
{
Debug.WriteLine(e);
}
}
protected override void OnElementPropertyChanged(PropertyChangedEventArgs args)
{
if (args.PropertyName == RoundCornersEffect.CornerRadiusProperty.PropertyName)
SetCornerRadius();
}
private void PrepareContainer()
{
Container.ClipsToBounds = true;
Container.Layer.AllowsEdgeAntialiasing = true;
Container.Layer.EdgeAntialiasingMask = CAEdgeAntialiasingMask.All;
}
private void SetCornerRadius()
{
var cornerRadius = RoundCornersEffect.GetCornerRadius(Element);
Container.Layer.CornerRadius = new nfloat(cornerRadius);
}
}
Droid:
public class RoundCornersEffectDroid : PlatformEffect
{
private Android.Views.View View => Control ?? Container;
protected override void OnAttached()
{
try
{
PrepareContainer();
SetCornerRadius();
}
catch (Exception e)
{
Debug.WriteLine(e);
}
}
protected override void OnDetached()
{
try
{
View.OutlineProvider = ViewOutlineProvider.Background;
}
catch (Exception e)
{
Debug.WriteLine(e);
}
}
protected override void OnElementPropertyChanged(PropertyChangedEventArgs args)
{
if (args.PropertyName == RoundCornersEffect.CornerRadiusProperty.PropertyName)
SetCornerRadius();
}
private void PrepareContainer()
{
View.ClipToOutline = true;
}
private void SetCornerRadius()
{
var cornerRadius = RoundCornersEffect.GetCornerRadius(Element) * GetDensity();
View.OutlineProvider = new RoundedOutlineProvider(cornerRadius);
}
private static double GetDensity() =>
DeviceDisplay.MainDisplayInfo.Density;
private class RoundedOutlineProvider : ViewOutlineProvider
{
private readonly double _radius;
public RoundedOutlineProvider(double radius)
{
_radius = radius;
}
public override void GetOutline(Android.Views.View view, Outline outline)
{
outline?.SetRoundRect(0, 0, view.Width, view.Height, (float)_radius);
}
}
}
Then you can use it in control:
<Image Source="mylogo.png" VerticalOptions="Center" Aspect="AspectFit" myeffects:RoundCornersEffect.CornerRadius="5"/>
I want to make a entry that without underline. I tried two solutions but both can not work well.
Control.Background = null;
it is not go well and I take another solution:
GradientDrawable gd = new GradientDrawable();
gd.SetColor(global::Android.Graphics.Color.Transparent);
Control.SetBackground(gd);
this.Control.SetRawInputType(Android.Text.InputTypes.TextFlagNoSuggestions);
Control.SetHintTextColor(ColorStateList.ValueOf(global::Android.Graphics.Color.White));
It also not go well in android but work well in ios.I do not understand why.
You can try add xml styling named editText_bg.xml,
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="10dp"
/>
</shape>
And you can give this to entry as background resource :
[assembly: ExportRenderer(typeof(CustomEntry), typeof(AndroidCustomEntryRenderer))]
namespace XXX.Droid.Renderer
{
public class AndroidCustomEntryRenderer : EntryRenderer
{
public AndroidCustomEntryRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.SetBackgroundColor(global::Android.Graphics.Color.White);
Control.SetBackgroundResource(Resource.Drawable.edittext_bg);
}
}
}
}
Try my implementation(working for Android and ios). PlainEntry is empty class inherited from Xamarin.Forms.Entry
Android
[assembly: ExportRenderer(typeof(PlainEntry), typeof(PlainEntryRenderer))]
namespace UR.Droid.Renderers
{
public class PlainEntryRenderer : EntryRenderer
{
public PlainEntryRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
this.Control.
SetBackgroundColor(global::Android.Graphics.Color.Transparent);
Control.SetPadding(0, 0, 0, 0);
}
}
}
}
iOS
[assembly: ExportRenderer(typeof(PlainEntry), typeof(PlainEntryRenderer))]
namespace UR.iOS.Renderer
{
class PlainEntryRenderer: EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.BorderStyle = UITextBorderStyle.None;
Control.BackgroundColor = UIColor.FromRGBA(0, 0, 0, 0);
}
}
}
}
If you want to use renderers for all Xamarin.Forms.Entry like not the than specify:
[assembly: ExportRenderer(typeof(Xamarin.Forms.Entry), typeof(PlainEntryRenderer))]
I am using an editor in my UI. But the black underline is irritating, is there any way to remove that underline?
Thanks in advance
I have done the entry and editor underline removal features using custom renders.
##In PCL##
CustomEntry.cs
using Xamarin.Forms;
namespace Entry_Editor_Sample
{
public class CustomEntry : Entry
{
}
}
CustomEditor.cs
using Xamarin.Forms;
namespace Entry_Editor_Sample
{
public class CustomEditor : Editor
{
}
}
##In android##
CustomEntryRenderer.cs
using Android.Content;
using Android.Content.Res;
using Android.Graphics.Drawables;
using Android.Text;
using Entry_Editor_Sample;
using Entry_Editor_Sample.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomEntryRenderer))]
namespace Entry_Editor_Sample.Droid
{
class CustomEntryRenderer : EntryRenderer
{
public CustomEntryRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
GradientDrawable gd = new GradientDrawable();
gd.SetColor(global::Android.Graphics.Color.Transparent);
this.Control.SetBackgroundDrawable(gd);
this.Control.SetRawInputType(InputTypes.TextFlagNoSuggestions);
//Control.SetHintTextColor(ColorStateList.ValueOf(global::Android.Graphics.Color.White));
}
}
}
}
CustomEditorRenderer.cs
using Android.Content;
using Android.Content.Res;
using Android.Graphics.Drawables;
using Android.Text;
using Entry_Editor_Sample;
using Entry_Editor_Sample.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(CustomEditor), typeof(CustomEditorRenderer))]
namespace Entry_Editor_Sample.Droid
{
class CustomEditorRenderer : EditorRenderer
{
public CustomEditorRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
{
base.OnElementChanged(e);
if (Control != null)
{
GradientDrawable gd = new GradientDrawable();
gd.SetColor(global::Android.Graphics.Color.Transparent);
this.Control.SetBackgroundDrawable(gd);
this.Control.SetRawInputType(InputTypes.TextFlagNoSuggestions);
//Control.SetHintTextColor(ColorStateList.ValueOf(global::Android.Graphics.Color.Black));
}
}
}
}
##In IOS##
CustomEntryRenderer.cs
using Entry_Editor_Sample;
using Entry_Editor_Sample.iOS;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomEntryRenderer))]
namespace Entry_Editor_Sample.iOS
{
class CustomEntryRenderer : EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.BorderStyle = UITextBorderStyle.None;
Control.Layer.CornerRadius = 10;
//Control.TextColor = UIColor.Black;
}
}
}
}
CustomEditorRenderer.cs
using Entry_Editor_Sample;
using Entry_Editor_Sample.iOS;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(CustomEditor), typeof(CustomEditorRenderer))]
namespace Entry_Editor_Sample.iOS
{
class CustomEditorRenderer : EditorRenderer
{
public CustomEditorRenderer()
{
UIKeyboard.Notifications.ObserveWillShow((sender, args) =>
{
if (Element != null)
{
Element.Margin = new Thickness(0, 0, 0, args.FrameEnd.Height); //push the entry up to keyboard height when keyboard is activated
}
});
UIKeyboard.Notifications.ObserveWillHide((sender, args) =>
{
if (Element != null)
{
Element.Margin = new Thickness(0); //set the margins to zero when keyboard is dismissed
}
});
}
protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.Layer.CornerRadius = 10;
Control.TextColor = UIColor.Black;
}
}
}
}
##Finally in MainPage.xaml##
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Entry_Editor_Sample"
mc:Ignorable="d"
BackgroundColor="White"
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:Page.UseSafeArea="true"
x:Class="Entry_Editor_Sample.MainPage">
<StackLayout
VerticalOptions="CenterAndExpand"
HorizontalOptions="FillAndExpand"
BackgroundColor="White">
<local:CustomEntry
BackgroundColor="SkyBlue"
Placeholder="Entry"
PlaceholderColor="Black"
TextColor="Black"/>
<local:CustomEditor
BackgroundColor="SkyBlue"
Placeholder="Editor"
HeightRequest="100"
PlaceholderColor="Black"
TextColor="Black"/>
</StackLayout>
</ContentPage>
I uploaded a sample on here :)
Create a custom renderer in your Android project:
public class CustomEntryRenderer : EntryRenderer {
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e) {
base.OnElementChanged(e);
Control.SetBackgroundColor(Android.Graphics.Color.Transparent);
}
}
Then in your XAML:
<ContentPage xmlns:xyz="clr-namespace:PclNamespaceForCustomControls">
...
<xyz:CustomEntry Placeholder="Lorem ipsum" />
</ContentPage>
See Microsoft docs for more info: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/entry
You can use custom renderers to achieve entry and editor underline removal.
I am using the below code to apply these feature for all entries and editors in the project and it is working with Xamarin Forms 4.8+
Xamarin Android
Entry
[assembly: ExportRenderer(typeof(Entry), typeof(EntryRendererAndroid), new[] { typeof(VisualMarker.DefaultVisual) })]
namespace XFTest.Droid.Renderers
{
public class EntryRendererAndroid : EntryRenderer
{
public EntryRendererAndroid(Context context) : base(context) { }
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.Background = null;
Control.SetBackgroundColor(Android.Graphics.Color.Transparent);
}
}
}
}
Editor
[assembly: ExportRenderer(typeof(Editor), typeof(EditorRendererAndroid), new[] { typeof(VisualMarker.DefaultVisual) })]
namespace XFTest.Droid.Renderers
{
public class EditorRendererAndroid : EditorRenderer
{
public EditorRendererAndroid(Context context) : base(context) { }
protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.Background = null;
Control.SetBackgroundColor(Android.Graphics.Color.Transparent);
}
}
}
}
Xamarin iOS
Entry
[assembly: ExportRenderer(typeof(Entry), typeof(EntryRendereriOS), new[] { typeof(VisualMarker.DefaultVisual) })]
namespace XFTest.iOS.Renderers
{
public class EntryRendereriOS : EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.BackgroundColor = UIColor.FromWhiteAlpha(1, 1);
Control.Layer.BorderWidth = 0;
Control.BorderStyle = UITextBorderStyle.None;
}
}
}
}
Editor
[assembly: ExportRenderer(typeof(Entry), typeof(EntryRendereriOS), new[] { typeof(VisualMarker.DefaultVisual) })]
namespace XFTest.iOS.Renderers
{
public class EntryRendereriOS : EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.BackgroundColor = UIColor.FromWhiteAlpha(1, 1);
Control.Layer.BorderWidth = 0;
Control.BorderStyle = UITextBorderStyle.None;
}
}
}
}