UI在數據網格

Question

我要實現我的UI類似下面顯示的項目水平，而不是垂直，如： -

   Item 1  Item 2  Item3 Item 4 
    Heading 1: AA  AA1  AA2  AA3 
    Heading 2: 20  10   11  89 
    Heading 3: 10  11   89  7 
    Heading 4: Expand  Expand Expand Expand 

凡項目將來自collection.PropertyName將顯示爲標題&值。每個標題將是特定類型&將被單獨驗證。另外，從項目1到項目4的水平滾動條會始終可見。在第四行有一個擴展控件。當我們點擊擴展器寬度&高度增加。

目前我已經這樣做了使用一個網格&一個項目control.One爲標題&一個網格狀l​​ayout..Aligned他們通過SharedSize group.But問題，當我增加細胞內的字符數來臨大程度上&刪除它，佈局完全被你摧毀..

WPF代碼： -

<Grid Grid.IsSharedSizeScope="True"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto"/> 
     <ColumnDefinition/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition/> 
    </Grid.RowDefinitions> 



    <Grid Grid.RowSpan="2"> 
     <Grid.RowDefinitions> 
      <RowDefinition SharedSizeGroup="RowHeight"/> 
      <RowDefinition SharedSizeGroup="RowHeight"/> 
      <RowDefinition SharedSizeGroup="RowHeight"/> 
      <RowDefinition SharedSizeGroup="ExpanderHeight"/> 
     </Grid.RowDefinitions> 
     <Label Content="Name" Grid.Row="1"/> 
     <Label Content="Age" Grid.Row="2"/> 
     <Label Content="Nothing" Grid.Row="3"/> 
    </Grid> 

    <ScrollViewer Grid.Column="1" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled"> 
     <Grid> 
      <Border BorderBrush="Gray" BorderThickness="1" /> 
      <ItemsControl Name="ItemsControl2" Grid.Column="1"> 
       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <StackPanel Orientation="Horizontal" /> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 
       <ItemsControl.ItemTemplate> 
        <DataTemplate> 
         <Grid> 
          <Grid.RowDefinitions> 
           <RowDefinition SharedSizeGroup="RowHeight"/> 
           <RowDefinition SharedSizeGroup="RowHeight"/> 
           <RowDefinition SharedSizeGroup="RowHeight"/> 
           <RowDefinition SharedSizeGroup="ExpanderHeight"/> 
          </Grid.RowDefinitions> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition SharedSizeGroup="MyWidth"/> 
           <ColumnDefinition/> 
          </Grid.ColumnDefinitions> 
          <TextBox Text="{Binding Index}" Background="Gray"/> 
          <TextBox Grid.Row="1" Text="{Binding Name}" /> 
          <TextBox Grid.Row="2" Text="{Binding Age}" /> 
          <Expander Grid.Row="3" FlowDirection="RightToLeft" ExpandDirection="Down" Header="MyCustom"> 
           <StackPanel> 
            <TextBlock Text="Test11119999999999999677777"/> 
            <TextBlock Text="123333"/> 
            <TextBlock Text="90000"/> 
           </StackPanel> 
          </Expander> 
         </Grid> 
        </DataTemplate> 
       </ItemsControl.ItemTemplate> 
      </ItemsControl> 
     </Grid> 
    </ScrollViewer> 
</Grid> 

C＃代碼

using System; 
    using System.Collections.Generic; 
    using System.Linq; 
    using System.Text; 
    using System.Windows; 
    using System.Windows.Controls; 
    using System.Windows.Data; 
    using System.Windows.Documents; 
    using System.Windows.Input; 
    using System.Windows.Media; 
    using System.Windows.Media.Imaging; 
    using System.Windows.Shapes; 
    using System.Collections.ObjectModel; 

    namespace BindingGroupSample 
    { 
public partial class Window2 : Window 
{ 
    ObservableCollection<Temp> list1 = new ObservableCollection<Temp>(); 
    ObservableCollection<Temp> list2 = new ObservableCollection<Temp>(); 

    public Window2() 
    { 
     InitializeComponent(); 


     for (int i = 0; i < 25; i++)  
     { 
      // list1.Add(new Temp() { Index = i }); 
      list2.Add(new Temp() { Index = i,Name = "AA" + i + i ,Age=i*2}); 
      list1.Add(new Temp() { Index = i, Name = "AA" + i + i, Age = i * 2 }); 
     } 

     ItemsControl2.ItemsSource = list2; 

     //ItemsControl1.ItemsSource = list1; 

    } 

    private void Grid_SizeChanged(object sender, SizeChangedEventArgs e) 
    { 
     // ItemsControl1.Items.Refresh(); 
    } 

    } 



public class Temp 
{ 
    public int Index { get; set; } 
    public string Name { get; set; } 
    public int Age { get; set; } 
} 

}

我不能用元素綁定實現這一點，因爲標題會隨着項目值的不同而有所偏移。

請提供任何建議。

Answer 1

我做你結合一些變化.....

我已經綁定文本框寬度與寬度的DataTemplate ......不是硬編碼的寬度在任何地方......

<DataTemplate> 
          <Grid> 
           <Grid.RowDefinitions> 
            <RowDefinition SharedSizeGroup="RowHeight"/> 
            <RowDefinition SharedSizeGroup="RowHeight"/> 
            <RowDefinition SharedSizeGroup="RowHeight"/> 
            <RowDefinition SharedSizeGroup="ExpanderHeight"/> 
           </Grid.RowDefinitions> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition SharedSizeGroup="MyWidth"/> 
            <ColumnDefinition/> 
           </Grid.ColumnDefinitions> 
           <TextBox Text="{Binding Index}" Background="Gray" MaxWidth="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Grid}},Path=ActualWidth}"/> 
           <TextBox Grid.Row="1" Text="{Binding Name}" MaxWidth="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Grid}},Path=ActualWidth}"/> 
           <TextBox Grid.Row="2" Text="{Binding Age}" MaxWidth="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Grid}},Path=ActualWidth}"/> 
           <Expander Grid.Row="3" FlowDirection="RightToLeft" ExpandDirection="Down" Header="MyCustom" MaxWidth="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Grid}},Path=ActualWidth}"> 
            <StackPanel> 
             <TextBlock Text="Test11119999999999999677777" TextWrapping="Wrap"/> 
             <TextBlock Text="123333"/> 
             <TextBlock Text="90000"/> 
            </StackPanel> 
           </Expander> 
          </Grid> 
         </DataTemplate>