XAML 列表框项模板列宽

Question

我正在尝试将第 2 列自动调整为可用空间，但它无法包装 TextBlock 并且超出了 UserControl 的大小。

如果我在 TextBlock 中指定宽度，文本会换行，但我想填充第 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>

请提供任何帮助。

Answer 1

首先要移除 WrapPanel。它可以通过换行排列多个元素，但无助于将文本换行在单个 TextBlock 中。 Grid.Row="1" Grid.Column="2" Grid.RowSpan="2" 转到文本块

<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>

当 TextBlock 可以不受限制地增长时，包装效果不佳，因此将 <ColumnDefinition Width="Auto"/> 改为 <ColumnDefinition Width="*"/>

最后一步是在 ListBox 上设置ScrollViewer.HorizontalScrollBarVisibility="Disabled" 以限制Grid 的宽度。否则它可以在内部 ScrollViewer 内不受限制地增长，并且不会发生包装。