6

I have searched far and wide for an answer on this and have come up short. I am using Universal Windows 10 (UWP) and C# in Visual Studio 2015 to build a basic text editor to mirror the functionality of Notepad.exe as practice and I'm running into an annoying display problem/quirk.

I have a Grid with 2 rows. The top row is a horizontal StackPanel with buttons and the bottom is a RichEditBox. Everything displays fine.. except when the RichEditBox has keyboard focus (which I pretty much make sure is always) and I resize the window vertically, the RichEditBox (and its green border) resizes differently than its Grid container. When I pull the window down to resize, the border of the RichEditBox "detaches" on the top and bottom and quickly slides back up (and down) to fill the grid. In the process the text jitters around while this animation is taking place. Note: this does NOT happen when I resize horizontally. (image link below it won't let me embed the pic)

Unwanted resize behavior

It's not the end of the world but it looks unprofessional and there must be a way to anchor the RichEditBox vertically so it always fills the grid row completely and doesn't pull apart from its container when I resize. I tried all of the properties on the Grid.Row, the RichEditBox and its built in ScrollViewer that I thought could possibly have anything to do with this and no luck. Using the VerticalAlignment = Top causes the RichEditBox to no longer fill the grid row vertically (unless I fill it with text of course). I also put the RichEditBox inside of a ScrollViewer instead of using its built in ScrollViewer and it did the same behavior.

Here is my XAML:

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <StackPanel Orientation="Horizontal" Height="Auto" Grid.Row="0"  Background="Azure" AllowFocusOnInteraction="False">

        <Button x:Name="FileButton" Content="File" Click="MenuButtonClicked" Padding="3,1"  Background="Azure">
            <Button.Flyout>
                <MenuFlyout Placement="Bottom">
                    <MenuFlyoutItem Text="New" Click="NewClicked" />
                    <MenuFlyoutItem Text="Open..." Click="OpenClicked" />
                    <MenuFlyoutItem Text="Save" Click="SaveClicked" />
                    <MenuFlyoutItem Text="Save As..." Click="SaveAsClicked" />
                    <MenuFlyoutItem Text="Close" Click="CloseClicked" />
                    <MenuFlyoutSeparator/>
                    <MenuFlyoutItem Text="Exit" Click="ExitClicked" />
                </MenuFlyout>
            </Button.Flyout>
        </Button>

        <Button x:Name="EditButton" Content="Edit" Click="MenuButtonClicked" Padding="3,1"  Background="Azure">
            <Button.Flyout>
                <MenuFlyout Placement="Bottom">
                    <MenuFlyoutItem Text="Undo" Click="UndoClicked" />
                    <MenuFlyoutSeparator/>
                    <MenuFlyoutItem Text="Cut" Click="CutClicked" />
                    <MenuFlyoutItem Text="Copy" Click="CopyClicked" />
                    <MenuFlyoutItem Text="Paste" Click="PasteClicked" />
                    <MenuFlyoutItem Text="Clear" Click="ClearClicked" />
                    <MenuFlyoutSeparator/>
                    <MenuFlyoutItem Text="Date/Time" Click="DateTimeClicked" />
                    <MenuFlyoutItem Text="Select All" Click="SelectAllClicked" />
                </MenuFlyout>
            </Button.Flyout>
        </Button>

        <Button x:Name="FormatButton" Content="Format" Click="MenuButtonClicked" Padding="3,1"  Background="Azure">
            <Button.Flyout>
                <MenuFlyout Placement="Bottom">
                    <ToggleMenuFlyoutItem Text="Word Warp" Click="WordWrapToggled" IsChecked="True"/>
                </MenuFlyout>
            </Button.Flyout>
        </Button>

        <Button x:Name="HelpButton" Content="Help" Click="MenuButtonClicked" Padding="3,1" Background="Azure">
            <Button.Flyout>
                <MenuFlyout Placement="Bottom">
                    <MenuFlyoutItem Text="About" Click="AboutClicked" />
                </MenuFlyout>
            </Button.Flyout>
        </Button>
    </StackPanel>

    <RichEditBox x:Name="MainTextBox"

        FontFamily="Consolas" 
        FontSize="14" 
        Grid.Row="1"
        VerticalAlignment="Stretch"
        HorizontalAlignment="Stretch"

        IsSpellCheckEnabled="False" 
        BorderThickness="1" 
        TabIndex="0"

        ScrollViewer.IsVerticalRailEnabled="True"
        ScrollViewer.VerticalScrollMode="Auto"
        ScrollViewer.IsHorizontalRailEnabled="True"
        ScrollViewer.HorizontalScrollMode="Auto"

        KeyDown="TabKeyDown"
        Paste="ContentPasted"  />

</Grid>

Does anyone know how to make this behave the way I want it to?

I'm grateful for any help that anyone can give.

Romasz
  • 29,662
  • 13
  • 79
  • 154
  • That's a good one, seems to be unique to RichEditBox, may be a bug. +1 – Chris W. Mar 15 '17 at 04:25
  • Hmm.. Chris, if that were the case is there some place I could submit it as a potential bug? I haven't been able to find any other projects out there yet that use a RichEditBox in such a simplified way to compare my code to or to see if they get the same behavior.. – Producer999 Mar 15 '17 at 12:05
  • Ya it would be [MS Connect](http://connect.microsoft.com) but I'm not sure exactly where you would plop it. If I can find time I'll dig in to it later and see if we can't find the culprit or at least a workaround. I tried a couple of my normal go-to workarounds for things like that with no luck but admittedly I didn't get a lot of time with it. I was hoping one of the MS folks here would chime in and teach us something new. There's some pretty sharp people on here that might see it also still. – Chris W. Mar 15 '17 at 15:12
  • Thanks for your help. If you get a chance to look at it that would be awesome, if not then I'll just keep looking and wait to see if anyone else knows what's going on. – Producer999 Mar 17 '17 at 02:00

0 Answers0