Установите текстовое поле и кнопку в ячейке DataGrid

Question

Я пытаюсь установить Textblock и кнопку в DataGrid Сотовый. Textblock содержит часть моего текста, и когда я нажимаю кнопку, отображается диалог. Я вообще мой код выглядит так, как ниже

<DataGridTemplateColumn Header="Message" Width="Auto" MinWidth="60"> 
    <DataGridTemplateColumn.CellTemplate> 
     <DataTemplate> 
      <StackPanel Orientetion="Horrizontal"> 
       <TextBlock MinWidth="200" TextTrimming="CharacterEllipsis" Text="{Binding Text}" /> 
       <Button DockPanel.Dock="Right" Width="90" Margin="1" /> 
      </StackPanel> 
     </DataTemplate> 
    </DataGridTemplateColumn.CellTemplate> 
</DataGridTemplateColumn> 

Я хочу кнопку, чтобы всегда быть на стороне правее ячейки и ее ширина будет фиксированной. TextBlock должен быть переменным, например, когда я изменяю размер окна, и поэтому должно растягиваться также DataGrid, а также TextBlock.

Проблема заключается в том, что я не могу достигнуть этого поведения/вид. TextBlock изменяется на каждой линии DataGrid, и в некоторых случаях кнопка не находится на истребителе ячейки.

Я попытался изменить StackPanel к Grid или DockPanel, но до сих пор я не могу получить желаемый результат.

Использование Grid

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition MinWidth="100" Width="*" /> 
     <ColumnDefinition Width="Auto" /> 
    </Grid.ColumnDefinitions> 

    <TextBlock Grid.Column="0" TextTrimming="CharacterEllipsis" Text="{Binding Text}" /> 
    <Button Grid.Column="1" Margin="1" /> 
</Grid> 

Любые мысли поделиться?

Answer 1

StackPanel на самом деле не имеет концепции выравнивания вправо. Он складывает элементы как можно ближе. Вы можете обойти эту проблему по-разному, но в этом случае рекомендуется использовать вместо DockPanel:

<DockPanel> 
    <Button DockPanel.Dock="Right" Width="90" Margin="1" /> 
    <TextBlock MinWidth="200" TextTrimming="CharacterEllipsis" Text="{Binding Text}" />  
</DockPanel> 

Обратите внимание, что я переехал TextBlock быть последним дочерним элементом DockPanel. DockPanel, после выделения других дочерних элементов, выделяет оставшееся пространство для последнего дочернего элемента (если вы не укажете LastChildFill=false). В этом случае мы хотим, чтобы TextBlock занял оставшееся пространство.

---

UPDATE: на основании приведенных выше замечаний, в дополнение к изменению типа панели к DockPanel (или Grid), вы можете использовать DataGridTemplateColumn.Width фиксированное значение вместо Auto. Это сделало бы нагрузку столбец с указанным с, но пользователь все еще может изменить столбец с, если они хотят:

<DataGridTemplateColumn Header="Message" Width="60" MinWidth="60"> 

Answer 2

Я бы установить статическое значение в DataGridTemplateColumn.Width --Оно может помочь с рендеринга. Установите размер на ваших кнопках, чтобы он не соответствовал тексту.

Это работает для меня (я использовал границы для целей визуализации):

<Window ... 
     Title="MainWindow" Height="350" Width="525"> 
    <Window.Resources> 
     <DataTemplate DataType="{x:Type local:Model}" 
         x:Key="VmItem"> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition /> 
        <ColumnDefinition Width="Auto" /> 
       </Grid.ColumnDefinitions> 
       <Border BorderBrush="Black" BorderThickness="1"> 
        <TextBlock Grid.Column="0" TextTrimming="CharacterEllipsis" Text="{Binding Original}" /> 
       </Border> 
       <Button Grid.Column="1" Margin="1" Content="{Binding Encoded}" MinWidth="90" MaxWidth="90"/> 
      </Grid> 
     </DataTemplate> 
    </Window.Resources> 
    <Grid> 
     <DataGrid ItemsSource="{Binding Items}" AutoGenerateColumns="False"> 
      <DataGrid.Columns> 
       <DataGridTemplateColumn Header="Message" CellTemplate="{StaticResource VmItem}" Width="300" MinWidth="100"/> 
      </DataGrid.Columns> 
     </DataGrid> 
    </Grid> 
</Window> 

Доказательство: