none
TextBlock Wrapping in ListBoxItem RRS feed

  • Question

  • I'm running into an interesting layout problem.

    Often, when using adjustable ("auto") layouts, sizing is determined by cascading up from a child that has a fixed size or by cascading down from a parent that has a fixed size.

    I'm using the second scenario. I have a ListBox, and I want the items to be sized based on a fixed parent. The parent can be resized by the user.

    I'm using ListBox.HorizontalContentAlignment="Stretch" on the ListBox to cause the items to fill the ListBox. In my DataTemplate, I'm using a TextBlock to display the item content.

    Now here's the trick. If the ListBox has a smaller width than the items require (up to a minimum) I would like the TextBlock to wrap the text instead of creating a ListBox item that is larger than the ListBox. I'm using ScrollViewer.HorizontalScrollBarVisibility="Hidden" to try to force the items to shrink to fit. Instead, the items are still bigger than the ListBox and are being drawn off of the control. How can I force these TextBlocks to wrap the text? I tried overriding TextBlock so that I could adjust MeasureOverride and ArrangeOverride, but these functions are sealed for TextBlock (very frustrating... they are trying to protect me from myself so I can't do anything).

    Here's an example in XAML that shows the scenario:

        <Grid> 
            <Grid.Resources> 
                <DataTemplate x:Key="EventTemplate" DataType="{x:Type System:String}"
                    <Border CornerRadius="5" BorderThickness="1" BorderBrush="Gray" Margin="2"
                        <Border.Background> 
                            <SolidColorBrush Color="#88DDDDEE"/> 
                        </Border.Background> 
                        <Grid MinHeight="40"
                            <Grid.ColumnDefinitions> 
                                <ColumnDefinition Width="Auto"/> 
                                <ColumnDefinition Width="*" /> 
                                <ColumnDefinition Width="Auto"/> 
                            </Grid.ColumnDefinitions> 
                            <Rectangle Fill="Yellow" Width="20" Height="20" Margin="6" VerticalAlignment="Center"/> 
                            <TextBlock Grid.Column="1" Text="{Binding}" Margin="3" VerticalAlignment="Center" TextWrapping="Wrap" ScrollViewer.CanContentScroll="False"/> 
                            <CheckBox x:Name="CheckClear" Grid.Column="2" VerticalAlignment="Center" Margin="6"/> 
                        </Grid> 
                    </Border> 
                </DataTemplate> 
            </Grid.Resources> 
            <Grid.ColumnDefinitions> 
                <ColumnDefinition Width="Auto"/> 
                <ColumnDefinition Width="Auto"/> 
            </Grid.ColumnDefinitions> 
            <Grid.RowDefinitions> 
                <RowDefinition Height="Auto"/> 
                <RowDefinition Height="Auto"/> 
            </Grid.RowDefinitions> 
            <Slider x:Name="HorizontalAdjust" Grid.Column="1" Width="400" Maximum="400" Value="200"/> 
            <Slider x:Name="VerticalAdjust" Grid.Row="1" Orientation="Vertical" IsDirectionReversed="True" Height="400" Maximum="400" Value="200"/> 
            <ListBox x:Name="list" Grid.Row="1" Grid.Column="1" HorizontalContentAlignment="Stretch" 
                     Width="{Binding ElementName=HorizontalAdjust, Path=Value}" Height="{Binding ElementName=VerticalAdjust, Path=Value}"  
                     HorizontalAlignment="Left" VerticalAlignment="Top" ItemTemplate="{DynamicResource EventTemplate}" 
                     ScrollViewer.HorizontalScrollBarVisibility="Hidden"
                <System:String>A really, really long value: Value1</System:String> 
                <System:String>Value2</System:String> 
                <System:String>Value3</System:String> 
                <System:String>Value4</System:String> 
                <System:String>ABCDEFGHIJKLMNOPQRSTUVWXYZ:Value5</System:String> 
            </ListBox> 
        </Grid> 


    Any help would be much appreciated.

    ~J
    Monday, June 30, 2008 12:20 PM

Answers

  • You need to set the horizontal scrollbar to Disabled, not Hidden.
    Controls for WPF and Windows Forms at http://www.divelements.co.uk
    • Marked as answer by Josh_G Monday, June 30, 2008 3:38 PM
    Monday, June 30, 2008 3:29 PM

All replies

  • You need to set the horizontal scrollbar to Disabled, not Hidden.
    Controls for WPF and Windows Forms at http://www.divelements.co.uk
    • Marked as answer by Josh_G Monday, June 30, 2008 3:38 PM
    Monday, June 30, 2008 3:29 PM
  • Beautiful. That did it.

    I can't thank you enough.

    I thought "Disabled" would result in a grayed out scrollbar being displayed, so I avoided it.

    ~J
    Monday, June 30, 2008 3:38 PM