WP - gradient around the perimeter, pixel breaks. How to get rid of them?

D

Dmitry Bondarenko2014-03-10 21:45:32

Windows phone

Dmitry Bondarenko, 2014-03-10 21:45:32

It is necessary to make an underlay for the text box, which would have edges from a gradient that smoothly transitions from color to transparency. Implemented with the help of several controls, each of them is responsible for its own section of the gradient. In the designer it looked very nice. Enough, slight deviations in the gradient are noticeable, but it is supposed to work either on a white background, where the gradient is not visible at all, because. coincides with the color of the gradient, or over the image, where the non-uniformity of colors will almost hide this artifact.
Screenshot from the designer:
Screenshot of the emulator (everything is 1 in 1 on a real device, checked):
I managed to minimize the visibility by playing with the block height in the range of 200.0 - 200.3 and the UseLayoutRounding parameter turned off, it helped, but not completely.

<Grid Height="200" UseLayoutRounding="False">
            <Grid.Resources>

                <system:Double x:Key="thValue">50</system:Double>

                <system:Double x:Key="thValueX2">100</system:Double>

                <system:Double x:Key="thValueLess">49</system:Double>

                <RadialGradientBrush x:Key="cornerBrush">
                    <GradientStop Color="White"
                                  Offset="0" />
                    <GradientStop Color="Black"
                                  Offset="1" />
                </RadialGradientBrush>

                <LinearGradientBrush x:Key="topBrush"
                                     StartPoint="0,1"
                                     EndPoint="0,0">
                    <GradientStop Color="White"
                                  Offset="0" />
                    <GradientStop Color="Transparent"
                                  Offset="1" />
                </LinearGradientBrush>

                <LinearGradientBrush x:Key="leftBrush"
                                     StartPoint="1,0"
                                     EndPoint="0,0">
                    <GradientStop Color="White"
                                  Offset="0" />
                    <GradientStop Color="Transparent"
                                  Offset="1" />
                </LinearGradientBrush>

                <LinearGradientBrush x:Key="rightBrush"
                                     StartPoint="0,0"
                                     EndPoint="1,0">
                    <GradientStop Color="White"
                                  Offset="0" />
                    <GradientStop Color="Transparent"
                                  Offset="1" />
                </LinearGradientBrush>

                <LinearGradientBrush x:Key="bottomBrush"
                                     StartPoint="0,0"
                                     EndPoint="0,1">
                    <GradientStop Color="White"
                                  Offset="0" />
                    <GradientStop Color="Transparent"
                                  Offset="1" />

                </LinearGradientBrush>
            </Grid.Resources>
            <!--<Ellipse HorizontalAlignment="Left"
                     VerticalAlignment="Top"
                     Width="{StaticResource thValueX2}"
                     Height="{StaticResource thValueX2}"
                     Fill="{StaticResource cornerBrush}" />-->

            <es:Arc ArcThickness="1"
                    UseOptimizedManipulationRouting="True"
                    Margin="0 0 0 0"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    Width="{StaticResource thValueX2}"
                    Height="{StaticResource thValueX2}"
                    EndAngle="0"
                    Stretch="None"
                    StartAngle="270"
                    UseLayoutRounding="True"
                    StrokeThickness="0"
                    ArcThicknessUnit="Percent">
                <es:Arc.Fill>
                    <RadialGradientBrush GradientOrigin="1,1"
                                         Center="1,1"
                                         RadiusX="1"
                                         RadiusY="1"
                                         SpreadMethod="Reflect">
                        <GradientStop Color="White"
                                      Offset="0" />
                        <GradientStop Color="Transparent"
                                      Offset="0.98" />
                    </RadialGradientBrush>
                </es:Arc.Fill>
            </es:Arc>

            <Ellipse  HorizontalAlignment="Right"
                      VerticalAlignment="Top"
                      Width="{StaticResource thValueX2}"
                      Height="{StaticResource thValueX2}"
                      Fill="{StaticResource cornerBrush}" />

            <!--<Ellipse  HorizontalAlignment="Left"
                      VerticalAlignment="Bottom"
                      Width="{StaticResource thValueX2}"
                      Height="{StaticResource thValueX2}"
                      Fill="{StaticResource cornerBrush}" />-->

            <es:Arc ArcThickness="1"
                    UseOptimizedManipulationRouting="True"
                    
                    Margin="0 0 0 0"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Bottom"
                    Width="{StaticResource thValueX2}"
                    Height="{StaticResource thValueX2}"
                    EndAngle="270"
                    Stretch="None"
                    StartAngle="180"
                    UseLayoutRounding="False"
                    StrokeThickness="0"
                    ArcThicknessUnit="Percent">
                <es:Arc.Fill>
                    <RadialGradientBrush GradientOrigin="1,0"
                                         Center="1,0"
                                         RadiusX="1"
                                         RadiusY="1"
                                         SpreadMethod="Reflect">
                        <GradientStop Color="White"
                                      Offset="0" />
                        <GradientStop Color="Transparent"
                                      Offset="0.98" />
                    </RadialGradientBrush>
                </es:Arc.Fill>
            </es:Arc>

            <Ellipse  HorizontalAlignment="Right"
                      OpacityMask="Black"
                      VerticalAlignment="Bottom"
                      Width="{StaticResource thValueX2}"
                      Height="{StaticResource thValueX2}"
                      Fill="{StaticResource cornerBrush}" />

            <!--Margin="50 0 50 0"-->
            <Rectangle  HorizontalAlignment="Stretch"
                        VerticalAlignment="Top"
                        Margin="50 0 50 0"
                        Height="{StaticResource thValue}"
                        Fill="{StaticResource topBrush}">
                <!--<Rectangle.Margin>
                    <Thickness Left="{StaticResource thValue}"
                               Top="0"
                               Right="{StaticResource thValue}"
                               Bottom="0" />
                </Rectangle.Margin>-->
            </Rectangle>

            <!--Margin="0 50 0 50"-->
            <Rectangle HorizontalAlignment="Left"
                       VerticalAlignment="Stretch"
                       UseLayoutRounding="False"
                       UseOptimizedManipulationRouting="True"
                       Margin="0 50 0 50"
                       Width="{StaticResource thValue}"
                       Fill="{StaticResource leftBrush}" />

            <!--Margin="0 50 0 50"-->
            <Rectangle HorizontalAlignment="Right"
                       Margin="0 50 0 50"
                       VerticalAlignment="Stretch"
                       Width="{StaticResource thValue}"
                       Fill="{StaticResource rightBrush}" />

            <!--Margin="50 0 50 0"-->
            <Rectangle HorizontalAlignment="Stretch"
                       Opacity="1"
                       VerticalAlignment="Bottom"
                       Margin="50 0 50 0"
                       Height="{StaticResource thValue}"
                       Fill="{StaticResource bottomBrush}">

                <Rectangle.OpacityMask>
                    <LinearGradientBrush StartPoint="0,1"
                                         EndPoint="0,0">
                        <GradientStop Color="White"
                                      Offset="0" />
                        <GradientStop Color="Black"
                                      Offset="1" />
                    </LinearGradientBrush>
                </Rectangle.OpacityMask>
                <!--<Rectangle.Margin>
                    <Thickness Left="{StaticResource thValue}"
                               Top="0"
                               Right="{StaticResource thValue}"
                               Bottom="0" />
                </Rectangle.Margin>-->
            </Rectangle>

            <Rectangle HorizontalAlignment="Stretch"
                       Margin="49"
                       VerticalAlignment="Stretch"
                       Fill="White">
                <!--<Rectangle.Margin>
                    <Thickness Left="{StaticResource thValueLess}"
                               Top="{StaticResource thValueLess}"
                               Right="{StaticResource thValueLess}"
                               Bottom="{StaticResource thValueLess}" />
                </Rectangle.Margin>-->
            </Rectangle>
        </Grid>

What is the problem? What other ways are there to make it happen?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

S

Shevnin, 2014-03-11
@bondarenkod

Try rounding the corners of the rectanles, this will smooth out the highlights