Custom controls with a container added with a ViewManager don't resize properly
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
- 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.
- Add it to a RNW application with a ViewManager.
- Start adding dynamically new items to the control.
- 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