在做一個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> 

有了一些的DataTemplates。我測試的第一個模板：

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

我想在DataTemplate中使用剩餘空間的最後一個文本框，但沒有我想的作品。我怎樣才能讓這個不合作的TextBox伸展？

編輯：取消了對文本框height屬性。

Answer 1

我與我的第一個答案攝取有點慢。在我認爲這種方法沒有錯誤之後，意識到自己的存在之後。此外，我不認爲你可以輕鬆實現你使用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(); 

您的每個自定義控件都必須使用星號調整等來使佈局看起來正確 - 這就是您在提出問題之後的樣子。顯然還有很多需要完成的連接。

這應該給你後面的東西。對不起，第一個答案的運行！

Answer 2

與LastChildFill="true"更改網格到DockPanel。
然後，您可以擺脫所有的Margin，讓WPF自動完成佈局。

Answer 3

使用<DockPanel>而不是<Grid>。

在DockPanel的最後一項使用剩餘空間。

Answer 4

一般來說，我使用<Grid.RowDefinitions>和<Grid.ColumnDefinitions>與星號尺寸*代替這種佈局的邊距。

更新1：（除去清晰度）

更新2：當我在這樣的情況下收場，我想不出哪裏辦理綁定或模板我試着背並以不同的方式查看問題。我幾乎總是把它帶回到MVVM模式。在這種情況下，您的模型是您的EventHistory對象。您的ViewModel有一個ObservableCollection<EventHistory>。你的視圖只是綁定到該集合。因此，要獲得這樣的事情：

你會使用類似這樣您瀏覽：

<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中，這可能是可能的，但是在這一點上這似乎更自然。

注：創建視圖（紅色邊框內的區域）後，我主持它在主窗口中離開區域向右按你的屏幕截圖。我還採用了一些網格分割器，星形調整大小和邊距的自由度，以便在保持圖像比例的同時佔用所有可用空間。

希望有幫助！