CODEWITHSUNDEEP
wpfxaml
ShedSpotter
ShedSpotter

Reputation: 86

XAML ListBox Item Template Column Width

I am trying to make column 2 auto size to the available space but it fails to wrap the TextBlock and exceeds the size of the UserControl.

If I specify a width in the TextBlock the text wraps but I want to fill all available space in column 2. 

<ListBox.ItemTemplate>
    <!--<DataTemplate></DataTemplate>-->
    <ItemContainerTemplate>  
        <Grid HorizontalAlignment="Stretch">
            <Grid.Resources>
                <Style TargetType="TextBlock"  >
                    <Setter Property="Foreground" Value="Yellow" />
                </Style>
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition Height="10"/>
                <RowDefinition/>
                <RowDefinition Height="30"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="90"/>
                <ColumnDefinition Width="10"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="10"/>
                <ColumnDefinition Width="120"/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="{Binding Path=Time}" FontSize="28"/>
            <TextBlock Text="{Binding Path=StationFromToName}" FontSize="28" Grid.Column="2"/>
            <TextBlock Text="{Binding Path=OnTimeStatus}" FontSize="28" Grid.Column="4" HorizontalAlignment="Right" />

            <StackPanel Grid.Row="1" Visibility="{Binding Path=ServiceType, Converter={StaticResource PlatformVisible}}" >
                <TextBlock Text="Platform" FontSize="18" HorizontalAlignment="Center"/>
                <TextBlock Text="{Binding Path=Platform}" FontSize="28" HorizontalAlignment="Center" VerticalAlignment="Top" />
            </StackPanel>

            <StackPanel Grid.Row="1" Visibility="{Binding Path=ServiceType, Converter={StaticResource TrainFerryVisible}}" >
                <TextBlock Text="{Binding Path=ServiceType}" FontSize="18" HorizontalAlignment="Center"/>
                <Image Source="{Binding Path=ServiceType, Converter={StaticResource ServiceType}}" Width="60" Stretch="Fill" />
            </StackPanel>

                <!--VerticalAlignment="Top" Grid.ColumnSpan="3"-->
            <WrapPanel x:Name="ScrollCanvas" Loaded="Feed_ScrollViewer_Loaded" Height="100" ClipToBounds="True" Grid.Row="1" Grid.Column="2" Grid.RowSpan="2" 
                Background="Aqua" >
                    <TextBlock FontSize="18"  TextWrapping="Wrap" TextAlignment="Justify" Background="Red">
                        <!--<TextBlock.Width>
                            <Binding Path="ActualWidth" RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type StackPanel}}" />                                        
                        </TextBlock.Width>-->                                    

                    <Run Text="Calling At:" Foreground="#FFE3E3E3"/>
                    <Run Text="{Binding Path=CallingPoints}"/>
                </TextBlock>
            </WrapPanel>

            <TextBlock Text="Last Report:" FontSize="18" VerticalAlignment="Top" Grid.Row="4" Grid.ColumnSpan="2" Visibility="{Binding Path=DelayedReason, Converter={StaticResource DelayReason}}" />
            <TextBlock Text="{Binding Path=DelayedReason}" Visibility="{Binding Path=DelayedReason, Converter={StaticResource DelayReason}}" Grid.Column="2" FontSize="18" VerticalAlignment="Top" TextWrapping="Wrap" 
             Grid.Row="4" Grid.ColumnSpan="3" TextAlignment="Justify"/>
        </Grid>
    </ItemContainerTemplate> 
</ListBox.ItemTemplate>

Any help would be great please.

Upvotes: 1

Views: 91

Answers (1)

ASh
ASh

Reputation: 35730

first thing is to remove WrapPanel. It can arrange multiple elements with wrapping, but won't help to wrap text in a single TextBlock. Grid.Row="1" Grid.Column="2" Grid.RowSpan="2" goes to TextBlock

<TextBlock FontSize="18" TextWrapping="Wrap" TextAlignment="Justify" 
           Grid.Row="1" Grid.Column="2" Grid.RowSpan="2"
           Background="Red">                              

    <Run Text="Calling At:" Foreground="#FFE3E3E3"/>
    <Run Text="{Binding Path=CallingPoints}"/>
</TextBlock>

Wrapping works poorly when TextBlock can grow without restriction so instead of <ColumnDefinition Width="Auto"/> make it <ColumnDefinition Width="*"/>

and the final touch is to set ScrollViewer.HorizontalScrollBarVisibility="Disabled" on ListBox to restrict width of Grid. Otherwise it can grow without restriction inside inner ScrollViewer and wrapping doesn't occur.

Upvotes: 1

Related Questions