일부 장치에 대한 UWP의 XAML 그라데이션 문제

일부 장치에 대한 UWP의 XAML 그라데이션 문제

---

내가 사용하고 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 [ PC ]
• Lenovo ThinkPad 태블릿 2 [ T ]

이 페이지는 잘에 렌더링하는 응용 프로그램을 실행하면 M 과 PC 만에 T Gradient 와 두 개의 Button하단에의 전혀 렌더링되지 않습니다. 나는 그들을 볼 수 없지만 Buttons 를 누르면 탭 이벤트 핸들러가 작동합니다. 그러나 Rectangle그래디언트로 주석 을 달면 모든 장치에서 모든 것이 정상입니다.

그래디언트를 사용할 때 앱이 T에서 보이는 방식 입니다. 버튼이 없습니다. 그리고 그래디언트도 보이지 않습니다.

앱이 그라데이션없이 T에서 보이는 방식 입니다. 버튼이 제자리에 있습니다.

그리고 이것이 PC에서 실행되는 모습 입니다. 버튼과 그라디언트가 표시됩니다.

앱을 실행할 때 출력에 오류가 표시되지 않습니다. 왜 이것이 특정 장치에서만 발생하는지 모르겠습니다. 아마도 이것이 알려진 문제일까요?

업데이트 1

사용자 피드백에서이 버그는 Atom 기반 장치에만 영향을 미친다고 말할 수 있습니다. 그러나 이것이 모든 Atom 전원 장치에 대해 100 % 사실인지 확실하지 않습니다.

업데이트 2

Insider Preview Fast Ring에서 T 를 W10으로 업데이트했습니다 . 버그가 있습니다. 따라서 이것은 OS 빌드에 연결되지 않습니다.

업데이트 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.

---

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.

---

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.

결과적으로 "자동이 아닌"레이아웃이 정확히 원하는 것이 아니라면 최소한 원하는 간격을 얻기 위해 이러한 요소를 중첩하는 방법에 대해 약간 다른 변형을 시도 할 수있는 작업 시작 지점을 제공합니다.

---

첫 번째 Gradient 정지 점에도 색상 속성과 값을 추가해보십시오. 단일 색상 만 지정 되었기 때문에 동일한 색상을 사용하여 버튼을 통해 적용 할 수 있습니다.

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

참고 URL : https://stackoverflow.com/questions/35731023/xaml-gradient-issue-in-uwp-for-some-devices