Обтекание текста в цепочке элементов управления - PullRequest
Новая
       13

Обтекание текста в цепочке элементов управления

1 голос
/ 10 февраля 2012

Вот изображение того, чего я пытаюсь достичь в столбце вида сетки:

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>

Таким образом, вопрос заключается в следующем: как я могу обеспечить, чтобы (а) текстовый блок переносился в соответствии с изменениями ширины столбца, и (б) закрывающий символ двойной кавычки никогда не вырезался?

UPDATE

Есть одна ключевая вещь, которую я должен был включить: закрывающая двойная кавычка должна находиться на одном уровне с правым краем TextBlock. Недопустимо постоянно выравнивать изображение цитаты по правому краю столбца.

Ответы [ 2 ]

2 голосов
/ 11 февраля 2012

Измените порядок добавления элементов в 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 займет все оставшееся пространство

Вы также можете использовать Grid как предложенный Клеменс , хотя я предпочитаю использовать DockPanel, потому что я ненавижу писать определения столбцов:)

2 голосов
/ 10 февраля 2012

Вы можете заменить DockPanel на Grid с 3 столбцами в StackPanel: 

<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" гарантирует, что первый и третий столбцы будут иметь ширину содержащегося элемента, средний столбецполучит остаток от общей ширины.

...