none
TextBox TextWrap in dynamic column : SizeChanged order backwards?

    Question

  • I'm trying to find a workaround to this known issue ..

    I've got a TextBox with TextWrapping OFF inside a Grid Column with a dynamic (*) width, and the textBox's scrollbar properties are set to auto.

    When the user types into the textbox and the length exceeds the available area to display the text, rather than the textbox scrollbars showing, it will grow the size of the textbox and then grow the size of the column.

    In my scenario, the grid is nested inside a ScrollViewer (along with a number of other controls). So, when the column grows, the outer container's scrollbars show up -- even though it's not needed (the scrollbars).

    The desire is to have the textbox's column *-size to the available real estate, and then have the textbox honor that size, and if the width of the textbox is still not enough to contain the text, show te textbox's scrollbar.

    I'm trying to workaround this by hooking into the size changed events of all these players (outer scrollviewer, grid containing all the controls, grid containing the textbox with the dynamic col size, and the textbox) ...

    The problem is that these events seem to fire in reverse order. If I'm typing in the textbox and I'm right at the point of making the scrollbars show, instead the topmost control (the grid inside the outer scrollviewer) sizeChanged's event is raised first, then all the way down the stack.

    I would expect that if the TextBox is forcing the parent controls to resize .. that the TextBox SizeChanged event would be raised first. I was going to use this event to set a bit to un-grow the textbox when the growing is the result of the text changing. This order is important because if the user resizes the window, and this causes the outer controls to grow, I want the TextBox to grow with it ..

    What am i missing? This is super infuriating.

    Tuesday, February 21, 2012 6:33 PM

All replies

  • Hi!

    Try combine maximum height and width, minimum height and width to your textBox control and other related control.

    You need several tries.

    Have fun

    Tuesday, February 21, 2012 9:07 PM
  • Hi JoeBrockhaus,

    In my scenario, the grid is nested inside a ScrollViewer (along with a number of other controls). So, when the column grows, the outer container's scrollbars show up -- even though it's not needed (the scrollbars).

    I downloaded your project from this post.

    But i cannot reproduce this issue you described above.

    What i observe is that when shorten the Text of TextBox when all Text can be shown on the screen, there is no HorizontalScrollBar. As i typing more text and not be able to see them all, the HorizontalScrollBar shows.

    Is this the expected result?

    Please feel free to correct me if i misunderstood your question.

     

    Best Regards,

    Tuesday, February 28, 2012 3:14 AM
  • the scrollbar that needs to show is the one inside the textbox, not the outer scrollviewer's scrollbar.

    the way it currently works, if you start typing in that textbox, the textbox will grow infinitely, pushing the right-hand side under the gridsplitter on the right. 
    -- perhaps it would be easier to convey what I'm trying to do by getting the textbox to wrap the text. this scenario also doesn't work for the same reason: the textbox will grow infinitely off to the right and never wrap the text.

    In the 'real' application there are also a couple labels under the textbox, whose text can be anywhere from 10-50 characters long. and in the lower panel there are a number of controls which can grow even wider, depending on their content. this is why the scrollbars in the outer left pane need to exist.

    The above is crucial for small resolution / large browser zoom scenarios. 

    conversely, for large-resolution screens, I want the controls to scale outwardly as well. So if the user has enough screen real estate, the textbox (and all those other labels) will grow with the available space.
     

    The crux of the issue:
    -- If you remove the text from the textbox, and THEN start playing around with the size of the window, you'll see the textbox grows and shrinks as it should. If you set the MinWidth on the lower left panel to something like 600px, you'll see the textbox grows out to the available width, and the outer scrollbars are shown, until you grow the window big enough to grow both the lower left panel and the textbox. 

    My original thought was to try and keep the textbox from changing size unless the reason it's growing is because the window is getting bigger/smaller. (aka, the outer scrollviewer is changing size). But the order the events are fired pretty much prevent me from doing that: When the text being entered into the textbox forces everything to grow .. the first SizeChanged event is the grid just inside the outer scrollviewer, NOT the textbox. This was rather confusing because I'd figure that for the parent elements to change size, the child would have to first. I haven't tried to roll my own textbox, but I'm not convinced that would help?

    I've seen in other posts that maybe upgrading to SL5 (from SL4) would give me the ability to bind the width to the parent? (Can't find where that suggestion was now, or what enabled that..) That's not really an option right away, but it would be interesting to know how to do it that way.

    Tuesday, February 28, 2012 9:25 AM
  • I downloaded your project from this post.

    in that post .. http://social.msdn.microsoft.com/Forums/en-US/silverlightdesigning/thread/33f6329c-9f15-428b-a2a7-77d6baafb23e#33f6329c-9f15-428b-a2a7-77d6baafb23e .. the first screenshot shows what I'd like to happen. I achieved that by statically setting the MaxWidth of the TextBox.

    If you do this and then grow the size of the window, you'll see the problem: the TextBox won't grow with the available space as it should.

    Tuesday, February 28, 2012 9:30 AM
  • Hi JoeBrockhaus,

    the scrollbar that needs to show is the one inside the textbox, not the outer scrollviewer's scrollbar.

    Please try to move ScrollViewer from the outside of Grid to outside TextBox like below

                <!--<ScrollViewer Grid.Column="0"
                          VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">-->
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="150" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <Grid Grid.Column="0" MinWidth="150" Background="LightGray" />
                        <Grid Grid.Column="1" Background="Gray" >
                        <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                            <TextBox Margin="3" MinWidth="200" TextWrapping="Wrap"
                                 HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
                                 Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit dfsdffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffsdf" />
                        </ScrollViewer>
                        </Grid>

                        <Grid Grid.Row ="1" Grid.ColumnSpan="2" />
                    </Grid>

                <!--</ScrollViewer>-->

     

    Best Regards,

    Wednesday, February 29, 2012 12:12 AM
  • move ScrollViewer from the outside of Grid to outside TextBox

    This will not suffice because the outer scrollviewer is still required. For instance if the window is too small, the TextBox will be hidden.

    I'm abandoning this thread and instead carrying this on in the other one, here

    Wednesday, February 29, 2012 10:55 AM