Увеличение высоты текстового поля в Windows Store XAML

Question

Увеличение высоты текстового поля в Windows Store XAML

1

Для справки, я как бы пытаюсь воссоздать способ отображения мгновенных сообщений Skype. Имя отправителя слева (выравнивание влево/вправо) и текст сообщения справа. Текст справа должен быть зафиксирован, но динамически расширяться вертикально, чтобы отобразить все сообщение.

Я показываю эти сообщения в ListView. Он выглядит больше или меньше, чем я хочу, но я не могу заставить элемент управления TextBox расширяться вертикально. Он либо потребляет одну строку шириной 100%, а текст уходит с правого края или расширяется вертикально, одновременно уменьшая ширину до некоторого значения (я не могу понять, откуда это значение).

Вот что у меня сейчас. Я также пробовал вложенные StackPanels.

<ListView 
    x:Name="MessagesListView"
    ItemsSource="{Binding Messages}"
    TabIndex="1"
    Padding="116,46"
    Margin="0,0,0,46"
    VerticalContentAlignment="Stretch"
    SelectionMode="None"
    IsItemClickEnabled="false"
    IsSwipeEnabled="false">
    <ListView.ItemTemplate>
         <DataTemplate>
             <Grid>
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="200" />
                     <ColumnDefinition Width="*" />
                 </Grid.ColumnDefinitions>
                 <TextBlock 
                     Grid.Column="0"
                     Text="{Binding ContactDisplayName}" 
                     Margin="0,0,20,0" 
                     TextWrapping="WrapWholeWords" />
                 <StackPanel Grid.Column="1" Orientation="Vertical">
                     <TextBox Text="{Binding MessageText}" IsReadOnly="true" />
                     <TextBlock Text="{Binding TimestampDisplayText}" TextWrapping="Wrap" />
                 </StackPanel>
             </Grid>
         </DataTemplate>
     </ListView.ItemTemplate>
 </ListView>

Кто-нибудь знает, как заставить это работать?

Обновление 1

Вот скриншот того, как он выглядит в настоящее время.

Обновление 2

Хорошо, я приближаюсь.

Во-первых, я понял, что мне не хватает директивы TextWrap = "Wrap" в элементе управления TextBox. К сожалению, установка, которая привела к этому:

Вдохновленный комментариями Юлиама и Криса, я попытался установить конкретные ширины и высоты с разными уровнями успеха. Ближайший я получил, чтобы получить то, что я хочу, установив свойство MinWidth текстового поля на 500. Это дает следующее:

Это намного ближе к тому, что я хочу. Но я до сих пор не смог заставить TextBox расширяться горизонтально, чтобы заполнить столбец сетки. Я пробовал явно указывать HorizontalAlignment и HorizontalContentAlignment, но никаких изменений.

Кажется, TextBox действительно хочет динамически расширяться в ОДНОМ направлении. Вы либо получаете горизонтальное, либо вертикальное расширение, но не оба.

Bryan Slatner 24 июль 2014, в 21:13

Источник

0

Вы хотите, чтобы каждое ContactDisplayName в каждом элементе / строке пропорционально заполняло доступное пространство ListView ? скриншот вашей проблемы был бы великолепен ..
Yuliam Chandra 24 июль 2014, в 18:48
0

То, что вы ищете, поможет визуализировать то, чего вы хотите достичь.
Chris W. 24 июль 2014, в 19:01
0

Спасибо, парни. Я добавил скриншот того, как это выглядит. В основном это нормально, но я хочу, чтобы текстовое поле с lorem ipsum расширилось настолько, чтобы отобразить все содержимое.
Bryan Slatner 24 июль 2014, в 19:07
0

Попробуйте установить Grid's Height как 100 и проверьте, может ли она расширяться по вертикали.
Yuliam Chandra 24 июль 2014, в 19:22
0

Если я установлю высоту сетки на 100, то элементы списка растут, но TextBox остается той же высоты. Похоже, это slatner.com/quick/screenshot2.png
Bryan Slatner 24 июль 2014, в 19:43
1

У меня сейчас несколько злой хак, который перехватывает событие SizeChanged TextBox, которое, в свою очередь, устанавливает свойство MinWidth, равное ActualWidth ListView, минус отступ и минус ширина другого столбца сетки. Это работает, хотя при первой загрузке происходит довольно некрасивая вспышка.
Bryan Slatner 25 июль 2014, в 16:43
0

@BryanSlatner, я понятия не имею, возможно, как вы сказали, не может динамически расширять оба направления ..
Yuliam Chandra 25 июль 2014, в 17:02

Показать ещё 5 комментариев

Теги:

c#

xaml

windows-store-apps

1 ответ

Ещё вопросы

Вы хотите, чтобы каждое ContactDisplayName в каждом элементе / строке пропорционально заполняло доступное пространство ListView ? скриншот вашей проблемы был бы великолепен ..
То, что вы ищете, поможет визуализировать то, чего вы хотите достичь.
Спасибо, парни. Я добавил скриншот того, как это выглядит. В основном это нормально, но я хочу, чтобы текстовое поле с lorem ipsum расширилось настолько, чтобы отобразить все содержимое.
Попробуйте установить Grid's Height как 100 и проверьте, может ли она расширяться по вертикали.
Если я установлю высоту сетки на 100, то элементы списка растут, но TextBox остается той же высоты. Похоже, это slatner.com/quick/screenshot2.png
У меня сейчас несколько злой хак, который перехватывает событие SizeChanged TextBox, которое, в свою очередь, устанавливает свойство MinWidth, равное ActualWidth ListView, минус отступ и минус ширина другого столбца сетки. Это работает, хотя при первой загрузке происходит довольно некрасивая вспышка.
@BryanSlatner, я понятия не имею, возможно, как вы сказали, не может динамически расширять оба направления ..

Yuliam Chandra · Answer 1 · 2014-07-24T19-37-00.000Z

После установки Grid Height или MinHeight на определенную высоту (ex 100).

Изменить этот код

<StackPanel Grid.Column="1" Orientation="Vertical">
    <TextBox Text="{Binding MessageText}" IsReadOnly="true" />
    <TextBlock Text="{Binding TimestampDisplayText}" TextWrapping="Wrap" />
</StackPanel>

в

<Grid Grid.Column="1">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TextBox Grid.Row="0" Text="{Binding MessageText}" IsReadOnly="true" />
    <TextBlock Grid.Row="1" Text="{Binding TimestampDisplayText}" TextWrapping="Wrap" />
</Grid>

Спасибо за ответ. Я попробовал это, но это выглядело в основном так же. Смотрите обновления на оригинальный вопрос.
@BryanSlatner, не могли бы вы обновить картинку, какое место вы хотите удалить? расстояние между красной линией здесь ?
Нет, я не хочу убирать это место. Я хочу, чтобы поле справа расширялось по горизонтали, чтобы заполнить всю доступную ширину. Когда это правильно, это выглядит так: slatner.com/quick/screenshot5.png Обратите внимание, как 3 серых прямоугольника расширились достаточно вертикально, чтобы вместить завернутый текст.