XAML gradient issue in UWP for some devices

xaml gradient background
wpf gradient generator
uwp brushes
xaml solidcolorbrush
lineargradientbrush c++
wpf rainbow gradient
wpf vertical gradient brush
wpf button gradient background

I'm using Page as landing screen in my app. XAML looks like this:

<Grid x:Name="LayoutRoot">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="3*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="7*"/>
        </Grid.RowDefinitions>

        <Rectangle StrokeThickness="0" Fill="#FF79D2F4" Margin="0,0,0,-10" Grid.RowSpan="2"/>

        <Rectangle StrokeThickness="0" Fill="#FF1F8CC5" Margin="0,-10,0,0" Grid.Row="2" Grid.RowSpan="2"/>

        <Image Source="ms-appx:///Assets/ViewMedia/Banners/Banner_Light_Big.jpg" Grid.Row="1" Grid.RowSpan="2"/>

        <Rectangle StrokeThickness="0" Grid.Row="2" Grid.RowSpan="2">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Offset="0"/>
                    <GradientStop Color="#7F000000" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

    </Grid>

    <StackPanel MaxWidth="300" Margin="20,35"
                HorizontalAlignment="Stretch" VerticalAlignment="Bottom">

        <Button x:Name="LoginButton" x:Uid="LoginButton" Style="{StaticResource BrandButtonStyle}" Margin="0,5"
                Click="LoginButton_Click"/>

        <Button x:Name="RegisterButton" x:Uid="RegisterButton" Style="{StaticResource BrandButtonStyle}" Margin="0,5"
                Click="RegisterButton_Click"/>

    </StackPanel>

</Grid>

I've got 3 devices on which I'm running the app:

  • Microsoft Lumia 950 XL [M]
  • Custom build PC [PC]
  • Lenovo ThinkPad Tablet 2 [T]

When running the app this page renders well on M and PC but on T Gradient and two Buttons at the bottom are not rendered at all. I don't see them but I can press Buttons and their tap event handlers will strike. But if I comment Rectangle with gradient everything is fine on all devices.

This is how the app looks on T when using gradient. No buttons. And gradient is also not visible.

This is how the app looks on T without gradient. Buttons are in place.

And this is how it should look running on PC. Buttons and gradient are visible.

I don't see any errors in output when running the app. I don't know why this happens only on specific devices. Maybe this is kind of known issue?

UPDATE 1

From users feedback, I can say that this bug hits only Atom-powered devices. But I'm not sure if this is 100% true for all Atom-powered devices.

UPDATE 2

I'd updated T with W10 from Insider Preview Fast Ring. The bug is in place. So this is not connected to OS builds.

UPDATE 3

Switching Buttons Style back to normal does not solve this. So Style is good, it's not the cause.


Try removing the Grid.RowSpan="2" from the Rectangle (or add a RowDefinition), you have 4 rows (4 RowDefinition) but with the Rectangle having Grid.RowSpan=2 it adds up to 5 rows, so it might be causing you trouble.

EDIT: My bad, Rectangle actually spans over rows 2 and 3 (Grid.Row="2"), so it's ok.

Since you're just stacking <StackPanel> over <Grid> (with nothing fancy), you could try to replace the root layout <Grid x:Name="LayoutRoot"> with <Canvas x:Name="LayoutRoot"> and see if that makes a difference.

LinearGradientBrush Class (Windows.UI.Xaml.Media), LinearGradientBrush is a type of Brush that is used for many possible UI properties that use a Brush to fill some or all of an object's visual area in app UI. XAML gradient issue in UWP for some devices (3) I've come across similar issues, and went for a different and more portable approach. I made a gradient image of height 1 (to save space), and sufficient pixels in width to give the proper gradient resolution.


I've come across similar issues, and went for a different and more portable approach.

I made a gradient image of height 1 (to save space), and sufficient pixels in width to give the proper gradient resolution. Added an image and stretched it. Quite a bit faster and offloads the renderling pipeline as well.

And it works just as well in Xamarin.Forms.

How To Fill A XAML Rectangle with Multiple Colors, Learn how to split the background of a XAML rectangle into multiple solid colors by but legend has it that there are some mobile devices out in the wild that run Windows. Microsoft product—to deploy to iOS and Android, as well as UWP. Fill> <LinearGradientBrush StartPoint=“0,0” Endpoint “1,0”>  It is a UWP linear gradient i imported all the required xml namespaces and this was the xaml code: This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.


The fact that the rectangle has a gradient in it is a probably a "red herring".

Focus first on why the buttons don't appear at all. Once you solve that, it should be easy to add the gradient.

There are two likely reasons:

  1. Adding the rectangle pushes the buttons down offscreen.

or 2. The renderer "choked" on the gradient, and didn't render anything else after it encountered it.

IMHO, #1 is more likely. I say that because I notice your overlaid StackLayout has VerticalAlignment="Bottom". So if the layout engine has (mistakenly?) decided that the single cell in the outermost grid is much taller than the screen, then two things will happen: the gradient will be stretched very far vertically (so appears not to change), and the buttons will be pushed off the bottom of the screen.

#2 would be a renderer bug involving gradient (but I doubt that will be the case).


back to #1:

What is the actual pixel height of "Banner_Light_Big.jpg"? Consider making a smaller version for the device giving you trouble [picking a version based on device height in inches or in pixels, not sure which applies here]. If you remove the banner completely, does the problem go away? If so, but you don't want to shrink it, you might need to override layout (measure?) method and do your own calculation.

Alternatively, change the two "Auto" heights to "NN*" or "NN" (NN = any specific number): anything with no "Auto"s will almost surely eliminate the problem.

If the resulting "non-Auto" layout isn't exactly what you want, at least it will give you a working starting point, from which to try slightly different variations on how to nest these elements, to get the desired spacing.

C# 6 and .NET Core 1.0: Modern Cross-Platform Development, Analyzing UWP portability If you run the . However, they are cross-device if that device runs a modern flavor of Windows. Also Resources> <​LinearGradientBrush x:Key="rainbow"> <GradientStop Color="Red" Offset="0" /> <GradientStop  Working with your XAML UWP app. You can get to a Visual created by the XAML framework, and backing a visible FrameworkElement, using the ElementCompositionPreview class in Windows.UI.Xaml.Hosting. Note that Visuals created for you by the framework come with some limits on customization.


Try adding the color attribute and value for the first Gradient stop as well. Maybe since only a single color is specified, it takes the same color and applies throught the button.

<Rectangle.Fill>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Offset="0"/> // add color attribute here
            <GradientStop Color="#7F000000" Offset="1"/>
      </LinearGradientBrush>
</Rectangle.Fill>

Professional C# 6 and .NET Core 1.0, This changed with Windows Presentation Foundation (WPF). app is even more important with Universal Windows Platform (UWP) apps. With these apps, the device can be used by users who haven't used Windows applications before. With brushes you can create solid color, gradient, or more advanced backgrounds. A UWP app can target all or some selected devices. The Core APIs are shared on all devices in the Windows family. There are extension SDKs that provide specialized APIs for each device in the family. A UWP app is developed using Visual Studio 2015 or later versions. A UWP app is packaged and distributed using the .appx packaging format.


Professional C# 7 and .NET Core 2.0, With these apps, the device can be used by users who haven't used Windows With UWP apps, Microsoft has provided a lot more guidance and predefined Fill> <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5, 1"> <GradientStop​  StartPoint Property: Gets or sets the starting two-dimensional coordinates of the linear gradient. This is a dependency property. EndPoint Property: Gets or sets the ending two-dimensional coordinates of the linear gradient. This is a dependency property. GradientStop Class: Describes the location and color of a transition point in a gradient.


Add WPF Compatible RadialGradientBrush · Issue #1832 · windows , michael-hawker added some commits over 2 years ago Use Shared Canvas Device for RadialGradientBrush Uwp.UI/Brushes/RadialGradientBrush.cs",. The Universal Windows Platform extends C#, Visual Basic, or C++/CX concepts of properties and their values by adding the dependency property system. Topics in this section also document the XAML language as it's used by the UWP and basic to advanced scenarios about how to use XAML to define the UI for your UWP app.


LinearGradientBrush, Though brushes in WPF are most often used to fill in the background for a the gradient's start and stop points in absolute (device-independent) units, #216 – Defining Several Different Gradient Stops in a Gradient Fill. 'System.MissingMethodException' in Xamarin.Forms.Xaml.dll Method not found: 'Xamarin.Forms.ImageSource Xamarin.Forms.ImageSource.FromResource(System.String)'. when i delete this line : from my MainPage.xaml i have no problem but i need this line. I have this exception problem only on UWP and not on iOs or Android. Thank you for your time.