Проблема градиента XAML в UWP для некоторых устройств

Я использую Page качестве целевого экрана в моем приложении. XAML выглядит так:

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

У меня есть 3 устройства, на которых я запускаю приложение:

Microsoft Lumia 950 XL [ M ]
Кастомный ПК [ PC ]
Lenovo ThinkPad Tablet 2 [ T ]

При запуске приложения эта страница хорошо отображается на M и ПК, но на T Gradient и две Button внизу не отображаются вообще. Я их не вижу, но могу нажать Button и их обработчики событий касания сработают. Но если я прокомментирую Rectangle с градиентом, все хорошо на всех устройствах.

Вот как приложение выглядит на T при использовании градиента. Нет кнопок. И градиент тоже не виден.

Вот так приложение выглядит на T без градиента. Кнопки на месте.

И вот как это должно выглядеть на ПК. Кнопки и градиент видны.

Я не вижу ошибок в выводе при запуске приложения. Я не знаю, почему это происходит только на определенных устройствах. Может быть, это известная проблема?

ОБНОВЛЕНИЕ 1

Из отзывов пользователей могу сказать, что эта ошибка распространяется только на устройства с Atom. Но я не уверен, что это на 100% верно для всех устройств на платформе Atom.

ОБНОВЛЕНИЕ 2

Я обновил T с W10 из Insider Preview Fast Ring. Ошибка на месте. Так что это не связано со сборками ОС.

ОБНОВЛЕНИЕ 3

Переключение Style Button назад к обычному не решает эту проблему. Так что Style хорош, это не причина.

Ответ 1

Попробуйте удалить Grid.RowSpan="2" из Rectangle (или добавить RowDefinition), у вас есть 4 строки (4 RowDefinition), но с Rectangle с Grid.RowSpan=2 он добавляет до 5 строк, так что это может вызвать проблемы.

РЕДАКТИРОВАТЬ: Плохое, Rectangle на самом деле распространяется на строки 2 и 3 (Grid.Row="2"), поэтому оно нормально.

Поскольку вы просто складываете <StackPanel> поверх <Grid> (ничем не причудливым), вы можете попробовать заменить корневой макет <Grid x:Name="LayoutRoot"> на <Canvas x:Name="LayoutRoot"> и посмотреть, не имеет ли это значение.

Ответ 2

Я сталкивался с похожими проблемами и пошел на другой и более портативный подход.

Я сделал градиентное изображение высотой 1 (для экономии места) и достаточное количество пикселей по ширине, чтобы обеспечить правильное разрешение градиента. Добавил изображение и растянул его. Немного быстрее и разгружает конвейер рендеринга.

И это работает так же хорошо в Xamarin.Forms.

Ответ 3

Тот факт, что у прямоугольника есть градиент, вероятно, является "красной сельдью".

Сначала сфокусируйтесь на том, почему кнопки вообще не появляются. Как только вы решите это, должно быть легко добавить градиент.

Есть две вероятные причины:

Добавление прямоугольника толкает кнопки вниз за экран.

или 2. Рендерер "задохнулся" от градиента и больше ничего не рендерил после того, как столкнулся с ним.

ИМХО, # 1 более вероятно. Я говорю это, потому что замечаю, что у вашего наложенного StackLayout есть VerticalAlignment="Bottom". Так что, если механизм размещения (ошибочно?) Решил, что одна ячейка во внешней сетке намного выше экрана, то произойдут две вещи: градиент будет растянут очень далеко по вертикали (поэтому, похоже, не изменится), и кнопки будут отталкиваться от нижней части экрана.

# 2 будет ошибка рендерера с градиентом (но я сомневаюсь, что так и будет).

вернуться к # 1:

Какова фактическая высота пикселя "Banner_Light_Big.jpg"? Подумайте над созданием уменьшенной версии для устройства, которая доставляет вам проблемы [выбирая версию, основанную на высоте устройства в дюймах или в пикселях, не уверенная, какая здесь применима] Если вы удалите баннер полностью, проблема исчезнет? Если это так, но вы не хотите сокращать его, возможно, вам придется переопределить метод компоновки (мера?) И выполнить собственный расчет.

Также можно изменить две высоты "Авто" на "NN *" или "NN" (NN = любое конкретное число): все, что не имеет "Авто", почти наверняка устранит проблему.

Если полученная в результате компоновка "не-Авто" не совсем то, что вам нужно, по крайней мере, она даст вам рабочую отправную точку, из которой можно попробовать несколько разные варианты того, как вложить эти элементы, чтобы получить желаемый интервал.

Ответ 4

Попробуйте добавить атрибут цвета и значение для первой градиентной остановки. Возможно, поскольку указан только один цвет, он принимает тот же цвет и применяется к кнопке.

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