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用于固定值，而不是{{ 1}}。这将使列加载指定的，但用户仍然可以修改列，如果他们想：

Auto

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>

证明：

在DataGrid单元格中安装文本框和按钮

2 个答案: