Question

此网格的高度是可调整的，我需要能够截断一个文本的状态，同时保留状态三始终可见的状态，状态二总是直接显示在状态一下面。我尝试通过将状态2的VerticalAlignment设置为top而没有运气来实现此目的。

例如，当您将78的高度更改为178时，请注意，状态2不再位于状态1旁边。

<Grid Height="78"
      Width="167">

<Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<Border x:Name="_itemBorder"
        Grid.RowSpan="3"
        Background="LightBlue" />

<TextBlock x:Name="_statusOneTextBlock"
           Grid.Row="0"
           Margin="5"
           Text="STATUS 1 Very long status one text"
           TextWrapping="Wrap"
           TextTrimming="CharacterEllipsis" />

<TextBlock x:Name="_statusTwoTextBlock"
           Grid.Row="1"
           Margin="5"
           Text="STATUS 2"
           VerticalAlignment="Top"
           TextTrimming="CharacterEllipsis" />

<TextBlock x:Name="_statusThreeTextBlock"
           Grid.Row="3"
           Margin="5"
           Text="STATUS 3"
           VerticalAlignment="Bottom"
           TextTrimming="CharacterEllipsis" />
</Grid>

Answer 1

<Grid Height="178" 
  Width="167">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />

    </Grid.RowDefinitions>

    <Border x:Name="_itemBorder" 
    Grid.RowSpan="3" 
    Background="LightBlue" />

    <TextBlock x:Name="_statusOneTextBlock" 
       Grid.Row="0" 
       Margin="5" 
       Text="STATUS 1 Very long status one text" 
       TextWrapping="NoWrap" 
       TextTrimming="CharacterEllipsis" />

    <TextBlock x:Name="_statusTwoTextBlock" 
       Grid.Row="1" 
       Margin="5" 
       Text="STATUS 2" 
       VerticalAlignment="Top" 
       TextTrimming="CharacterEllipsis" />

    <TextBlock x:Name="_statusThreeTextBlock" 
       Grid.Row="2" 
       Margin="5" 
       Text="STATUS 3" 
       VerticalAlignment="Bottom" 
       TextTrimming="CharacterEllipsis" />
</Grid>

Answer 2

使用TextBlock中的InlineUIContainer进行修复：

<Grid Height="68"
      Width="167">

<Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="23" />
</Grid.RowDefinitions>

<Border x:Name="_itemBorder"
        Grid.RowSpan="2"
        Background="LightBlue" />

<TextBlock Grid.Row="0">
<TextBlock x:Name="_statusOneTextBlock"
           Text="STATUS 1 Very long status one text"
           TextWrapping="Wrap"
           TextTrimming="CharacterEllipsis" />
<LineBreak />
<InlineUIContainer>
    <TextBlock x:Name="_statusTwoTextBlock"
               Text="STATUS 2"
               VerticalAlignment="Top"
               TextTrimming="CharacterEllipsis" />
</InlineUIContainer>
</TextBlock>

<TextBlock x:Name="_statusThreeTextBlock"
           Grid.Row="1"
           Text="STATUS 3"
           VerticalAlignment="Bottom"
           TextTrimming="CharacterEllipsis" />
</Grid>

具有动态高度的网格中的文本截断

2 个答案: