文本框宽度随文本无限增长

Question

在解释我的问题之前，这是我的代码：

<DataGrid.RowDetailsTemplate>
    <DataTemplate>
        <StackPanel Background="WhiteSmoke" >
            <Grid Margin="0,10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="10" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="10" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="10" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="10" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="10" />
                </Grid.RowDefinitions>
                <TextBlock Text="Name: " FontWeight="Bold" Grid.Row="0" />
                <TextBlock x:Name="parametro" Text="{Binding Username}" Grid.Column="1" Grid.Row="0" />
                <TextBlock Text="Creation Date: " FontWeight="Bold" Grid.Row="2" />
                <TextBlock Text="{Binding CreationDate}" Grid.Column="1" Grid.Row="2" />
                <TextBlock Text="Creation User: " FontWeight="Bold" Grid.Row="4" />
                <TextBlock Text="{Binding CreationUser}" Grid.Column="1" Grid.Row="4" />
                <Button Style="{DynamicResource MetroCircleButtonStyle}" Grid.RowSpan="3" Foreground="Green" FontSize="13" Width="50" FontFamily="{StaticResource FontAwesome}" Content="&#xf00c;" Grid.Column="2" Grid.Row="0" />
                <Button Style="{DynamicResource MetroCircleButtonStyle}" Grid.RowSpan="3" Foreground="Red" FontSize="13" Width="50" FontFamily="{StaticResource FontAwesome}" Content="&#xf00d;" Grid.Column="3" Grid.Row="0"
                        Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}, Path=DataContext.DeleteUser}"
                        CommandParameter="{Binding ElementName=parametro, Path=Text}"/>
                <ComboBox x:Name="combo" SelectedItem="{Binding Role}" ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}, 
                    Path=DataContext.Roles}" Grid.Row="6" Grid.Column="1"/>
                <TextBlock Text="Ruolo: " FontWeight="Bold" Grid.Row="6" Grid.Column="0"/>
                <TextBlock Text="Descrizione: " FontWeight="Bold" Grid.Row="8" Grid.Column="0"/>
                <TextBox Grid.Row="8" Grid.Column="1"></TextBox>
            </Grid>
        </StackPanel>
    </DataTemplate>
</DataGrid.RowDetailsTemplate>

我的问题是，当我在文本框中写入文本时（xaml中的最后一个元素），文本框的宽度随之增长。现在我知道有一个maxwidth属性，但由于我没有为网格列定义宽度，我无法将其绑定到文本框的宽度。我不想根据实际像素设置宽度，因为我希望我的应用程序可以调整大小＆＃34;。我还尝试创建一个像边框一样的虚假控件，并将文本框的宽度绑定到它，但它不起作用。我该如何解决这个问题？

Answer 1

首先，我们需要让模板假定其父级的大小。

1. 设置TextWrapping =＆＃34; WrapWithOverflow＆＃34;在文本框上。
2. 至少有一列的宽度必须为function enableLinkIfHoverOnly() { let anchors = document.querySelectorAll("dt > a"); for(let i=0; i<anchors.length; i++) { let anchor = <HTMLAnchorElement>anchors[i]; // disable iPhone correct behavior by adding dummy ontouchstart event anchor.ontouchstart = (e) => true; // simulate iPhone correct behavior with a class check anchor.onclick = (e) => { if('ontouchstart' in window) { let hovered = document.querySelector(".hovered"); if(hovered !== anchor) { if(hovered) hovered.classList.remove("hovered"); anchor.classList.add("hovered"); e.preventDefault(); } } } } } ，而不是默认的*。这将导致Grid将其自身调整为其父级。对于那个角色，第二列对我来说似乎是最好的。
3. 提供网格Auto，以便它不会最终居中。
4. 你可以摆脱StackPanel;它没有为你做任何事情。

其次，我们需要在DataGrid中进行一些更改以限制其行详细信息区域的宽度。

这是我测试的例子;您的ItemsSource当然会有所不同。

HorizontalAlignment="Left"

我是怎么想出来的？

我在DataTemplate中为Grid添加了预览鼠标按下处理程序：

<DataGrid 
    ItemsSource="{Binding Items}"
    AutoGenerateColumns="False"
    RowHeaderWidth="0"
    >
    <!-- 
    ScrollContentPresenter includes the row header column. 
    DataGridDetailsPresenter doesn't. So we set RowHeaderWidth="0"
    above to avoid making the details too wide by an amount equal to 
    the width of the row header. 

    This is just cosmetic, so leave RowHeaderWidth alone if you have 
    a requirement to keep the row header visible. 
    -->
    <DataGrid.RowDetailsTemplate>
        <DataTemplate>
            <Grid 
                Margin="0,10" 
                Background="WhiteSmoke" 
                HorizontalAlignment="Left"
                Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
                >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="10" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="10" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="10" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="10" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="10" />
                </Grid.RowDefinitions>
                <TextBlock Text="Name: " FontWeight="Bold" Grid.Row="0" />
                <TextBlock x:Name="parametro" Text="{Binding Username}" Grid.Column="1" Grid.Row="0" />
                <TextBlock Text="Creation Date: " FontWeight="Bold" Grid.Row="2" />
                <TextBlock Text="{Binding CreationDate}" Grid.Column="1" Grid.Row="2" />
                <TextBlock Text="Creation User: " FontWeight="Bold" Grid.Row="4" />
                <TextBlock Text="{Binding CreationUser}" Grid.Column="1" Grid.Row="4" />
                <Button Style="{DynamicResource MetroCircleButtonStyle}" Grid.RowSpan="3" Foreground="Green" FontSize="13" Width="50" Content="&#xf00c;" Grid.Column="2" Grid.Row="0" />
                <Button Style="{DynamicResource MetroCircleButtonStyle}" Grid.RowSpan="3" Foreground="Red" FontSize="13" Width="50" Content="&#xf00d;" Grid.Column="3" Grid.Row="0"
                    Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}, Path=DataContext.DeleteUser}"
                    CommandParameter="{Binding ElementName=parametro, Path=Text}"/>
                <ComboBox MaxWidth="185" x:Name="combo" SelectedItem="{Binding Role}" ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}, 
                Path=DataContext.Roles}" Grid.Row="6" Grid.Column="1"/>
                <TextBlock Text="Ruolo: " FontWeight="Bold" Grid.Row="6" Grid.Column="0"/>
                <TextBlock Text="Descrizione: " FontWeight="Bold" Grid.Row="8" Grid.Column="0"/>
                <TextBox 
                    Grid.Row="8" 
                    TextWrapping="WrapWithOverflow"
                    Grid.Column="1"
                    ></TextBox>
            </Grid>
        </DataTemplate>
    </DataGrid.RowDetailsTemplate>

使用一些测试数据运行我的测试程序，单击一行以展开行详细信息，然后单击行详细信息区域。这是我对该鼠标事件的处理程序：

<Grid Margin="0,10" Background="WhiteSmoke" PreviewMouseDown="Grid_PreviewMouseDown">

我设置了一个断点，并在观察窗口中查看了private void Grid_PreviewMouseDown(object sender, MouseButtonEventArgs e) { List<DependencyObject> parents = new List<DependencyObject>(); var parent = VisualTreeHelper.GetParent(sender as DependencyObject); while (parent != null) { parents.Add(parent); parent = VisualTreeHelper.GetParent(parent); } ; } 。

parents

网格的父级是- parents Count = 16 System.Collections.Generic.List<System.Windows.DependencyObject> + [0] {System.Windows.Controls.Primitives.DataGridDetailsPresenter} System.Windows.DependencyObject {System.Windows.Controls.Primitives.DataGridDetailsPresenter} + [1] {System.Windows.Controls.Primitives.SelectiveScrollingGrid} System.Windows.DependencyObject {System.Windows.Controls.Primitives.SelectiveScrollingGrid} + [2] {System.Windows.Controls.Border} System.Windows.DependencyObject {System.Windows.Controls.Border} + [3] {System.Windows.Controls.DataGridRow} System.Windows.DependencyObject {System.Windows.Controls.DataGridRow} + [4] {System.Windows.Controls.Primitives.DataGridRowsPresenter} System.Windows.DependencyObject {System.Windows.Controls.Primitives.DataGridRowsPresenter} + [5] {System.Windows.Controls.ItemsPresenter} System.Windows.DependencyObject {System.Windows.Controls.ItemsPresenter} + [6] {System.Windows.Controls.ScrollContentPresenter} System.Windows.DependencyObject {System.Windows.Controls.ScrollContentPresenter} + [7] {System.Windows.Controls.Grid} System.Windows.DependencyObject {System.Windows.Controls.Grid} + [8] {System.Windows.Controls.ScrollViewer} System.Windows.DependencyObject {System.Windows.Controls.ScrollViewer} + [9] {System.Windows.Controls.Border} System.Windows.DependencyObject {System.Windows.Controls.Border} + [10] {System.Windows.Controls.DataGrid Items.Count:10} System.Windows.DependencyObject {System.Windows.Controls.DataGrid} + [11] {System.Windows.Controls.Grid} System.Windows.DependencyObject {System.Windows.Controls.Grid} + [12] {System.Windows.Controls.ContentPresenter} System.Windows.DependencyObject {System.Windows.Controls.ContentPresenter} + [13] {System.Windows.Documents.AdornerDecorator} System.Windows.DependencyObject {System.Windows.Documents.AdornerDecorator} + [14] {System.Windows.Controls.Border} System.Windows.DependencyObject {System.Windows.Controls.Border} + [15] {CS7Test02.MainWindow} System.Windows.DependencyObject {CS7Test02.MainWindow} ：

DataGridDetailsPresenter

他的父母是+ [0] {System.Windows.Controls.Primitives.DataGridDetailsPresenter} System.Windows.DependencyObject {System.Windows.Controls.Primitives.DataGridDetailsPresenter} ，并在链上。通过简单的反复试验，我找到了我想要的SelectiveScrollingGrid的父母，并且与之相关。

我找到了另一种方法，将所需的宽度应用为DataGrid本身的一个特征而不是datatemplate。这使您可以使用任意详细信息模板，而无需单独修复每个模板以使用正确的宽度。

ActualWidth