自定義DataTemplate - 控件不佔用完整的網格列寬

Question

我對自定義數據模板在列表框中的佈局有點困惑。 問題是每個ListBoxItem都不佔用整行寬度。

下面是ListBox中的DataTemplate：

<Window x:Class="NewPropertyGrid.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:local="clr-namespace:NewPropertyGrid" 
     Title="MainWindow" Height="200" Width="300"> 
    <Window.Resources> 
     <DataTemplate x:Key="PropertyListTemplate"> 
      <Grid Background="Yellow"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="Auto"/> 
        <ColumnDefinition Width="Auto"/> 
        <ColumnDefinition Width="*"/> 
       </Grid.ColumnDefinitions> 

       <TextBlock Text="{Binding Path=PropType,Converter={local:PropTypeToString}}" 
            Margin="1" 
            VerticalAlignment="Center" 
            Background="LightGray" 
            Foreground="Black" 
            /> 

       <TextBlock Grid.Column="1" 
            Text="=" 
            Margin="1" 
            Background="LightGray" 
            Foreground="Black" 
            /> 

       <ContentControl Grid.Column = "2" 
           Content = "{Binding Editor}" 
           HorizontalAlignment = "Stretch" 
           VerticalAlignment = "{Binding VerticalContentAlignment}" 
           /> 
      </Grid> 
     </DataTemplate> 
    </Window.Resources> 

    <ListBox x:Name="lv" ItemTemplate="{StaticResource PropertyListTemplate}" Background="Green" /> 
</Window> 

正如你看到的，也有在網格3列。第三個應該是Editor（FrameworkElement），通過後面的代碼決定。下面是類數據結構用作信息源：

namespace NewPropertyGrid { 
    public enum PropType { Name, Age, Surname }; 

    public class PropItem { 
     public PropType PropType { get; set; } 

     object _Value = null; 
     internal object Value { 
      get { 
       return _Value; 
      } 
      set { 
       _Value = value; 
       DetectEditor(); 
      } 
     } 

     public FrameworkElement Editor { get; set; } 

     public void DetectEditor() { 
      var t = Value.GetType(); 
      if (t == typeof(string)) { 
       var txt = new TextBox(); 
       txt.Text = Value as string; 
       Editor = txt; 
      } 
      else if (t.IsArray) { 
       var cmb = new ComboBox(); 
       cmb.ItemsSource = (IEnumerable)Value; 
       if (cmb.Items.Count > 0) 
        cmb.SelectedIndex = 0; 
       Editor = cmb; 
      } 
     } 
    } 
} 

現在，當我在列表框中加載數據，

namespace NewPropertyGrid { 
    public partial class MainWindow : Window { 
     public MainWindow() { 
      InitializeComponent(); 

      Loaded += (s, e) => { 
       var list = new List<PropItem>(); 
       list.Add(new PropItem() { 
       PropType = global::NewPropertyGrid.PropType.Name, 
       Value = "Tester" 
       }); 
       list.Add(new PropItem() { 
       PropType = global::NewPropertyGrid.PropType.Surname, 
       Value = new string[] { "X", "Y", "Z" } 
       }); 

       lv.ItemsSource = list; 
      }; 
     } 
    } 
} 

我看到FrameworkElement的Editor沒有按不使用Grid的第三列指定的全行寬度。

這就是該行的樣子（截圖爲Snoop）。請注意，文本「Tester」的文本框沒有使用第三列的全部寬度。 Snoop告訴我，ContentPresenter在ListBoxItem的默認模板中，並未使用全寬，儘管邊框確實（注意ActualWidth爲Bd）！

如何更改DataTemplate以使Editor使用全列寬？

非常感謝！

Answer 1

將HorizontalContentAlignment設置爲Stretch爲您的ListBoxItem。它可以在ItemContainerStyle完成。

<ListBox x:Name="lv" ItemTemplate="{StaticResource PropertyListTemplate}" 
     Background="Green"> 
    <ListBox.ItemContainerStyle> 
     <Style TargetType="ListBoxItem"> 
      <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
     </Style> 
    </ListBox.ItemContainerStyle> 
</ListBox>