Is Android/iOS using skia to render the controls?

[l0gaw]

I created a new app using the template wizard, and it states that the Android and iOS platforms use Skia to render, similar to Flutter. I generated the APK and used Appium Inspector, but I could only see native controls. Is Uno using Skia to render? Why are there native controls in the Appium inspector tree? Do I have to do anything else to use Skia Renderer?

[jeromelaban]

Thanks for the question.

Yes, when the Skia rendering mode is enabled, Uno uses Skia entirely to render the UI.

Could you share what you see in Appium? You may be seeing some portions of shadow native controls that are used for accessibility, depending on what's defined in your UI.

Also, could you show the .csproj and global.json that you got in your project?

[l0gaw]

I don't know if you can see the Control tree in this image. So, does Appium work to test the Uno App because of these portions of shadow native controls?

global.json:

 {
  "msbuild-sdks": {
    "Uno.Sdk": "6.0.96"
  },
  "sdk": {
    "allowPrerelease": false
  }
}

csproj:

<Project Sdk="Uno.Sdk">
  <PropertyGroup>
    <TargetFrameworks>net9.0-android;net9.0-ios;net9.0-desktop;net9.0-windows10.0.26100;net9.0-browserwasm;net9.0</TargetFrameworks>

    <OutputType>Exe</OutputType>
    <UnoSingleProject>true</UnoSingleProject>

    <!-- Display name -->
    <ApplicationTitle>BHUno</ApplicationTitle>
    <!-- App Identifier -->
    <ApplicationId>com.companyname.BHUno</ApplicationId>
    <!-- Versions -->
    <ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
    <ApplicationVersion>1</ApplicationVersion>
    <!-- Package Publisher -->
    <ApplicationPublisher>Rafael</ApplicationPublisher>
    <!-- Package Description -->
    <Description>BHUno powered by Uno Platform.</Description>
    <!--
      If you encounter this error message:

        error NETSDK1148: A referenced assembly was compiled using a newer version of Microsoft.Windows.SDK.NET.dll.
        Please update to a newer .NET SDK in order to reference this assembly.

      This means that the two packages below must be aligned with the "build" version number of
      the "Microsoft.Windows.SDK.BuildTools" package above, and the "revision" version number
      must be the highest found in https://www.nuget.org/packages/Microsoft.Windows.SDK.NET.Ref.
    -->
    <!-- <WindowsSdkPackageVersion>10.0.22621.28</WindowsSdkPackageVersion> -->

    <!--
      UnoFeatures let's you quickly add and manage implicit package references based on the features you want to use.
      https://aka.platform.uno/singleproject-features
    -->
    <UnoFeatures>
      Material;
      Dsp;
      Hosting;
      Toolkit;
      Logging;
      Mvvm;
      Configuration;
      HttpRefit;
      Serialization;
      Localization;
      Navigation;
      ThemeService;
      SkiaRenderer;
    </UnoFeatures>
    <DefaultLanguage>en-US</DefaultLanguage>
  </PropertyGroup>

  <PropertyGroup Condition="'$(Configuration)'=='Debug' or '$(IsUiAutomationMappingEnabled)'=='True'">
    <IsUiAutomationMappingEnabled>True</IsUiAutomationMappingEnabled>
    <DefineConstants>$(DefineConstants);USE_UITESTS</DefineConstants>
  </PropertyGroup>

  <PropertyGroup Condition="'$(TargetFramework)'=='net9.0-ios'">
    <ProvisioningType>manual</ProvisioningType>
  </PropertyGroup>
                        
    <ItemGroup>
        <UnoImage Include="Assets\Images\*" />
    </ItemGroup>
                                                          
    <ItemGroup>
      <PackageReference Include="Microsoft.Maui.Essentials" />
      <PackageReference Include="Polly" />
      <PackageReference Include="Scrutor" />
    </ItemGroup>
    
    <ItemGroup>
      <ProjectReference Include="..\Ai.Mobile.LwM2M\Ai.Mobile.LwM2M.csproj" />
    </ItemGroup>
                                                                           
</Project>

[jeromelaban]

Thanks, you're indeed seeing the controls that are managed by Uno in order for accessibility to work properly. We've mapped some of the out of the box controls here:

uno/src/Uno.UI.Runtime.Skia.Android/Microsoft/UI/Xaml/UnoExploreByTouchHelper.cs

Lines 233 to 278 in 171f4dd

	var androidClassName = controlType switch
	{
	AutomationControlType.AppBar => "android.view.View",
	AutomationControlType.Button => "android.widget.Button",
	AutomationControlType.CheckBox => "android.widget.CheckBox",
	AutomationControlType.Calendar => "android.view.View",
	AutomationControlType.ComboBox => "android.widget.Spinner",
	AutomationControlType.Edit => "android.widget.EditText",
	AutomationControlType.Hyperlink => "android.view.View",
	AutomationControlType.Image => "android.widget.ImageView",
	AutomationControlType.ListItem => "android.view.View",
	AutomationControlType.List => "android.view.View",
	AutomationControlType.Menu => "android.view.View",
	AutomationControlType.MenuBar => "android.view.View",
	AutomationControlType.MenuItem => "android.view.View",
	AutomationControlType.ProgressBar => "android.view.View",
	AutomationControlType.RadioButton => "android.widget.RadioButton",
	AutomationControlType.ScrollBar => "android.view.View",
	AutomationControlType.Slider => "android.widget.SeekBar",
	AutomationControlType.Spinner => "android.view.View",
	AutomationControlType.StatusBar => "android.view.View",
	AutomationControlType.Tab => "android.view.View",
	AutomationControlType.TabItem => "android.view.View",
	AutomationControlType.Text => "android.view.View",
	AutomationControlType.ToolBar => "android.view.View",
	AutomationControlType.ToolTip => "android.view.View",
	AutomationControlType.Tree => "android.view.View",
	AutomationControlType.TreeItem => "android.view.View",
	AutomationControlType.Custom => "android.view.View",
	AutomationControlType.Group => "android.view.View",
	AutomationControlType.Thumb => "android.view.View",
	AutomationControlType.DataGrid => "android.view.View",
	AutomationControlType.DataItem => "android.view.View",
	AutomationControlType.Document => "android.view.View",
	AutomationControlType.SplitButton => "android.view.View",
	AutomationControlType.Window => "android.view.View",
	AutomationControlType.Pane => "android.view.View",
	AutomationControlType.Header => "android.view.View",
	AutomationControlType.HeaderItem => "android.view.View",
	AutomationControlType.Table => "android.view.View",
	AutomationControlType.TitleBar => "android.view.View",
	AutomationControlType.Separator => "android.view.View",
	AutomationControlType.SemanticZoom => "android.view.View",
	_ => "android.view.View",
	};

The work for this part on accessibility interaction is still a work in progress, let us know what kind of scenarios you're trying to reach that may not work.

[l0gaw]

Thank you for the information. Do we have something similar for iOS?