在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>

我希望Button始终位于单元格的右侧，并且其宽度是固定的。 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占用剩余空间。

---

更新：根据上面的评论，除了将面板类型更改为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>

证明：