Красиво обернуть текст в горизонтальную панель стека или панель обертывания?

Я видел несколько других сообщений об этом, но не видел ничего, что решило бы мою проблему. По сути, мне нужно, чтобы какой-то текст (жирный и нежирный) был красиво заключен в Stackpanel или Wrappanel. Вот визуальный ряд:

введите здесь описание изображения

Мне нужна комбинация двух TextBlocks, которые вы видите. У меня есть первый полужирный TextBlock, который содержит «Заголовок:», а затем в той же строке мне нужен следующий TextBlock, который может переноситься или не переноситься. Если он переносится, мне нужно, чтобы верхняя строка оставалась на верхней строке, а затем переносилась, как если бы все это было одним TextBlock. Вот сделанный в Paint рисунок того, что мне нужно:

введите здесь описание изображения

Вот мой код, который у меня есть до сих пор:

<toolkit:WrapPanel Orientation="Horizontal">
   <TextBlock Text="Title: " FontWeight="Bold"/>
   <TextBlock TextWrapping="Wrap" Text="More text goes here " />
</toolkit:WrapPanel>

<toolkit:WrapPanel Orientation="Horizontal">
   <TextBlock Text="Title: " FontWeight="Bold"/>
   <TextBlock TextWrapping="Wrap" Text="More text goes here and I want it to wrap lines and go underneath the title but I can't get it to to do that. :( " />
</toolkit:WrapPanel>

Теперь я не против того, чтобы это было сделано в one TextBlock (если это возможно). Я знаю, что с помощью TextBlock.Inlines я могу добавить Run полужирного текста, а затем еще один обычного текста. Проблема в том, что Inlines нельзя связать с помощью MVVM (которую я не использую в этой демонстрации, но будет использоваться в окончательном коде).

Итак, каким бы ни было решение, мне нужно иметь возможность устанавливать значения TextBlocks из кода программной части, чтобы я знал, что это можно сделать с помощью MVVM.

Кто-нибудь знает способ добиться этого?


xaml word-wrap stackpanel wrappanel windows-phone-8
person lhan    schedule 05.02.2014    source источник
comment
Итак, вы хотите привязаться к одному источнику текста, и часть этого текста может быть выделена жирным шрифтом?   -  person Peter Ritchie    schedule 05.02.2014
comment
Потенциально, да. Мне нужно, чтобы заголовок был жирным, а остальные нет. Если бы это было проще, заголовки могли бы быть в отдельных текстовых блоках.   -  person lhan    schedule 05.02.2014
comment
Я бы рекомендовал использовать Run там, где это возможно.   -  person Peter Ritchie    schedule 05.02.2014

Ответы (4)


arrow_upward
3
arrow_downward

Используйте элемент управления RichTextBox с различным запуском для каждого стиля шрифта.

<RichTextBox>
    <Paragraph>
        <Run FontWeight="Bold">Title:</Run>
        <Run>More text goes here and I want it to wrap lines and go underneath the title but I can't get it to to do that. :(</Run>
    </Paragraph>
</RichTextBox>

Вы можете привязать свойство Text элементов Run к вашему контексту данных, например:

    <RichTextBox>
        <Paragraph>
            <Run FontWeight="Bold"
                 Text="{Binding Header}"></Run>
            <Run Text="{Binding Text}"></Run>
        </Paragraph>
    </RichTextBox>
person siger    schedule 05.02.2014
comment
Это работает отлично. Раньше мне пришло в голову, что RichTextBox в Silverlight — это настоящее текстовое поле, в которое пользователи могут вводить текст, и на секунду я подумал, что это не сработает. Я не знал, что Windows Phone RichTextBox больше похож на TextBlock, чем на TextBox. Спасибо еще раз! - person lhan; 06.02.2014

arrow_upward
0
arrow_downward

Fix Width Property обоих StackPanel. это может помочь вам. Проблема в том, что если вы не установите свойство Width, оно будет считаться автоматической шириной.

<StackPanel Orientation="Horizontal" Width="400">
   <TextBlock Text="Title: " FontWeight="Bold"/>
   <TextBlock TextWrapping="Wrap" Text="More text goes here " />
</StackPanel >

<StackPanel  Orientation="Horizontal" Width="400">
   <TextBlock Text="Title: " FontWeight="Bold"/>
   <TextBlock TextWrapping="Wrap" Text="More text goes here and I want it to wrap lines and go underneath the title but I can't get it to to do that. :( " />
</StackPanel >
person Jaihind    schedule 05.02.2014
comment
Спасибо. Кажется, я пробовал что-то вроде этого, привязывая Width StackPanel к ActualWidth его родителя. Если я правильно помню, это почти работало, но когда текст переносился, текст из второго TextBlock не попадал прямо под текст из первого. Я попробую это снова сегодня вечером, хотя. Спасибо! - person lhan; 05.02.2014

arrow_upward
0
arrow_downward

Это будет полезно для вас:

<toolkit:WrapPanel Orientation="Horizontal">
   <TextBlock>       
       <Run FontWeight="Bold" Text="{Binding Header}"></Run>     
        <Run Text="{Binding Text}"></Run>    
    </TextBlock>
</toolkit:WrapPanel>
person Pradeep Kesharwani    schedule 05.02.2014
comment
Вы проверяли это? Насколько я знаю, Run должен находиться внутри контейнера <TextBlock.Inlines> (я полагаю, вы имели в виду TextBlock, а не TextBox), и, как я упоминал в своем посте, Inlines из TextBlock не может быть связан с MVVM. - person lhan; 05.02.2014

arrow_upward
0
arrow_downward

Вы пробовали использовать такую ​​конструкцию?

<TextBlock>
    <TextBlock.Inlines>
        <Bold>
            <Bold.Inlines>
                <Run Text="Title: "/>
            </Bold.Inlines>
        </Bold>
        <Run Text="{Binding Text}"/>
    </TextBlock.Inlines>
</TextBlock>

Это работает как шарм, если текстовый блок должен быть привязан только к одному блоку текста.

person std.denis    schedule 10.07.2014