Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: add tool to debug visual tree for SampleApp #559

Merged
merged 1 commit into from
May 4, 2023
Merged

chore: add tool to debug visual tree for SampleApp #559

merged 1 commit into from
May 4, 2023

Conversation

Xiaoy312
Copy link
Contributor

GitHub Issue (If applicable): #n/a

PR Type

What kind of change does this PR introduce?

  • Feature
  • Refactoring (no functional changes, no api changes)

What is the new behavior?

  • add a debug button to inspect the local visual tree
  • improve details & formatting of existing TreeGraph implementation

PR Checklist

Please check if your PR fulfills the following requirements:

Other information

@Xiaoy312 Xiaoy312 enabled auto-merge (squash) April 28, 2023 19:53
@Xiaoy312 Xiaoy312 force-pushed the dev/xygu/20230428/qol-debug-visual-tree branch from 6ed8fc1 to 91dadee Compare April 28, 2023 20:00
@Xiaoy312
Copy link
Contributor Author

Xiaoy312 commented Apr 28, 2023 •
edited
Loading

it generates a tree like follow:

visual tree 
StackPanel // Actual=667x1613.474609375, HV=Stretch/Stretch, Visible
    TextBlock // Actual=21.2734375x18.62109375, HV=Stretch/Stretch, Visible
    ChipGroup // Actual=667x40, HV=Stretch/Stretch, Visible
        ItemsPresenter // Actual=667x40, HV=Stretch/Stretch, Visible
            StackPanel // Actual=667x40, HV=Stretch/Stretch, Visible
                Chip // Actual=162.78125x40, HV=Left/Stretch, Visible
                    Grid // Actual=162.78125x40, HV=Stretch/Stretch, Visible
                        ElevatedView#ElevatedRoot // Actual=154.78125x32, HV=Stretch/Stretch, Visible
                            Grid // Actual=154.78125x32, HV=Stretch/Stretch, Visible
                                Canvas#PART_ShadowHost // Actual=154.78125x32, HV=Stretch/Stretch, Visible
                                Border#PART_Border // Actual=154.78125x32, HV=Stretch/Stretch, Visible
                                    Grid // Actual=152.78125x30, HV=Stretch/Stretch, Visible
                                        Border#StateOverlay // Actual=152.78125x30, HV=Stretch/Stretch, Visible
                                        Ripple // Actual=152.78125x30, HV=Stretch/Stretch, Visible
                                            Grid // Actual=152.78125x30, HV=Stretch/Stretch, Visible
                                                ContentPresenter // Actual=152.78125x30, HV=Stretch/Stretch, Visible
                                                    Grid // Actual=136.78125x20, HV=Stretch/Stretch, Visible
                                                        ContentPresenter#IconPresenter // Actual=0x0, HV=Stretch/Stretch, Collapsed
                                                        Grid#CheckGlyphElement // Actual=20x20, HV=Stretch/Center, Visible
                                                            Path // Actual=16x12.539218127727509, HV=Center/Center, Visible
                                                        ContentPresenter#ContentPresenter // Actual=100.78125x18.0029296875, HV=Stretch/Center, Visible
                                                            ImplicitTextBlock // Actual=100.78125x18.0029296875, HV=Stretch/Stretch, Visible
                                                        Button#PART_RemoveButton // Actual=0x0, HV=Left/Center, Collapsed
                                                            Border#BorderRoot // Actual=0x0, HV=Stretch/Stretch, Visible
                                                                Path#GlyphElement // Actual=0x0, HV=Center/Center, Visible
                                                Canvas // Actual=152.78125x30, HV=Stretch/Stretch, Visible
                                                    Ellipse#ClickEllipse // Actual=153x153, HV=Stretch/Stretch, Visible
                Chip // Actual=143.77734375x40, HV=Left/Stretch, Visible
                    Grid // Actual=143.77734375x40, HV=Stretch/Stretch, Visible
                        ElevatedView#ElevatedRoot // Actual=135.77734375x32, HV=Stretch/Stretch, Visible
                            Grid // Actual=135.77734375x32, HV=Stretch/Stretch, Visible
                                Canvas#PART_ShadowHost // Actual=135.77734375x32, HV=Stretch/Stretch, Visible
                                Border#PART_Border // Actual=135.77734375x32, HV=Stretch/Stretch, Visible
                                    Grid // Actual=133.77734375x30, HV=Stretch/Stretch, Visible
                                        Border#StateOverlay // Actual=133.77734375x30, HV=Stretch/Stretch, Visible
                                        Ripple // Actual=133.77734375x30, HV=Stretch/Stretch, Visible
                                            Grid // Actual=133.77734375x30, HV=Stretch/Stretch, Visible
                                                ContentPresenter // Actual=133.77734375x30, HV=Stretch/Stretch, Visible
                                                    Grid // Actual=117.77734375x18.0029296875, HV=Stretch/Stretch, Visible
                                                        ContentPresenter#IconPresenter // Actual=0x0, HV=Stretch/Stretch, Collapsed
                                                        Grid#CheckGlyphElement // Actual=0x0, HV=Stretch/Center, Collapsed
                                                            Path // Actual=0x0, HV=Center/Center, Visible
                                                        ContentPresenter#ContentPresenter // Actual=101.77734375x18.0029296875, HV=Stretch/Center, Visible
                                                            ImplicitTextBlock // Actual=101.77734375x18.0029296875, HV=Stretch/Stretch, Visible
                                                        Button#PART_RemoveButton // Actual=0x0, HV=Left/Center, Collapsed
                                                            Border#BorderRoot // Actual=0x0, HV=Stretch/Stretch, Visible
                                                                Path#GlyphElement // Actual=0x0, HV=Center/Center, Visible
                                                Canvas // Actual=133.77734375x30, HV=Stretch/Stretch, Visible
                                                    Ellipse#ClickEllipse // Actual=134x134, HV=Stretch/Stretch, Visible
                Chip // Actual=72.3515625x40, HV=Left/Stretch, Visible
                    Grid // Actual=72.3515625x40, HV=Stretch/Stretch, Visible
                        ElevatedView#ElevatedRoot // Actual=64.3515625x32, HV=Stretch/Stretch, Visible
                            Grid // Actual=64.3515625x32, HV=Stretch/Stretch, Visible
                                Canvas#PART_ShadowHost // Actual=64.3515625x32, HV=Stretch/Stretch, Visible
                                Border#PART_Border // Actual=64.3515625x32, HV=Stretch/Stretch, Visible
                                    Grid // Actual=62.3515625x30, HV=Stretch/Stretch, Visible
                                        Border#StateOverlay // Actual=62.3515625x30, HV=Stretch/Stretch, Visible
                                        Ripple // Actual=62.3515625x30, HV=Stretch/Stretch, Visible
                                            Grid // Actual=62.3515625x30, HV=Stretch/Stretch, Visible
                                                ContentPresenter // Actual=62.3515625x30, HV=Stretch/Stretch, Visible
                                                    Grid // Actual=46.3515625x18.0029296875, HV=Stretch/Stretch, Visible
                                                        ContentPresenter#IconPresenter // Actual=0x0, HV=Stretch/Stretch, Collapsed
                                                        Grid#CheckGlyphElement // Actual=0x0, HV=Stretch/Center, Collapsed
                                                            Path // Actual=0x0, HV=Center/Center, Visible
                                                        ContentPresenter#ContentPresenter // Actual=30x18.0029296875, HV=Stretch/Center, Visible
                                                            ImplicitTextBlock // Actual=30.3515625x18.0029296875, HV=Stretch/Stretch, Visible
                                                        Button#PART_RemoveButton // Actual=0x0, HV=Left/Center, Collapsed
                                                            Border#BorderRoot // Actual=0x0, HV=Stretch/Stretch, Visible
                                                                Path#GlyphElement // Actual=0x0, HV=Center/Center, Visible
                                                Canvas // Actual=62.3515625x30, HV=Stretch/Stretch, Visible
                                                    Ellipse#ClickEllipse // Actual=62x62, HV=Stretch/Stretch, Visible
                Chip // Actual=53.5x40, HV=Left/Stretch, Visible
                    Grid // Actual=53.5x40, HV=Stretch/Stretch, Visible
                        ElevatedView#ElevatedRoot // Actual=45.5x32, HV=Stretch/Stretch, Visible
                            Grid // Actual=45.5x32, HV=Stretch/Stretch, Visible
                                Canvas#PART_ShadowHost // Actual=45.5x32, HV=Stretch/Stretch, Visible
                                Border#PART_Border // Actual=45.5x32, HV=Stretch/Stretch, Visible
                                    Grid // Actual=43.5x30, HV=Stretch/Stretch, Visible
                                        Border#StateOverlay // Actual=43.5x30, HV=Stretch/Stretch, Visible
                                        Ripple // Actual=43.5x30, HV=Stretch/Stretch, Visible
                                            Grid // Actual=43.5x30, HV=Stretch/Stretch, Visible
                                                ContentPresenter // Actual=43.5x30, HV=Stretch/Stretch, Visible
                                                    Grid // Actual=27.5x14.5, HV=Stretch/Stretch, Visible
                                                        ContentPresenter#IconPresenter // Actual=0x0, HV=Stretch/Stretch, Collapsed
                                                        Grid#CheckGlyphElement // Actual=0x0, HV=Stretch/Center, Collapsed
                                                            Path // Actual=0x0, HV=Center/Center, Visible
                                                        ContentPresenter#ContentPresenter // Actual=11.5x14.5, HV=Stretch/Center, Visible
                                                            PathIcon // Actual=11.5x14.5, HV=Stretch/Stretch, Visible
                                                                Path // Actual=11.5x14.5, HV=Stretch/Stretch, Visible
                                                        Button#PART_RemoveButton // Actual=0x0, HV=Left/Center, Collapsed
                                                            Border#BorderRoot // Actual=0x0, HV=Stretch/Stretch, Visible
                                                                Path#GlyphElement // Actual=0x0, HV=Center/Center, Visible
                                                Canvas // Actual=43.5x30, HV=Stretch/Stretch, Visible
                                                    Ellipse#ClickEllipse // Actual=44x44, HV=Stretch/Stretch, Visible
                Chip // Actual=57x40, HV=Left/Stretch, Visible
                    Grid // Actual=57x40, HV=Stretch/Stretch, Visible
                        ElevatedView#ElevatedRoot // Actual=49x32, HV=Stretch/Stretch, Visible
                            Grid // Actual=49x32, HV=Stretch/Stretch, Visible
                                Canvas#PART_ShadowHost // Actual=49x32, HV=Stretch/Stretch, Visible
                                Border#PART_Border // Actual=49x32, HV=Stretch/Stretch, Visible
                                    Grid // Actual=47x30, HV=Stretch/Stretch, Visible
                                        Border#StateOverlay // Actual=47x30, HV=Stretch/Stretch, Visible
                                        Ripple // Actual=47x30, HV=Stretch/Stretch, Visible
                                            Grid // Actual=47x30, HV=Stretch/Stretch, Visible
                                                ContentPresenter // Actual=47x30, HV=Stretch/Stretch, Visible
                                                    Grid // Actual=31x15, HV=Stretch/Stretch, Visible
                                                        ContentPresenter#IconPresenter // Actual=0x0, HV=Stretch/Stretch, Collapsed
                                                        Grid#CheckGlyphElement // Actual=0x0, HV=Stretch/Center, Collapsed
                                                            Path // Actual=0x0, HV=Center/Center, Visible
                                                        ContentPresenter#ContentPresenter // Actual=15x15, HV=Stretch/Center, Visible
                                                            Image // Actual=15x15, HV=Stretch/Stretch, Visible
                                                        Button#PART_RemoveButton // Actual=0x0, HV=Left/Center, Collapsed
                                                            Border#BorderRoot // Actual=0x0, HV=Stretch/Stretch, Visible
                                                                Path#GlyphElement // Actual=0x0, HV=Center/Center, Visible
                                                Canvas // Actual=47x30, HV=Stretch/Stretch, Visible
                                                    Ellipse#ClickEllipse // Actual=47x47, HV=Stretch/Stretch, Visible
    TextBlock // Actual=31.9921875x16.802734375, HV=Stretch/Stretch, Visible
    ScrollViewer // Actual=667x40, HV=Stretch/Stretch, Visible
        Border // Actual=667x40, HV=Stretch/Stretch, Visible
            Grid#Root // Actual=667x40, HV=Stretch/Stretch, Visible
                ScrollContentPresenter#ScrollContentPresenter // Actual=667x40, HV=Stretch/Stretch, Visible
                    StackPanel // Actual=667x40, HV=Stretch/Stretch, Visible
                        Chip // Actual=131.642578125x40, HV=Left/Stretch, Visible
                            Grid // Actual=131.642578125x40, HV=Stretch/Stretch, Visible
                                ElevatedView#ElevatedRoot // Actual=123.642578125x32, HV=Stretch/Stretch, Visible
                                    Grid // Actual=123.642578125x32, HV=Stretch/Stretch, Visible
                                        Canvas#PART_ShadowHost // Actual=123.642578125x32, HV=Stretch/Stretch, Visible
                                        Border#PART_Border // Actual=123.642578125x32, HV=Stretch/Stretch, Visible
                                            Grid // Actual=121.642578125x30, HV=Stretch/Stretch, Visible
                                                Border#StateOverlay // Actual=121.642578125x30, HV=Stretch/Stretch, Visible
                                                Ripple // Actual=121.642578125x30, HV=Stretch/Stretch, Visible
                                                    Grid // Actual=121.642578125x30, HV=Stretch/Stretch, Visible
                                                        ContentPresenter // Actual=121.642578125x30, HV=Stretch/Stretch, Visible
                                                            Grid // Actual=105.642578125x18.0029296875, HV=Stretch/Stretch, Visible
                                                                ContentPresenter#IconPresenter // Actual=18x18, HV=Stretch/Stretch, Visible
                                                                    Image // Actual=18x18, HV=Stretch/Stretch, Visible
                                                                Grid#CheckGlyphElement // Actual=0x0, HV=Stretch/Center, Collapsed
                                                                    Path // Actual=0x0, HV=Center/Center, Collapsed
                                                                ContentPresenter#ContentPresenter // Actual=53.642578125x18.0029296875, HV=Stretch/Center, Visible
                                                                    ImplicitTextBlock // Actual=53.642578125x18.0029296875, HV=Stretch/Stretch, Visible
                                                                Button#PART_RemoveButton // Actual=18x18, HV=Left/Center, Visible
                                                                    Border#BorderRoot // Actual=18x18, HV=Stretch/Stretch, Visible
                                                                        Path#GlyphElement // Actual=11.000000029802322x11, HV=Center/Center, Visible
                                                        Canvas // Actual=121.642578125x30, HV=Stretch/Stretch, Visible
                                                            Ellipse#ClickEllipse // Actual=122x122, HV=Stretch/Stretch, Visible
                        Chip // Actual=136.18359375x40, HV=Left/Stretch, Visible
                            Grid // Actual=136.18359375x40, HV=Stretch/Stretch, Visible
                                ElevatedView#ElevatedRoot // Actual=128.18359375x32, HV=Stretch/Stretch, Visible
                                    Grid // Actual=128.18359375x32, HV=Stretch/Stretch, Visible
                                        Canvas#PART_ShadowHost // Actual=128.18359375x32, HV=Stretch/Stretch, Visible
                                        Border#PART_Border // Actual=128.18359375x32, HV=Stretch/Stretch, Visible
                                            Grid // Actual=126.18359375x30, HV=Stretch/Stretch, Visible
                                                Border#StateOverlay // Actual=126.18359375x30, HV=Stretch/Stretch, Visible
                                                Ripple // Actual=126.18359375x30, HV=Stretch/Stretch, Visible
                                                    Grid // Actual=126.18359375x30, HV=Stretch/Stretch, Visible
                                                        ContentPresenter // Actual=126.18359375x30, HV=Stretch/Stretch, Visible
                                                            Grid // Actual=110.18359375x18.0029296875, HV=Stretch/Stretch, Visible
                                                                ContentPresenter#IconPresenter // Actual=18x18, HV=Stretch/Stretch, Visible
                                                                    Image // Actual=18x18, HV=Stretch/Stretch, Visible
                                                                Grid#CheckGlyphElement // Actual=0x0, HV=Stretch/Center, Collapsed
                                                                    Path // Actual=0x0, HV=Center/Center, Collapsed
                                                                ContentPresenter#ContentPresenter // Actual=58x18.0029296875, HV=Stretch/Center, Visible
                                                                    ImplicitTextBlock // Actual=58.18359375x18.0029296875, HV=Stretch/Stretch, Visible
                                                                Button#PART_RemoveButton // Actual=18x18, HV=Left/Center, Visible
                                                                    Border#BorderRoot // Actual=18x18, HV=Stretch/Stretch, Visible
                                                                        Path#GlyphElement // Actual=11.000000029802322x11, HV=Center/Center, Visible
                                                        Canvas // Actual=126.18359375x30, HV=Stretch/Stretch, Visible
                                                            Ellipse#ClickEllipse // Actual=126x126, HV=Stretch/Stretch, Visible
                        Chip // Actual=138.2421875x40, HV=Left/Stretch, Visible
                            Grid // Actual=138.2421875x40, HV=Stretch/Stretch, Visible
                                ElevatedView#ElevatedRoot // Actual=130.2421875x32, HV=Stretch/Stretch, Visible
                                    Grid // Actual=130.2421875x32, HV=Stretch/Stretch, Visible
                                        Canvas#PART_ShadowHost // Actual=130.2421875x32, HV=Stretch/Stretch, Visible
                                        Border#PART_Border // Actual=130.2421875x32, HV=Stretch/Stretch, Visible
                                            Grid // Actual=128.2421875x30, HV=Stretch/Stretch, Visible
                                                Border#StateOverlay // Actual=128.2421875x30, HV=Stretch/Stretch, Visible
                                                Ripple // Actual=128.2421875x30, HV=Stretch/Stretch, Visible
                                                    Grid // Actual=128.2421875x30, HV=Stretch/Stretch, Visible
                                                        ContentPresenter // Actual=128.2421875x30, HV=Stretch/Stretch, Visible
                                                            Grid // Actual=112.2421875x20, HV=Stretch/Stretch, Visible
                                                                ContentPresenter#IconPresenter // Actual=0x0, HV=Stretch/Stretch, Collapsed
                                                                Grid#CheckGlyphElement // Actual=20x20, HV=Stretch/Center, Visible
                                                                    Path // Actual=16x12.539218127727509, HV=Center/Center, Visible
                                                                ContentPresenter#ContentPresenter // Actual=58x18.0029296875, HV=Stretch/Center, Visible
                                                                    ImplicitTextBlock // Actual=58.2421875x18.0029296875, HV=Stretch/Stretch, Visible
                                                                Button#PART_RemoveButton // Actual=18x18, HV=Left/Center, Visible
                                                                    Border#BorderRoot // Actual=18x18, HV=Stretch/Stretch, Visible
                                                                        Path#GlyphElement // Actual=11.000000029802322x11, HV=Center/Center, Visible
                                                        Canvas // Actual=128.2421875x30, HV=Stretch/Stretch, Visible
                                                            Ellipse#ClickEllipse // Actual=128x128, HV=Stretch/Stretch, Visible
                ElementStub#VerticalScrollBar // Actual=0x0, HV=Stretch/Stretch, Collapsed
                ElementStub#HorizontalScrollBar // Actual=0x0, HV=Stretch/Stretch, Collapsed
                Border#ScrollBarSeparator // Actual=0x0, HV=Stretch/Stretch, Visible
        Border // Actual=667x48, HV=Stretch/Stretch, Visible
            Grid#Root // Actual=667x48, HV=Stretch/Stretch, Visible
                ScrollContentPresenter#ScrollContentPresenter // Actual=667x48, HV=Stretch/Stretch, Visible
                    ChipGroup#MultipleSelectionChipGroup // Actual=1093.0175323486328x40, HV=Stretch/Stretch, Visible
                        ItemsPresenter // Actual=1093.0175323486328x40, HV=Stretch/Stretch, Visible
                            StackPanel // Actual=1093.0175323486328x40, HV=Stretch/Stretch, Visible
                                Chip // Actual=116.10175323486328x40, HV=Left/Stretch, Visible
                                    Grid // Actual=116.10175323486328x40, HV=Stretch/Stretch, Visible
                                        ElevatedView#ElevatedRoot // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                            Grid // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                Canvas#PART_ShadowHost // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                Border#PART_Border // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                    Grid // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                        Border#StateOverlay // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                        Ripple // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                            Grid // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                ContentPresenter // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                    Grid // Actual=92.10175323486328x20, HV=Stretch/Stretch, Visible
                                                                        ContentPresenter#IconPresenter // Actual=0x0, HV=Stretch/Stretch, Collapsed
                                                                        Grid#CheckGlyphElement // Actual=20x20, HV=Stretch/Center, Visible
                                                                            Path // Actual=16x12.539218127727509, HV=Center/Center, Visible
                                                                        ContentPresenter#ContentPresenter // Actual=56x19.203125, HV=Stretch/Center, Visible
                                                                            TextBlock // Actual=56.10175323486328x19.203125, HV=Stretch/Stretch, Visible
                                                                        Button#PART_RemoveButton // Actual=0x0, HV=Left/Center, Collapsed
                                                                            Border#BorderRoot // Actual=0x0, HV=Stretch/Stretch, Visible
                                                                                Path#GlyphElement // Actual=0x0, HV=Center/Center, Visible
                                                                Canvas // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                    Ellipse#ClickEllipse // Actual=108x108, HV=Stretch/Stretch, Visible
                                Chip // Actual=116.10175323486328x40, HV=Left/Stretch, Visible
                                    Grid // Actual=116.10175323486328x40, HV=Stretch/Stretch, Visible
                                        ElevatedView#ElevatedRoot // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                            Grid // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                Canvas#PART_ShadowHost // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                Border#PART_Border // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                    Grid // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                        Border#StateOverlay // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                        Ripple // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                            Grid // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                ContentPresenter // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                    Grid // Actual=92.10175323486328x20, HV=Stretch/Stretch, Visible
                                                                        ContentPresenter#IconPresenter // Actual=0x0, HV=Stretch/Stretch, Collapsed
                                                                        Grid#CheckGlyphElement // Actual=20x20, HV=Stretch/Center, Visible
                                                                            Path // Actual=16x12.539218127727509, HV=Center/Center, Visible
                                                                        ContentPresenter#ContentPresenter // Actual=56x19.203125, HV=Stretch/Center, Visible
                                                                            TextBlock // Actual=56.10175323486328x19.203125, HV=Stretch/Stretch, Visible
                                                                        Button#PART_RemoveButton // Actual=0x0, HV=Left/Center, Collapsed
                                                                            Border#BorderRoot // Actual=0x0, HV=Stretch/Stretch, Visible
                                                                                Path#GlyphElement // Actual=0x0, HV=Center/Center, Visible
                                                                Canvas // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                    Ellipse#ClickEllipse // Actual=108x108, HV=Stretch/Stretch, Visible
                                Chip // Actual=116.10175323486328x40, HV=Left/Stretch, Visible
                                    Grid // Actual=116.10175323486328x40, HV=Stretch/Stretch, Visible
                                        ElevatedView#ElevatedRoot // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                            Grid // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                Canvas#PART_ShadowHost // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                Border#PART_Border // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                    Grid // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                        Border#StateOverlay // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                        Ripple // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                            Grid // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                ContentPresenter // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                    Grid // Actual=92.10175323486328x20, HV=Stretch/Stretch, Visible
                                                                        ContentPresenter#IconPresenter // Actual=0x0, HV=Stretch/Stretch, Collapsed
                                                                        Grid#CheckGlyphElement // Actual=20x20, HV=Stretch/Center, Visible
                                                                            Path // Actual=16x12.539218127727509, HV=Center/Center, Visible
                                                                        ContentPresenter#ContentPresenter // Actual=56x19.203125, HV=Stretch/Center, Visible
                                                                            TextBlock // Actual=56.10175323486328x19.203125, HV=Stretch/Stretch, Visible
                                                                        Button#PART_RemoveButton // Actual=0x0, HV=Left/Center, Collapsed
                                                                            Border#BorderRoot // Actual=0x0, HV=Stretch/Stretch, Visible
                                                                                Path#GlyphElement // Actual=0x0, HV=Center/Center, Visible
                                                                Canvas // Actual=108.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                    Ellipse#ClickEllipse // Actual=108x108, HV=Stretch/Stretch, Visible
                                Chip // Actual=96.10175323486328x40, HV=Left/Stretch, Visible
                                    Grid // Actual=96.10175323486328x40, HV=Stretch/Stretch, Visible
                                        ElevatedView#ElevatedRoot // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                            Grid // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                Canvas#PART_ShadowHost // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                Border#PART_Border // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                    Grid // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                        Border#StateOverlay // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                        Ripple // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                            Grid // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                ContentPresenter // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                    Grid // Actual=72.10175323486328x19.203125, HV=Stretch/Stretch, Visible
                                                                        ContentPresenter#IconPresenter // Actual=0x0, HV=Stretch/Stretch, Collapsed
                                                                        Grid#CheckGlyphElement // Actual=0x0, HV=Stretch/Center, Collapsed
                                                                            Path // Actual=0x0, HV=Center/Center, Visible
                                                                        ContentPresenter#ContentPresenter // Actual=56x19.203125, HV=Stretch/Center, Visible
                                                                            TextBlock // Actual=56.10175323486328x19.203125, HV=Stretch/Stretch, Visible
                                                                        Button#PART_RemoveButton // Actual=0x0, HV=Left/Center, Collapsed
                                                                            Border#BorderRoot // Actual=0x0, HV=Stretch/Stretch, Visible
                                                                                Path#GlyphElement // Actual=0x0, HV=Center/Center, Visible
                                                                Canvas // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                    Ellipse#ClickEllipse // Actual=88x88, HV=Stretch/Stretch, Visible
                                Chip // Actual=96.10175323486328x40, HV=Left/Stretch, Visible
                                    Grid // Actual=96.10175323486328x40, HV=Stretch/Stretch, Visible
                                        ElevatedView#ElevatedRoot // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                            Grid // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                Canvas#PART_ShadowHost // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                Border#PART_Border // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                    Grid // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                        Border#StateOverlay // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                        Ripple // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                            Grid // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                ContentPresenter // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                    Grid // Actual=72.10175323486328x19.203125, HV=Stretch/Stretch, Visible
                                                                        ContentPresenter#IconPresenter // Actual=0x0, HV=Stretch/Stretch, Collapsed
                                                                        Grid#CheckGlyphElement // Actual=0x0, HV=Stretch/Center, Collapsed
                                                                            Path // Actual=0x0, HV=Center/Center, Visible
                                                                        ContentPresenter#ContentPresenter // Actual=56x19.203125, HV=Stretch/Center, Visible
                                                                            TextBlock // Actual=56.10175323486328x19.203125, HV=Stretch/Stretch, Visible
                                                                        Button#PART_RemoveButton // Actual=0x0, HV=Left/Center, Collapsed
                                                                            Border#BorderRoot // Actual=0x0, HV=Stretch/Stretch, Visible
                                                                                Path#GlyphElement // Actual=0x0, HV=Center/Center, Visible
                                                                Canvas // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                    Ellipse#ClickEllipse // Actual=88x88, HV=Stretch/Stretch, Visible
                                Chip // Actual=96.10175323486328x40, HV=Left/Stretch, Visible
                                    Grid // Actual=96.10175323486328x40, HV=Stretch/Stretch, Visible
                                        ElevatedView#ElevatedRoot // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                            Grid // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                Canvas#PART_ShadowHost // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                Border#PART_Border // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                    Grid // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                        Border#StateOverlay // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                        Ripple // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                            Grid // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                ContentPresenter // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                    Grid // Actual=72.10175323486328x19.203125, HV=Stretch/Stretch, Visible
                                                                        ContentPresenter#IconPresenter // Actual=0x0, HV=Stretch/Stretch, Collapsed
                                                                        Grid#CheckGlyphElement // Actual=0x0, HV=Stretch/Center, Collapsed
                                                                            Path // Actual=0x0, HV=Center/Center, Visible
                                                                        ContentPresenter#ContentPresenter // Actual=56x19.203125, HV=Stretch/Center, Visible
                                                                            TextBlock // Actual=56.10175323486328x19.203125, HV=Stretch/Stretch, Visible
                                                                        Button#PART_RemoveButton // Actual=0x0, HV=Left/Center, Collapsed
                                                                            Border#BorderRoot // Actual=0x0, HV=Stretch/Stretch, Visible
                                                                                Path#GlyphElement // Actual=0x0, HV=Center/Center, Visible
                                                                Canvas // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                    Ellipse#ClickEllipse // Actual=88x88, HV=Stretch/Stretch, Visible
                                Chip // Actual=96.10175323486328x40, HV=Left/Stretch, Visible
                                    Grid // Actual=96.10175323486328x40, HV=Stretch/Stretch, Visible
                                        ElevatedView#ElevatedRoot // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                            Grid // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                Canvas#PART_ShadowHost // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                Border#PART_Border // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                    Grid // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                        Border#StateOverlay // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                        Ripple // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                            Grid // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                ContentPresenter // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                    Grid // Actual=72.10175323486328x19.203125, HV=Stretch/Stretch, Visible
                                                                        ContentPresenter#IconPresenter // Actual=0x0, HV=Stretch/Stretch, Collapsed
                                                                        Grid#CheckGlyphElement // Actual=0x0, HV=Stretch/Center, Collapsed
                                                                            Path // Actual=0x0, HV=Center/Center, Visible
                                                                        ContentPresenter#ContentPresenter // Actual=56x19.203125, HV=Stretch/Center, Visible
                                                                            TextBlock // Actual=56.10175323486328x19.203125, HV=Stretch/Stretch, Visible
                                                                        Button#PART_RemoveButton // Actual=0x0, HV=Left/Center, Collapsed
                                                                            Border#BorderRoot // Actual=0x0, HV=Stretch/Stretch, Visible
                                                                                Path#GlyphElement // Actual=0x0, HV=Center/Center, Visible
                                                                Canvas // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                    Ellipse#ClickEllipse // Actual=88x88, HV=Stretch/Stretch, Visible
                                Chip // Actual=96.10175323486328x40, HV=Left/Stretch, Visible
                                    Grid // Actual=96.10175323486328x40, HV=Stretch/Stretch, Visible
                                        ElevatedView#ElevatedRoot // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                            Grid // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                Canvas#PART_ShadowHost // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                Border#PART_Border // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                    Grid // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                        Border#StateOverlay // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                        Ripple // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                            Grid // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                ContentPresenter // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                    Grid // Actual=72.10175323486328x19.203125, HV=Stretch/Stretch, Visible
                                                                        ContentPresenter#IconPresenter // Actual=0x0, HV=Stretch/Stretch, Collapsed
                                                                        Grid#CheckGlyphElement // Actual=0x0, HV=Stretch/Center, Collapsed
                                                                            Path // Actual=0x0, HV=Center/Center, Visible
                                                                        ContentPresenter#ContentPresenter // Actual=56x19.203125, HV=Stretch/Center, Visible
                                                                            TextBlock // Actual=56.10175323486328x19.203125, HV=Stretch/Stretch, Visible
                                                                        Button#PART_RemoveButton // Actual=0x0, HV=Left/Center, Collapsed
                                                                            Border#BorderRoot // Actual=0x0, HV=Stretch/Stretch, Visible
                                                                                Path#GlyphElement // Actual=0x0, HV=Center/Center, Visible
                                                                Canvas // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                    Ellipse#ClickEllipse // Actual=88x88, HV=Stretch/Stretch, Visible
                                Chip // Actual=96.10175323486328x40, HV=Left/Stretch, Visible
                                    Grid // Actual=96.10175323486328x40, HV=Stretch/Stretch, Visible
                                        ElevatedView#ElevatedRoot // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                            Grid // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                Canvas#PART_ShadowHost // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                Border#PART_Border // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                    Grid // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                        Border#StateOverlay // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                        Ripple // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                            Grid // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                ContentPresenter // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                    Grid // Actual=72.10175323486328x19.203125, HV=Stretch/Stretch, Visible
                                                                        ContentPresenter#IconPresenter // Actual=0x0, HV=Stretch/Stretch, Collapsed
                                                                        Grid#CheckGlyphElement // Actual=0x0, HV=Stretch/Center, Collapsed
                                                                            Path // Actual=0x0, HV=Center/Center, Visible
                                                                        ContentPresenter#ContentPresenter // Actual=56x19.203125, HV=Stretch/Center, Visible
                                                                            TextBlock // Actual=56.10175323486328x19.203125, HV=Stretch/Stretch, Visible
                                                                        Button#PART_RemoveButton // Actual=0x0, HV=Left/Center, Collapsed
                                                                            Border#BorderRoot // Actual=0x0, HV=Stretch/Stretch, Visible
                                                                                Path#GlyphElement // Actual=0x0, HV=Center/Center, Visible
                                                                Canvas // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                    Ellipse#ClickEllipse // Actual=88x88, HV=Stretch/Stretch, Visible
                                Chip // Actual=96.10175323486328x40, HV=Left/Stretch, Visible
                                    Grid // Actual=96.10175323486328x40, HV=Stretch/Stretch, Visible
                                        ElevatedView#ElevatedRoot // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                            Grid // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                Canvas#PART_ShadowHost // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                Border#PART_Border // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                    Grid // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                        Border#StateOverlay // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                        Ripple // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                            Grid // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                ContentPresenter // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                    Grid // Actual=72.10175323486328x19.203125, HV=Stretch/Stretch, Visible
                                                                        ContentPresenter#IconPresenter // Actual=0x0, HV=Stretch/Stretch, Collapsed
                                                                        Grid#CheckGlyphElement // Actual=0x0, HV=Stretch/Center, Collapsed
                                                                            Path // Actual=0x0, HV=Center/Center, Visible
                                                                        ContentPresenter#ContentPresenter // Actual=56x19.203125, HV=Stretch/Center, Visible
                                                                            TextBlock // Actual=56.10175323486328x19.203125, HV=Stretch/Stretch, Visible
                                                                        Button#PART_RemoveButton // Actual=0x0, HV=Left/Center, Collapsed
                                                                            Border#BorderRoot // Actual=0x0, HV=Stretch/Stretch, Visible
                                                                                Path#GlyphElement // Actual=0x0, HV=Center/Center, Visible
                                                                Canvas // Actual=88.10175323486328x32, HV=Stretch/Stretch, Visible
                                                                    Ellipse#ClickEllipse // Actual=88x88, HV=Stretch/Stretch, Visible
                ElementStub#VerticalScrollBar // Actual=0x0, HV=Stretch/Stretch, Collapsed
                ScrollBar#HorizontalScrollBar // Actual=667x16, HV=Stretch/Stretch, Visible
                    Grid#Root // Actual=667x16, HV=Stretch/Stretch, Visible
                        Grid#HorizontalRoot // Actual=0x0, HV=Stretch/Stretch, Collapsed
                            Rectangle#HorizontalTrackRect // Actual=0x0, HV=Stretch/Stretch, Visible
                            RepeatButton#HorizontalSmallDecrease // Actual=0x0, HV=Left/Center, Visible
                                Grid#Root // Actual=0x0, HV=Stretch/Stretch, Visible
                                    FontIcon#Arrow // Actual=0x0, HV=Stretch/Stretch, Visible
                                        TextBlock // Actual=0x0, HV=Center/Center, Visible
                            RepeatButton#HorizontalLargeDecrease // Actual=0x0, HV=Stretch/Stretch, Visible
                                Grid#Root // Actual=0x0, HV=Stretch/Stretch, Visible
                            Thumb#HorizontalThumb // Actual=0x0, HV=Stretch/Bottom, Visible
                                Rectangle#ThumbVisual // Actual=0x0, HV=Stretch/Stretch, Visible
                            RepeatButton#HorizontalLargeIncrease // Actual=0x0, HV=Stretch/Stretch, Visible
                                Grid#Root // Actual=0x0, HV=Stretch/Stretch, Visible
                            RepeatButton#HorizontalSmallIncrease // Actual=0x0, HV=Left/Center, Visible
                                Grid#Root // Actual=0x0, HV=Stretch/Stretch, Visible
                                    FontIcon#Arrow // Actual=0x0, HV=Stretch/Stretch, Visible
                                        TextBlock // Actual=0x0, HV=Center/Center, Visible
                        Grid#HorizontalPanningRoot // Actual=0x0, HV=Stretch/Stretch, Collapsed
                            Border#HorizontalPanningThumb // Actual=0x0, HV=Left/Bottom, Visible
                        ElementStub#VerticalRoot // Actual=0x0, HV=Stretch/Stretch, Collapsed
                        ElementStub#VerticalPanningRoot // Actual=0x0, HV=Stretch/Stretch, Collapsed
                Border#ScrollBarSeparator // Actual=0x16, HV=Stretch/Stretch, Visible

for the best viewing experience, paste the tree in VSCode (you can collapse node) with ini syntax highlighting:
image

kazo0
kazo0 approved these changes Apr 28, 2023
View reviewed changes
src/Uno.Toolkit.UI/Helpers/PrettyPrint.cs Outdated Show resolved Hide resolved
@Xiaoy312 Xiaoy312 force-pushed the dev/xygu/20230428/qol-debug-visual-tree branch from 91dadee to 20e22dd Compare April 28, 2023 20:58
@Xiaoy312 Xiaoy312 force-pushed the dev/xygu/20230428/qol-debug-visual-tree branch from 20e22dd to 771e447 Compare April 28, 2023 22:01
@kazo0
Copy link
Contributor

kazo0 commented May 1, 2023

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 1 pipeline(s).

@Xiaoy312
Copy link
Contributor Author

Xiaoy312 commented May 3, 2023

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 1 pipeline(s).

@Xiaoy312 Xiaoy312 merged commit d7ef434 into main May 4, 2023
31 checks passed
@Xiaoy312 Xiaoy312 deleted the dev/xygu/20230428/qol-debug-visual-tree branch May 4, 2023 15:03
roubachof pushed a commit to sharpnado-pro/uno.toolkit.ui that referenced this pull request May 16, 2023
@Xiaoy312 @roubachof
chore: add tool to debug visual tree for SampleApp (unoplatform#559)
2c0acf2
roubachof pushed a commit to sharpnado-pro/uno.toolkit.ui that referenced this pull request May 29, 2023
@Xiaoy312 @roubachof
chore: add tool to debug visual tree for SampleApp (unoplatform#559)
9dfae8b
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kazo0 kazo0 kazo0 approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@Xiaoy312 @kazo0