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>