I'm trying to use a gradient brush for a background on a Grid. So far I've created a custom renderer for the UWP only but I can't get that to work.
The e.NewElement.BackgroundColor expects a Color, but I have a LinearGradientBrush. So is it even possible to set the grid background as a gradient color?
Thanks
My renderer code is below:
public class MyGridRenderer:ViewRenderer<MyGrid, Grid>
{
protected override void OnElementChanged(ElementChangedEventArgs<MyGrid> e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
LinearGradientBrush brush = new LinearGradientBrush();
GradientStop start = new GradientStop();
start.Offset = 0;
start.Color = Colors.Yellow;
brush.GradientStops.Add(start);
GradientStop stop = new GradientStop();
stop.Offset = 1;
stop.Color = Colors.Black;
brush.GradientStops.Add(stop);
e.NewElement.BackgroundColor = brush; //What goes here
//Control.Background = brush;
}
}
}
I have the answer.
There is a background property.
so:
Background=brush
Related
If I switch between my different tabs, I allways get this little click animation that looks like a shadow or sth.
I use a custom Renderer for my Shell, but how can I disable this animation?
Here is a picture of the click animation
I found the solution by myself. Here is my code:
public void ResetAppearance(BottomNavigationView bottomView)
{
}
public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
{
Android.Graphics.Color elevationBGColor = ((Color)Xamarin.Forms.Application.Current.Resources["ElevationBGColor"]).ToAndroid();
bottomView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled;
bottomView.SetBackgroundColor(elevationBGColor);
int[][] Tintstates = new int[][]
{
new int[] {-Android.Resource.Attribute.StateChecked}, // unchecked
new int[] { Android.Resource.Attribute.StateChecked} // pressed
};
int[] Tintcolors = new int[]
{
Xamarin.Forms.Color.White.ToAndroid(),
((Color)Xamarin.Forms.Application.Current.Resources["PrimaryColor"]).ToAndroid()
};
ColorStateList TintList = new ColorStateList(Tintstates, Tintcolors)
bottomView.ItemIconTintList = TintList;
bottomView.ItemRippleColor = null;
}
In this code I also set a color change to the item i selected in my navbar, but the code i was searching for was
bottomView.ItemRippleColor = null;
I already have a custom renderer for scrollview that will create fading edges on Xamarin.android. So my problem now is that my renderer on iOS is not working.
Here is what I have:
using System;
using CoreAnimation;
using CoreGraphics;
using Foundation;
using Omregistrering.CustomControls;
using Omregistrering.iOS.Renderers;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(FadeScrollView), typeof(FadeScrollViewRenderer))]
namespace Omregistrering.iOS.Renderers
{
public class FadeScrollViewRenderer : ScrollViewRenderer
{
private CAGradientLayer gradientLayer;
private Double FadePercentage = 0.2;
private CGColor OpaqueColor = UIColor.Black.CGColor;
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
//UpdateScrollView();
}
public override void ScrollRectToVisible(CGRect rect, bool animated)
{
base.ScrollRectToVisible(rect, animated);
}
private void UpdateScrollView()
{
// test with Bounces
ContentInset = new UIKit.UIEdgeInsets(0, 0, 0, 0);
if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0))
ContentInsetAdjustmentBehavior = UIKit.UIScrollViewContentInsetAdjustmentBehavior.Never;
Bounces = false;
ScrollIndicatorInsets = new UIKit.UIEdgeInsets(0, 0, 0, 0);
}
private CGColor topOpacity()
{
var scrollViewHeight = Frame.Size.Height;
var scrollContentSizeHeight = ContentSize.Height;
var scrollOffset = ContentOffset.Y;
nfloat alpha = (scrollViewHeight >= scrollContentSizeHeight || scrollOffset <= 0) ? 1 : 0;
var color = new UIColor(white: 0, alpha: alpha);
return color.CGColor;
}
private CGColor bottomOpacity()
{
var scrollViewHeight = Frame.Size.Height;
var scrollContentSizeHeight = ContentSize.Height;
var scrollOffset = ContentOffset.Y;
nfloat alpha = (scrollViewHeight >= scrollContentSizeHeight || scrollOffset + scrollViewHeight >= scrollContentSizeHeight) ? 1 : 0;
var color = new UIColor(white: 0, alpha: alpha);
return color.CGColor;
}
public override void Draw(CGRect rect)
{
base.Draw(rect);
gradientLayer = new CAGradientLayer();
gradientLayer.Frame = rect;
var maskLayer = new CALayer();
gradientLayer.Colors = new CGColor[] { topOpacity(), OpaqueColor, OpaqueColor, bottomOpacity() };
gradientLayer.Locations = new NSNumber[] { 0, (NSNumber)FadePercentage, (NSNumber)(1 - FadePercentage), 1 };
maskLayer.AddSublayer(gradientLayer);
this.Layer.Mask = maskLayer;
}
}
}
And the result is this:
The renderer is fading at the bottom edge but is not updated in any way.The ideer is of course to have fading edges also when scrolling up and down.
Here a screenshot from android were we are in the middle of a scroll and both edges are fading, giving the illusion of more content.
Anyone who have a solution or has done this on Xamarin.ios
Thanks
I don't think you need renderers here.
You could use two png with gradient toward transparent, for each edge.
Then with ScrollView.Scrolled event, you can know if you reached the top or the bottom of the scroll view.
Doing so, you can set the opacity of the 2 images according to the distance from the edge.
In the following example, we'll consider only bottom:
private void OnScrolled(object sender, ScrolledEventArgs e)
{
MyScrollView scrollView = sender as MyScrollView;
double scrollingSpace = scrollView.ContentSize.Height - scrollView.Height;
MyBottomImage.Opacity = 1 - e.ScrollY/scrollingSpace;
}
I hope you get the idea :)
I know how to set the width of the progressBar by renderer it in ios/android.But is there anyway to add a image in the progressbar?
I have set its height.
protected override void OnElementChanged(ElementChangedEventArgs<ProgressBar> e)
{
base.OnElementChanged(e);
Control.ScaleY = 20;
}
and in ios:
public override void LayoutSubviews()
{
base.LayoutSubviews();
var x = 1.0f;
var y = 20.0f;
CGAffineTransform transform = CGAffineTransform.MakeScale(x, y);
Control.Transform = transform;
}
but I wonder if there is anyway to add an icon?
this is my goal to achive:
progressBar
it is a 98 percent progressBar with a star in the end of the progress value.I've no idea to achive it
Maybe it's too late to reply now
Have you try to use Slider and use CustomRender to custom the style of SeekBar,it has the
android:thumb="#drawable/seekbarthumb" attribute,set your star icon to the thumb more easily
at last I use relativelayout to fix the postion of the image. as #Skin says.
I'm developing an IOS Application using Xamarin.Forms and in that I've customized the toolbar color to Gradient color using custom renderers.But,After this the Icons
color is changed as per the toolbar color and how to set the title text to white colour.Here is the renderer I'm using for toolbar customization
public class NavigationPageGradientHeaderRenderer:NavigationRenderer
{
public override void ViewWillAppear(bool animated)
{
base.ViewWillAppear(animated);
var control = (NavigationPageGradientHeader)this.Element;
var gradientLayer = new CAGradientLayer();
gradientLayer.Bounds = NavigationBar.Bounds;
gradientLayer.Colors = new CGColor[] { control.RightColor.ToCGColor(), control.LeftColor.ToCGColor() };
gradientLayer.StartPoint = new CGPoint(0.0, 0.5);
gradientLayer.EndPoint = new CGPoint(1.0, 0.5);
UIGraphics.BeginImageContext(gradientLayer.Bounds.Size);
gradientLayer.RenderInContext(UIGraphics.GetCurrentContext());
UIImage image = UIGraphics.GetImageFromCurrentImageContext();
UIGraphics.EndImageContext();
NavigationBar.SetBackgroundImage(image, UIBarMetrics.Default);
}
}
After applying this the Icons look like this:
enter image description here
But I want the images background to be transparent like this:
enter image description here
and the title textcolor should be white.
How can I achieve this.Can anyone please help me with this.
Thank you
You can set the property in CustomRenderer
public override void ViewWillAppear(bool animated)
{
base.ViewWillAppear(animated);
var control = (MyNativePage)Element;
var gradientLayer = new CAGradientLayer();
gradientLayer.Bounds = NavigationBar.Bounds;
gradientLayer.Colors = new CGColor[] { UIColor.Red.CGColor,UIColor.White.CGColor };
gradientLayer.StartPoint = new CGPoint(0.0, 0.5);
gradientLayer.EndPoint = new CGPoint(1.0, 0.5);
UIGraphics.BeginImageContext(gradientLayer.Bounds.Size);
gradientLayer.RenderInContext(UIGraphics.GetCurrentContext());
UIImage image = UIGraphics.GetImageFromCurrentImageContext();
UIGraphics.EndImageContext();
NavigationBar.SetBackgroundImage(image, UIBarMetrics.Default);
NavigationBar.TintColor = UIColor.White;
NavigationBar.TitleTextAttributes = new UIStringAttributes() { ForegroundColor =UIColor.White};
}
If you create an NavigationPage, then you can use like this
var myHomePage = new NavigationPage(dashboardPage){
Tint = Color.Red // put your color here };
You can set common color from App.xaml.cs;
public App()
{
InitializeComponent();
// MainPage = new MainPage();
MainPage = new RESTAPICallApp.Controllers.HomePage();
NavigationPage navigationRootPage = new NavigationPage(new RESTAPICallApp.Controllers.HomePage());
navigationRootPage.BarBackgroundColor = Color.LightSeaGreen;
navigationRootPage.BarTextColor = Color.Wheat;
MainPage = navigationRootPage;
}
For native Xamarin.iOS add this code in 'didFinishLaunchingWithOptions' method on AppDelegate.cs;
UINavigationBar.Appearance.Translucent = false;
UINavigationBar.appearance().barTintColor = UIColor.White
UINavigationBar.Appearance.SetTitleTextAttributes(new UITextAttributes() {
TextColor = UIColor.White,
TextShadowColor = UIColor.Clear
});
In an AS3 mobile App, I would like to have a menu of buttons or icons that slides up from the bottom. Using a SlideViewTransition, I can get part of what I want.
var transition:SlideViewTransition = new SlideViewTransition();
transition.direction = ViewTransitionDirection.UP;
transition.mode = SlideViewTransitionMode.COVER;
view.navigator.pushView(ShareView, null, null, transition);
This works, but it does not do two things that I need to do.
1) I want the new transition to only go up 1/2 of the screen so that the top part of the screen displays the view underneath.
2) I want the new view that covers to be partially transparent. By setting the alpha of the incoming view's contentGroup background alpha, the new view is transparent as it comes in. But, once it covers the view underneath the view becomes opaque.
this.contentGroup.setStyle('backgroundAlpha', 0.5);
Does anyone have any ideas of how I would have a view slide up 1/2 way and be transparent? I have no idea where to start, view skinning?, or subclass transition?, or use something in flash namespace instead of a spark view.
I decided it would be simplest to just use the lower level ActionScript and do the animation myself using methods that are normally applied to a Sprite, but in this case use a VGroup so that I could add spark elements to it. The following is the base class I wrote.
public class SlideUpDialog extends VGroup {
private var pctHeight:Number;
private var stopHeight:Number;
private var vertIncrement:Number;
public function SlideUpDialog(pctHeight:Number) {
super();
this.pctHeight = pctHeight;
if (stage) {
addedToStageHandler();
} else {
addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
}
}
private function addedToStageHandler(event:Event=null) : void {
removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
graphics.beginFill(0xEEEEEE, 0.8);
graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight * pctHeight);
graphics.endFill();
var bevel:BevelFilter = new BevelFilter(4, -45);
this.filters = [ bevel ];
x = 0;
y = stage.stageHeight;
stopHeight = y * (1 - pctHeight);
vertIncrement = y / 2 / 24 / 4;
}
public function open() : void {
addEventListener(Event.ENTER_FRAME, openFrameHandler);
}
private function openFrameHandler(event:Event) : void {
if (y > stopHeight) {
y -= vertIncrement;
} else {
removeEventListener(Event.ENTER_FRAME, openFrameHandler);
}
}
public function close() : void {
... the reverse of open
}
}