How to Make Maui the LinearGradientBrush Smoother ? #33430
Replies: 5 comments 4 replies
-
|
Figma seems to dither the edges (extreme contrast, top is MAUI bottom is Figma): |
Beta Was this translation helpful? Give feedback.
-
|
hoo thanks for this info, got it, i also wand to dither the edges same like figma in maui, they have any possibilities ? |
Beta Was this translation helpful? Give feedback.
-
|
Which platform has this issue? Windows, Android, iOS, MacCatalyst, all of them? |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
Instead of a Border.Background, you can consider using Grid+WebView, e.g. <Border>
<Grid>
<!-- Alternative to Border.Background -->
<WebView>
<WebView.Source>
<HtmlWebViewSource>
<HtmlWebViewSource.Html>
<![CDATA[
<html>
<body style="margin:0; padding:0; background: linear-gradient(to right, #3b3b3b, #454545, #3b3b3b);">
</body>
</html>
]]>
</HtmlWebViewSource.Html>
</HtmlWebViewSource>
</WebView.Source>
</WebView>
<!-- Insert your Content body here -->
</Grid>
</Border> |
Beta Was this translation helpful? Give feedback.
-
|
Ho, thanks for this grate idea.
|
Beta Was this translation helpful? Give feedback.
-
|
Okay, consider SkiaSharp.Views.Maui.Controls to render the linear gradient with IsDither set to true: <Border>
<Grid>
<!-- Border.Background alternate -->
<skia:SKCanvasView PaintSurface="SKCanvasView_PaintSurface" />
<!-- Your content or ContentPresenter -->
</Grid>
</Border>void SKCanvasView_PaintSurface(object sender, SkiaSharp.Views.Maui.SKPaintSurfaceEventArgs e)
{
var canvas = e.Surface.Canvas;
var info = e.Info;
canvas.Clear();
using var paint = new SKPaint
{
IsDither = true, // Enable Dither here
Shader = SKShader.CreateLinearGradient(
new SKPoint(0, 0),
new SKPoint(info.Width, 0),
new[] { SKColor.Parse("#3b3b3b"), SKColor.Parse("#454545"), SKColor.Parse("#3b3b3b") },
new float[] { 0f, 0.5f, 1f },
SKShaderTileMode.Clamp)
};
canvas.DrawRect(new SKRect(0, 0, info.Width, info.Height), paint);
}References:
|
Beta Was this translation helpful? Give feedback.
-
|
yo thanks, it is really helpful let me test it out. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
now maui LinearGradientBrush looks like box => | | | | |, i wand to make the LinearGradientBrush smoother same like figma how to achive it ?
Beta Was this translation helpful? Give feedback.
All reactions