Question

这是我在网格视图列中尝试实现的图像：

Screenshot 1

文本按预期包装，并且正确显示结束双引号图像。但如果我逐渐减少列宽，我会得到这个：

Screenshot 2

注意关闭双引号图像的方式。

我正在使用的XAML的本质如下所示，尽管它只是一组同样不充分尝试的最新变体。

<DockPanel LastChildFill="False" MinWidth="50">
        <ContentControl 
            Content="{StaticResource DoubleQuotesOpenImage}" 
            VerticalAlignment="Top"
            MinWidth="16"
            DockPanel.Dock="Left" />
        <TextBlock 
            FontSize="13" 
            TextWrapping="Wrap" 
            Text="{Binding TextRepresentation}" 
            VerticalAlignment="Center"
            DockPanel.Dock="Left" />
        <ContentControl 
            Content="{StaticResource DoubleQuotesCloseImage}" 
            MinWidth="16"
            VerticalAlignment="Bottom"
            HorizontalAlignment="Left"
            DockPanel.Dock="Left" />
    </DockPanel>

所以问题是：我怎样才能确保（a）文本块根据列宽变化进行包装，以及（b）结束双引号符号是否永远不会被剪裁？

更新

我应该包括一个关键因素：结束双引号应该与TextBlock的右边缘齐平。使报价图像与列的右边缘永久对齐是不可接受的。

Answer 1

您可以使用StackPanel中包含3列的Grid替换DockPanel：

<Grid HorizontalAlignment="Left">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <ContentControl  
        Content="{StaticResource DoubleQuotesOpenImage}"  
        VerticalAlignment="Top" 
        Grid.Column="0" /> 
    <TextBlock  
        FontSize="13"  
        TextWrapping="Wrap"  
        Text="{Binding TextRepresentation}"  
        Grid.Column="1" /> 
    <ContentControl  
        Content="{StaticResource DoubleQuotesCloseImage}"  
        VerticalAlignment="Bottom" 
        Grid.Column="2" /> 
</Grid>

Width="Auto"设置确保第一列和第三列具有所包含元素的宽度，中间列将获得总宽度的其余部分。

Answer 2

撤消向DockPanel添加项目的顺序，以便添加的最后一项是TextBlock。然后移除LastChildFill媒体资源，并将结束语的DockPanel.Dock设为Right

<StackPanel>
    <DockPanel MinWidth="50">
        <ContentControl 
            Content="{StaticResource DoubleQuotesOpenImage}" 
            VerticalAlignment="Top"
            MinWidth="16"
            DockPanel.Dock="Left" />

        <ContentControl 
            Content="{StaticResource DoubleQuotesCloseImage}" 
            MinWidth="16"
            VerticalAlignment="Bottom"
            HorizontalAlignment="Left"
            DockPanel.Dock="Right" />

        <TextBlock 
            FontSize="13" 
            TextWrapping="Wrap" 
            Text="{Binding TextRepresentation}" 
            VerticalAlignment="Center"
            DockPanel.Dock="Left" />
    </DockPanel>
</StackPanel>

这会使报价首先定位，然后Text会占用所有剩余空间

你也可以使用像Clemens' suggested这样的Grid，虽然我以前更喜欢使用DockPanel，因为我讨厌编写列定义：）

在一系列控件中包装文本

2 个答案: