Первый элемент в элементе списка перекрывает второй элемент

Question

У меня есть Listbox, и каждый элемент списка содержит DockPanel с двумя элементами TextBlock и Label. Ниже приводится код XAML -

 <ListBox HorizontalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled"> 
      <ListBoxItem> 
      <DockPanel> 
       <TextBlock Text="Ted its so wonderfull I am gere asdf asdf asdf adsf asdf asdf asdfasf asfd asf asdf asdf asdf asdf asdasfd asf " TextWrapping="Wrap"></TextBlock> 
       <Label Content="Click Me" HorizontalAlignment="Right"></Label> 
      </DockPanel>     
     </ListBoxItem> 

     <ListBoxItem> 
      <DockPanel> 
       <TextBlock Text="Ted its so wonderfull Ted its so wonderfull I am gere asdf asdf asdf adsf asdf asdf asdfasf asfd asf asdf asdf asdf asdf asdasfd asf" TextWrapping="Wrap"></TextBlock> 
       <Label Content="Click Me" HorizontalAlignment="Right"></Label> 
      </DockPanel> 
     </ListBoxItem> 
    </ListBox> 

Так что я ожидал окно, в котором каждая строка будет иметь два элемента первого coloumn является текстовый блок, а следующий один ярлык. Я добавил HorizonatalContentAlignment = stretch и HorizontalAlignment = Right для меток, когда пользователь изменяет размер окна, этикетка должна идти в правый конец.

Но проблема, с которой я столкнулся с указанным выше кодом, - это когда я изменяю размер окна и когда текстовый блок начинает обертываться, Textblock скрывает/перекрывает элемент Label. В каком-то случае метка полностью скрыта, когда слово в текстовом блоке идеально выравнивается с правым концом окна или частично скрыто?

Почему второй элемент становится перекрывающимся или скрытым? Я хочу показать клик по имени всегда, как это сделать?

Answer 1

Вы можете использовать Grid. В первом столбце используется все свободное пространство, где второй столбец резервирует место для метки «click».

 <ListBoxItem> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*"></ColumnDefinition> 
        <ColumnDefinition Width="Auto"></ColumnDefinition> 
       </Grid.ColumnDefinitions> 
       <TextBlock Text="Ted its so wonderfull I am gere asdf asdf asdf adsf asdf asdf asdfasf asfd asf asdf asdf asdf asdf asdasfd asf " TextWrapping="Wrap"></TextBlock> 
       <Label Grid.Column="1" Content="Click Me" HorizontalAlignment="Right"></Label> 
      </Grid> 
     </ListBoxItem> 

Изображение ниже показывает сетку по сравнению с приближением док-станции.

Answer 2

Просто, чтобы указать на то, что в других сценариях как неизвестное количество элементов быть добавлены к ListBoxItem содержанию, например, с помощью DockPanel не так уж плохо.

Пример:

• Первый пункт в ListBox, я хочу Text и Label.
• Secund item, I want a Text, a Labelи a Button.
• и так далее ...

С Grid, он не будет работать, если вы не добавите много вещей (либо с помощью ContentTemplate и привязок или даже код позади) и вот где DockPanel является полезным.

Что плохого в вашем подходе является то, что вы разместили TextBlockперед темLabel. В DockPanel порядок вещей и первый элемент имеют приоритет над secund, secund над третьим ... и если предыдущий элемент занял все оставшееся пространство (которое ваш TextBlock сделал с его очень длинным значением Text), то любой другой следующий элемент не будет нарисовано так, как ожидалось.

И не забудьте указать режим Docking.

Итак, для уточнения, нет ничего плохого в использовании DockPanel здесь, но порядок вещей имеет значение.

<ListBox HorizontalContentAlignment="Stretch" 
    ScrollViewer.HorizontalScrollBarVisibility="Disabled"> 
    <ListBoxItem> 
     <DockPanel> 
      <!-- Declare your Label first and dock it to the right --> 
      <Label 
       DockPanel.Dock="Right" /> 
      <TextBlock 
       Text="Ted its so wonderfull I am gere asdf asdf asdf adsf asdf asdf asdfasf asfd asf asdf asdf asdf asdf asdasfd asf " TextWrapping="Wrap" /> 
     </DockPanel>     
    </ListBoxItem> 

    <!-- ... --> 

</ListBox> 

Некоторые UIElements, как этикетка не (на самом деле) требуют HorizontalAlignment, когда они Left/Right стыковка внутри DockPanel. В этом случае толькоVerticalAlignment вопросов.

Правила:

• Помните, что DockPanel выделяет прямоугольную области для каждого элемента.
• Элементы получают эту выделенную область под заказ.
• DockPanel по умолчанию устанавливает стыковку влево.
• DockPanel лучше работает со списком элементов, занимающих небольшую площадь, что объявлен первого и пристыкован соответственно, то есть последнего элементом переменного размера, который будет заполнить оставшееся пространство, если доступно.
• DockPanel всегда будет пытаться показать хотя бы небольшую часть каждого элемента, когда доступная область недостаточно широка (так что аккуратно добавьте ограничения, если хотите, чтобы элемент оставался полностью видимым, например, положить DockPanel внутри a Grid Column или ряд;))

в конце концов, это ответ, который объясняет, почему этикетка перекрывается TextBlock - для других читателей, желающих освоить DockPanel.

Но да, когда я уже знаю, сколько элементов я буду иметь в контейнере, я буду использовать Grid, 99% времени, потому что я могу связать ряд и столбцов размер непосредственно, в то время как с DockPanel, StackPanel и т. д., I должен будет ссылаться на каждый содержащийся элемент один за другим.

Я согласен с принятым ответом :)