question

BenoitLacert-0156 avatar image
0 Votes"
BenoitLacert-0156 asked BenoitLacert-0156 action

Opacity on LinearGradientBrush make strange effects....

Hello

Is someone can help me to found my 2 rectangle don't have the same color ?
The Rectangle1 have a opacity of .5 like the grid backgroud....

Why ? How have a rectangle with opacity of 1

Regards




<Page
x:Class="Test.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Test"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

 <Grid>
     <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*"/>
         <ColumnDefinition Width="*"/>
     </Grid.ColumnDefinitions>
     <Grid>
         <Grid.Background>
             <LinearGradientBrush EndPoint="0,0" StartPoint="20,20" MappingMode="Absolute" SpreadMethod="Repeat">
                 <GradientStopCollection>
                     <GradientStop Offset="0" Color="#80000000" />
                     <GradientStop Offset="0.5" Color="#80000000" />
                     <GradientStop Offset="0.5" Color="#80FFFFFF" />
                     <GradientStop Offset="1" Color="#80FFFFFF" />
                 </GradientStopCollection>
             </LinearGradientBrush>
         </Grid.Background>
         <Rectangle x:Name="Rectangle1" Fill="Black" Width="100" Height="100" VerticalAlignment="Center" HorizontalAlignment="Center" />
     </Grid>
     <Grid Grid.Column="1">
         <Grid.Background>
             <LinearGradientBrush EndPoint="0,0" StartPoint="20,20" MappingMode="Absolute" SpreadMethod="Repeat">
                 <GradientStopCollection>
                     <GradientStop Offset="0" Color="#ff000000" />
                     <GradientStop Offset="0.5" Color="#ff000000" />
                     <GradientStop Offset="0.5" Color="#FFffFFFF" />
                     <GradientStop Offset="1" Color="#FFFFffFF" />
                 </GradientStopCollection>
             </LinearGradientBrush>
         </Grid.Background>
         <Rectangle x:Name="Rectangle2" Fill="Black" Width="100" Height="100" VerticalAlignment="Center" HorizontalAlignment="Center" />
     </Grid>
 </Grid>

</Page>

windows-uwp
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

NicoZhu-MSFT avatar image
0 Votes"
NicoZhu-MSFT answered BenoitLacert-0156 edited

Hello, Welcome to Micorosoft Q&A,

Please refer Opacity document, When Opacity is set on objects that are nested, the effective opacity for rendering is the product of all applicable opacity factors. In other words, if you set the Grid opacity as 0.5, and Rectangle's opacity equal 0.5x1 = 0.5.

I have checked your color <GradientStop Offset="0" Color="#80000000" />, and it is RGBA color, and hex 80 equal to dec 128. so the color has 0.5 opacity. then it will make Rectangle transparent.

For your scenario, we suggest you use RGB color to replace RGA color .



  <GradientStop Offset="1" Color="#FFFFFF" />




If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hello

It's not ok. I need make gradient for full color to totaly transparent. If i use RGB i can't manage opacity.
And about opacity of parent, you can see in my sample they are not any opacity in parents. Just on the stops.

I try 2 rectangles on same level on grid. No background on grid, one rectangle full on grid with gradient, and the second small rectagle is still transparent or his color is full

0 Votes 0 ·