A Targeted Style, in `Page.Resources`, is applied to non-targeted elements

[baskren]

Current behavior

When given the following XAML:

<Page
    x:Class="FlexPanelTest.CatalogItemsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlexPanelTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    mc:Ignorable="d"
    Padding="0"
    Margin="0"
    Background="LightGray">
    <Page.Resources>
        <Style TargetType="Border">
            <Setter Property="Background" Value="LightYellow" />
            <Setter Property="BorderBrush" Value="Blue" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Margin" Value="10" />
            <Setter Property="Padding" Value="20" />
            <Setter Property="CornerRadius" Value="20" />
            <Setter Property="Width" Value="350"/>
            <Setter Property="Height" Value="500" />
            <Setter Property="VerticalAlignment" Value="Top" />
        </Style>

    </Page.Resources>

    <Page.Content>
        <ScrollViewer
            Background="Pink"
            HorizontalScrollMode="Enabled"  
            HorizontalScrollBarVisibility="Visible"
            HorizontalAlignment="Stretch"
            VerticalScrollMode="Disabled"
            VerticalScrollBarVisibility="Visible"
            VerticalAlignment="Stretch"
            Margin="0"
            Padding="0"
            >
            <ScrollViewer.Content>
                <StackPanel 
                    Background="Cyan"
                    Margin="0"
                    Orientation="Horizontal"
                    >
                    <Border/>
                    <Border/>
                    <Border/>
                    <Border/>
                    <Border/>
                    <Border/>

                </StackPanel>
            </ScrollViewer.Content>
        </ScrollViewer>
    </Page.Content>
</Page>

Resulting Android screen shot (similar results for iOS and WebAsm):

The property setters contained in <Style TargetType="Border"> should only target the <Border> elements. However, most (but not all) of the setters are being applied to the <ScrollViewer> - in some cases, even when those properties are set in the element's tag.

Examples:

• the Border Width and Height properties should be 350 and 500 respectively. However, the ScrollViewer width and height are being set to 350 and 500.
• the Padding of the ScrollViewer is set to 0 and the Padding of the borders should be 20. However, the ScrollViewer Padding is 20 as well.
• the VerticalAlignment of the ScrollViewer should be Stretch. However, it is overridden the by Border targeted Style.Setter to be Top.

Counter example:

• The Background property of all elements is as expected.

Expected behavior

The output should like the following:

UWP, using the same above code:

Android, not using Targeted Style Setters in the Page.Resources:

How to reproduce it (as minimally and precisely as possible)

https://github.com/baskren/FlexLayoutDev/tree/ScrollViewer-PaddingStyleContamination

Workaround

Deliberately set all properties - do not use Style Setters from ResourceDictionaries. https://github.com/baskren/FlexLayoutDev/tree/SrollViewer-BaselineProperties

Environment

Visual Studio Environment:

Microsoft Visual Studio Community 2019 Version 16.7.3 VisualStudio.16.Release/16.7.3+30503.244 Microsoft .NET Framework Version 4.8.04084

Installed Version: Community

Visual C++ 2019 00435-60000-00000-AA619 Microsoft Visual C++ 2019

ASP.NET and Web Tools 2019 16.7.532.28833 ASP.NET and Web Tools 2019

ASP.NET Core Razor Language Services 16.1.0.2035807+72d099b977d3a85e65fa3b0614ca8cfc803fef02 Provides languages services for ASP.NET Core Razor.

ASP.NET Web Frameworks and Tools 2019 16.7.532.28833 For additional information, visit https://www.asp.net/

Azure App Service Tools v3.0.0 16.7.532.28833 Azure App Service Tools v3.0.0

Azure Functions and Web Jobs Tools 16.7.532.28833 Azure Functions and Web Jobs Tools

C# Tools 3.7.0-6.20427.1+18ede13943b0bfae1b44ef078b2f3923159bcd32 C# components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used.

CleanBinAndObjCommand Extension 1.1.0 CleanBinAndObjCommand Visual Studio Extension Detailed Info

Common Azure Tools 1.10 Provides common services for use by Azure Mobile Services and Microsoft Azure Tools.

Extensibility Message Bus 1.2.6 (master@34d6af2) Provides common messaging-based MEF services for loosely coupled Visual Studio extension components communication and integration.

IncrediBuild Build Acceleration 1.5.0.13 IncrediBuild effectively reduces compilation and development times by up to 90%.

IntelliCode Extension 1.0 IntelliCode Visual Studio Extension Detailed Info

Microsoft Azure Tools 2.9 Microsoft Azure Tools for Microsoft Visual Studio 2019 - v2.9.30701.1

Microsoft Continuous Delivery Tools for Visual Studio 0.4 Simplifying the configuration of Azure DevOps pipelines from within the Visual Studio IDE.

Microsoft JVM Debugger 1.0 Provides support for connecting the Visual Studio debugger to JDWP compatible Java Virtual Machines

Microsoft Library Manager 2.1.79+ge3567815aa.RR Install client-side libraries easily to any web project

Microsoft MI-Based Debugger 1.0 Provides support for connecting Visual Studio to MI compatible debuggers

Microsoft Visual C++ Wizards 1.0 Microsoft Visual C++ Wizards

Microsoft Visual Studio Tools for Containers 1.1 Develop, run, validate your ASP.NET Core applications in the target environment. F5 your application directly into a container with debugging, or CTRL + F5 to edit & refresh your app without having to rebuild the container.

Microsoft Visual Studio VC Package 1.0 Microsoft Visual Studio VC Package

Mono Debugging for Visual Studio 16.7.5 (112c7bc) Support for debugging Mono processes with Visual Studio.

NuGet Package Manager 5.7.0 NuGet Package Manager in Visual Studio. For more information about NuGet, visit https://docs.nuget.org/

ProjectServicesPackage Extension 1.0 ProjectServicesPackage Visual Studio Extension Detailed Info

SQL Server Data Tools 16.0.62008.03130 Microsoft SQL Server Data Tools

Test Adapter for Boost.Test 1.0 Enables Visual Studio's testing tools with unit tests written for Boost.Test. The use terms and Third Party Notices are available in the extension installation directory.

Test Adapter for Google Test 1.0 Enables Visual Studio's testing tools with unit tests written for Google Test. The use terms and Third Party Notices are available in the extension installation directory.

TypeScript Tools 16.0.20702.2001 TypeScript Tools for Microsoft Visual Studio

UnoPlatformPackage Extension 1.0 UnoPlatformPackage Visual Studio Extension Detailed Info

Visual Basic Tools 3.7.0-6.20427.1+18ede13943b0bfae1b44ef078b2f3923159bcd32 Visual Basic components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used.

Visual C++ for Cross Platform Mobile Development (Android) 16.0.30309.115 Visual C++ for Cross Platform Mobile Development (Android)

Visual C++ for Cross Platform Mobile Development (iOS) 16.0.30309.115 Visual C++ for Cross Platform Mobile Development (iOS)

Visual F# Tools 10.10.0.0 for F# 4.7 16.7.0-beta.20361.3+3ef6f0b514198c0bfa6c2c09fefe41a740b024d5 Microsoft Visual F# Tools 10.10.0.0 for F# 4.7

Visual Studio Code Debug Adapter Host Package 1.0 Interop layer for hosting Visual Studio Code debug adapters in Visual Studio

Visual Studio Container Tools Extensions (Preview) 1.0 View, manage, and diagnose containers within Visual Studio.

Visual Studio Tools for CMake 1.0 Visual Studio Tools for CMake

Visual Studio Tools for Containers 1.0 Visual Studio Tools for Containers

VisualStudio.DeviceLog 1.0 Information about my package

VisualStudio.Foo 1.0 Information about my package

VisualStudio.Mac 1.0 Mac Extension for Visual Studio

Xamarin 16.7.000.440 (d16-7@358f3c6) Visual Studio extension to enable development for Xamarin.iOS and Xamarin.Android.

Xamarin Designer 16.7.0.495 (remotes/origin/d16-7@79c0c522c) Visual Studio extension to enable Xamarin Designer tools in Visual Studio.

Xamarin Templates 16.7.85 (1bcbbdf) Templates for building iOS, Android, and Windows apps with Xamarin and Xamarin.Forms.

Xamarin.Android SDK 11.0.2.0 (d16-7/025fde9) Xamarin.Android Reference Assemblies and MSBuild support. Mono: 83105ba Java.Interop: xamarin/java.interop/d16-7@1f3388a ProGuard: Guardsquare/proguard/proguard6.2.2@ebe9000 SQLite: xamarin/sqlite/3.32.1@1a3276b Xamarin.Android Tools: xamarin/xamarin-android-tools/d16-7@017078f

Xamarin.iOS and Xamarin.Mac SDK 13.20.2.2 (817b6f72a) Xamarin.iOS and Xamarin.Mac Reference Assemblies and MSBuild support.

Nuget Package:

• [x] Uno.UI / Uno.UI.WebAssembly / Uno.UI.Skia
• [ ] Uno.WinUI / Uno.WinUI.WebAssembly / Uno.WinUI.Skia
• [ ] Uno.SourceGenerationTasks
• [ ] Uno.UI.RemoteControl / Uno.WinUI.RemoteControl
• [ ] Other:

Nuget Package Version(s):

Affected platform(s):

• [x] iOS
• [x] Android
• [x] WebAssembly
• [ ] WebAssembly renderers for Xamarin.Forms
• [x] macOS
• [?] Skia
  • [ ] WPF
  • [ ] GTK (Linux)
  • [ ] Tizen
• [ ] Windows
• [ ] Build tasks
• [ ] Solution Templates

IDE:

• [ ] Visual Studio 2017 (version: )
• [x] Visual Studio 2019 (version: )
• [x] Visual Studio for Mac (version: )
• [ ] Rider Windows (version: )
• [ ] Rider macOS (version: )
• [ ] Visual Studio Code (version: )

Relevant plugins:

• [ ] Resharper (version: )

Anything else we need to know?

1. Just started working in Uno. Very impressed so far!
2. Would be happy to look into a PR for this but I'm so new to Uno that I know I would do more harm than good.

[davidjohnoliver]

Thanks for the report!

There's a bug here, but it's not with the styling, which is actually behaving as expected. The implicit Border style you set in the Page is being applied to the Border inside the ScrollViewer's control template.

The reason it manifests in an obvious way on Android is because the scrolling works differently: on UWP, the ScrollViewer itself is responsible for scrolling, whereas on Android, it's an inner child of the ScrollContentPresenter that handles the scrolling, which is inheriting from the native scroll view class.

The easiest workaround is probably to use a named style and explicitly set it on the Borders that you want it to be applied to.

[baskren]

Reasonable explanation. Thank you for the insights.

[MartinZikmund]

I think that this should not be happening anymore, can this be validated?

[agneszitte]

@Darsh0307 can you help verify this one with the latest versions please

[Darsh0307]

Hello @agneszitte @MartinZikmund

I believe so that the issue is not solved yet

Uno.Sdk :- 5.3.0-dev.1528 Uno.Templates.5.3.0-dev.84

The app was created using cli and it was a blank template.

I believe so that the targeted style is still there for android ,

Its showing like this for android

Android

Windows

FlexPannelTest.zip