react-native-windows icon indicating copy to clipboard operation
react-native-windows copied to clipboard

Custom controls with a container added with a ViewManager don't resize properly

Open qmatteoq opened this issue 3 years ago • 0 comments

Problem Description

If you have a custom control which has its own layout built with a container control (like a Grid) and you add it to a page with a custom ViewManager, it isn't able to properly resize when its content changes. For example, take the following custom control which is used to render a multi-line TextBox:

<UserControl
	x:Class="UWPClassLibrary.UserControls.MyTextBox"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:local="using:UWPClassLibrary.UserControls"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	d:DesignHeight="300"
	d:DesignWidth="400"
	mc:Ignorable="d">

	<!--  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  -->
	<Grid>
		<Grid.RowDefinitions>
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>

		<!--  HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"  -->
		<TextBox x:Name="MultiLineTextBox" Grid.Row="0" Grid.Column="0"
			AcceptsReturn="True" ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollMode="Enabled"
			SelectionHighlightColor="Red" TextWrapping="Wrap" />
	</Grid>
</UserControl>

If you add this control to a regular UWP application, it works as expected. As you add new lines to the TextBox, its height grows as the number of lines grows:

https://user-images.githubusercontent.com/1230332/190704407-7124fc18-9776-43ec-b67e-53270b48a128.mp4

If you add this control to a RNW application using a ViewManager, instead, the TextBox doesn't resize itself until you resize the whole window:

https://user-images.githubusercontent.com/1230332/190704529-28b1846f-5018-4959-b9eb-d2ce42e980c0.mp4

I was able to reproduce this problem also with a custom control which hosts a ListView and a button to dynamically add new items to the list. On a regular UWP app everything works. In RNW, until you resize the window, the added items aren't visible.

This problem should be fixed by this PR, which however is still a work in progress.

Steps To Reproduce

  1. Create a custom control which uses a container control, like Grid. The custom control should include a control which size can dynamically change at runtime, like a ListView.
  2. Add it to a RNW application with a ViewManager.
  3. Start adding dynamically new items to the control.
  4. Notice how they aren't displayed until you resize the window.

Expected Results

Like in a regular UWP application, the control automatically resizes itself as the content grows.

CLI version

6.4.0

Environment

System:
    OS: Windows 10 10.0.22622
    CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
    Memory: 2.31 GB / 15.60 GB
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.18.0 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
      Versions: 10.0.18362.0, 10.0.19041.0, 10.0.22000.0, 10.0.22621.0
  IDEs:
    Android Studio: Not Found
    Visual Studio: 16.11.32802.440 (Visual Studio Enterprise 2019), 17.3.32708.82 (Visual Studio Enterprise 2022), 17.3.32804.467 (Visual Studio Enterprise 2022)
  Languages:
    Java: 11.0.16.1 - C:\Program Files\Microsoft\jdk-11.0.16.101-hotspot\bin\javac.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.67.3 => 0.67.3
    react-native-windows: 0.67.4 => 0.67.4
  npmGlobalPackages:
    *react-native*: Not Found

Target Platform Version

10.0.19041

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2019

Build Configuration

Debug

Snack, code example, screenshot, or link to a repository

No response

qmatteoq avatar Sep 16 '22 18:09 qmatteoq