制作 DataTemplate 拉伸中的最后一个文本框

Question

我有一个 ItemsControl：

<Border Grid.Row="1" Margin="20" BorderBrush="AliceBlue" BorderThickness="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
   <ItemsControl Margin="10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding SelectedEventHistoryEntryCollection}" ItemTemplateSelector="{StaticResource computerEventHistoryDataTemplateSelector}"/>
</Border>

带有一些数据模板。我正在测试第一个模板：

<DataTemplate x:Key="DetailsDataTemplate">
        <Grid>
            <Label Width="150" HorizontalAlignment="Left" VerticalAlignment="Top" Content="{x:Static resx:Resources.Label_ServiceDept}"/>
            <TextBox Margin="110,0,0,0" Width="200" IsReadOnly="True" Text="{Binding ServiceDepartment}" VerticalAlignment="Top" HorizontalAlignment="Left"/>

            <Label Width="150" Margin="0,40,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Content="{x:Static resx:Resources.Label_SLA}"/>
            <TextBox Margin="110,40,0,0" Width="200" IsReadOnly="True" Text="{Binding SLA}" VerticalAlignment="Top" HorizontalAlignment="Left"/>

            <Label Width="150" Margin="0,80,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Content="{x:Static resx:Resources.Label_Details}"/>
            <TextBox Margin="110,80,10,10" IsReadOnly="True" TextWrapping="Wrap" Text="{Binding Details}"/>
        </Grid>
    </DataTemplate>

我希望数据模板中的最后一个文本框用完剩余空间，但我尝试的任何方法都不起作用。我怎样才能让这个不合作的文本框伸展？

编辑：删除了文本框上的高度属性。

Answer 1

使用 LastChildFill="true" 将网格更改为 DockPanel。
然后，您可以去掉所有 Margin 并让 WPF 自动进行布局。

Answer 2

使用 而不是 。

DockPanel 中的最后一项使用剩余空间。

Answer 3

通常，我将 和 与星号大小调整 * 结合使用，而不是此类布局的边距。

更新1：（为了清晰起见，已删除）

更新2：当我遇到这样的情况时，我无法弄清楚在哪里应用绑定或模板，我会尝试备份并以不同的方式看待问题。我几乎总是把它带回 MVVM 模式。在这种情况下，您的模型就是您的 EventHistory 对象。您的 ViewModel 有一个 ObservableCollection。您的视图只是绑定到该集合。因此，要获得这样的内容：

您可以在视图中使用类似的内容：

<Grid>

    <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
        <RowDefinition Height="8" />
        <RowDefinition Height="1.5*" />
    </Grid.RowDefinitions>

    <DataGrid Grid.Row="0" AutoGenerateColumns="True" 
                ItemsSource="{Binding}" IsSynchronizedWithCurrentItem="True" 
                HorizontalGridLinesBrush="DarkGray" VerticalGridLinesBrush="DarkGray" />

    <GridSplitter Grid.Row="1" 
                    Background="Transparent"
                    HorizontalAlignment="Stretch" VerticalAlignment="Stretch"   />

    <Border Grid.Row="2" BorderBrush="DarkGray" BorderThickness="1" CornerRadius="3" Padding="8">

        <Grid>

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

            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Label Grid.Row="0" Grid.Column="0" Content="Status" />
            <TextBox Grid.Row="0" Grid.Column="1" Margin="0,0,0,8" Text="{Binding Path=Status}" />

            <Label Grid.Row="1" Grid.Column="0" Content="Detailed Description" />
            <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Path=Description}" />

        </Grid>
    </Border>
</Grid>

这就是很好——因为这就是你想要实现的目标。屏幕底部的 2 个标签和文本框上的绑定不必是任何数据模板的一部分。它们是视图的一部分（屏幕截图中红色边框内的所有内容）。所有的大小调整都有效，一切都很好。如果您确实想将内容移至 DataTemplate 中，这可能是可能的，但此时这似乎更自然。

注意：创建视图（红色边框内的区域）后，我将其托管在主窗口中，根据屏幕截图在右侧留下了一个区域。我还对网格分割器、星形调整大小和边距进行了一些自由操作，这样东西就可以占据所有可用空间，同时保持如图所示的比例。

希望这有帮助！

Answer 4

我的第一个答案的理解有点慢。在意识到你的追求之后，我认为这种方法是不正确的。另外，我认为使用 DataTemplates 无法轻松实现您想要的目标。但是，我确实认为您有几个选择：

1. 检查 Prism 因为它擅长做诸如构建复合材料之类的事情应用程序。然而，对于这个问题来说，这似乎太过分了。因此，更直接的方法可能是...
2. 为您拥有的每个单独的详细信息视图构建自定义控件，然后编写一些自定义逻辑来根据需要加载每个视图。您将像这样设置它...

您的主网格和详细信息视图主机（即 ContentControl）将设置如下所示：

<Grid Background="Transparent">

    <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
        <RowDefinition Height="8" />
        <RowDefinition Height="1.5*" />
    </Grid.RowDefinitions>

    <DataGrid Grid.Row="0" />

    <GridSplitter Grid.Row="1" Background="Transparent"
                    HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  />

    <Border Grid.Row="2" BorderBrush="DarkGray" BorderThickness="1" CornerRadius="3" Padding="8">
        <ContentControl Grid.Row="2" x:Name="myContent" />            
    </Border>

</Grid>

并且您个人详细信息视图的每个自定义控件将设置如下所示：

<UserControl x:Class="WpfApplication1.CustomUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Label Grid.Row="0" Grid.Column="0" Content="Status" />
        <Label Grid.Row="1" Grid.Column="0" Content="Description" />

        <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Status}" />
        <TextBox Grid.Row="1" Grid.Column="1" TextWrapping="Wrap" Text="{Binding Description}" />

    </Grid>
</UserControl>

在运行时，在 DataGrid 中选择一行，您必须使用如下代码加载正确的用户控件：

myContent.Content = new CustomUserControl();

每个自定义控件都必须使用星号调整大小等，以使布局看起来正确 - 这是你的问题想要什么。显然还有很多接线需要完成。

那应该会给你你想要的东西。很抱歉第一个答案跑来跑去！