c# - tutorial - Problema de gradiente XAML en UWP para algunos dispositivos

uwp windows 7

Question

Estoy usando Page como pantalla de inicio en mi aplicación. XAML se ve así:

<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>

Tengo 3 dispositivos en los que estoy ejecutando la aplicación:

• Microsoft Lumia 950 XL [ M ]
• PC de compilación personalizada [ PC ]
• Lenovo ThinkPad Tablet 2 [ T ]

Al ejecutar la aplicación, esta página se muestra bien en M y PC, pero en T Gradient y dos Button s en la parte inferior no se muestran en absoluto. No los veo, pero puedo presionar los Button sy sus manejadores de eventos de tap golpearán. Pero si comento Rectangle con degradado, todo está bien en todos los dispositivos.

Así es como se ve la aplicación en T cuando se usa degradado. Sin botones Y el gradiente tampoco es visible.

Así es como se ve la aplicación en T sin gradiente. Los botones están en su lugar.

Y así es como debería verse funcionando en la PC . Los botones y el gradiente son visibles.

No veo ningún error en la salida cuando ejecuto la aplicación. No sé por qué sucede esto solo en dispositivos específicos. Tal vez este es un tipo de problema conocido?

ACTUALIZACIÓN 1

Según los comentarios de los usuarios, puedo decir que este error solo afecta a los dispositivos con Atom. Pero no estoy seguro de si esto es 100% cierto para todos los dispositivos con Atom.

ACTUALIZACIÓN 2

Había actualizado T con W10 desde Insider Preview Fast Ring. El error está en su lugar. Por lo tanto, esto no está conectado a las compilaciones del sistema operativo.

ACTUALIZACIÓN 3

Cambiar el Style Button a normal no resuelve esto. Entonces, el Style es bueno, no es la causa.

Answer 1

El hecho de que el rectángulo tenga un gradiente es probablemente un "arenque rojo".

Céntrese primero en por qué los botones no aparecen en absoluto. Una vez que resuelva eso, debería ser fácil agregar el gradiente.

Hay dos razones probables:

1. Agregar el rectángulo empuja los botones hacia abajo fuera de la pantalla.

o 2. El renderizador se "ahogó" en el gradiente y no mostró nada más después de encontrarlo.

En mi humilde opinión, el # 1 es más probable. Digo eso porque noto que su StackLayout superpuesto tiene VerticalAlignment="Bottom" . Entonces, si el motor de diseño ha (¿equivocado?) Decidido que la celda individual en la cuadrícula más externa es mucho más alta que la pantalla , entonces sucederán dos cosas: el gradiente se estirará muy verticalmente (por lo que parece no cambiar), y el los botones serán empujados desde la parte inferior de la pantalla.

# 2 sería un error de renderizado que involucra gradiente (pero dudo que ese sea el caso).

volver al # 1:

¿Cuál es la altura real en píxeles de "Banner_Light_Big.jpg"? Considere la posibilidad de hacer una versión más pequeña para el dispositivo que le causa problemas [elegir una versión basada en la altura del dispositivo en pulgadas o en píxeles, no estoy seguro de cuál se aplica aquí]. Si elimina el banner por completo, ¿desaparece el problema? Si es así, pero no desea reducirlo, es posible que deba anular el método de diseño (¿medida?) Y hacer su propio cálculo.

Alternativamente, cambie las dos alturas "Auto" a "NN *" o "NN" (NN = cualquier número específico): cualquier cosa sin "Auto" seguramente eliminará el problema.

Si el diseño "no automático" resultante no es exactamente lo que desea, al menos le dará un punto de partida de trabajo, desde el cual probar variaciones ligeramente diferentes sobre cómo anidar estos elementos, para obtener el espacio deseado.

Answer 2

Intente agregar el atributo de color y el valor para la primera parada de degradado también. Tal vez dado que solo se especifica un solo color, toma el mismo color y se aplica a través del botón.

<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>

Answer 3

Me he encontrado con problemas similares y he optado por un enfoque diferente y más portátil.

Hice una imagen de gradiente de altura 1 (para ahorrar espacio), y suficientes píxeles de ancho para dar la resolución de gradiente adecuada. Agregó una imagen y la estiró. Bastante más rápido y descarga la tubería de renderizado también.

Y funciona igual de bien en Xamarin.Forms.

Answer 4

Intente eliminar Grid.RowSpan="2" del Rectangle (o agregue una RowDefinition ), tiene 4 filas (4 RowDefinition ) pero con el Rectangle teniendo Grid.RowSpan=2 agrega hasta 5 filas, por lo que podría estar causando Tu problema.

EDITAR: Mi problema, Rectangle realidad se extiende sobre las filas 2 y 3 ( Grid.Row="2" ), por lo que está bien.

Como solo está apilando <StackPanel> sobre <Grid> (sin nada lujoso), puede intentar reemplazar el diseño raíz <Grid x:Name="LayoutRoot"> con <Canvas x:Name="LayoutRoot"> y ver si eso hace la diferencia