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将显示为标题＆amp;值。每个标题将是特定类型＆amp;将会单独验证。从第1项到第4项都会有一个水平滚动条可见。第四行有一个扩展器控件。当我们点击扩展器宽度＆amp;身高增加。

目前我使用一个网格＆amp;一个项目控制。一个标题＆amp;一个用于Grid的布局。通过SharedSize组对齐它们。但是当我在一个单元格中大量增加字符数时，问题就出现了。删除它，布局完全被破坏..

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>

用于在数据网格中水平而不是垂直显示项目的UI

1 个答案: