简体   繁体   中英

When I arrange ListViewItem horizontal, the item arrange center on VerticalAlignment, how can I set top VerticalAlignment?

As I want to user a listView to arrange item Horizontal. So I setted the ItemsPanel as a StackPanel with the Orientation as Horizontal.

<ListView x:Name="lv" ItemsSource="{Binding}" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Background="Salmon" VerticalAlignment="Top">
                    <ListView ItemsSource="{Binding Items}" Height="Auto">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding StudentName}"/>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>

and the result is like this:

样本图片

How can I set them top align?

the background code is:

            namespace WpfApplication2
            {
                public partial class MainWindow : Window
                {
                    ObservableCollection<Group> school;

                    public ObservableCollection<Group> Schools
                    {
                        get { return school; }
                        set { school = value; }
                    }
                    public MainWindow()
                    {
                        InitializeComponent();
                        Schools = new ObservableCollection<Group>();
                        Group g1 = new Group();
                        g1.Items = new ObservableCollection<Student>();
                        g1.Items.Add(new Student() { StudentName = "a" });
                        g1.Items.Add(new Student() { StudentName = "b" });
                        Schools.Add(g1);

                        Group g2 = new Group();
                        g2.Items = new ObservableCollection<Student>();
                        g2.Items.Add(new Student() { StudentName = "g2a" });
                        g2.Items.Add(new Student() { StudentName = "g2b" });
                        g2.Items.Add(new Student() { StudentName = "g2c" });
                        g2.Items.Add(new Student() { StudentName = "g2c" });
                        g2.Items.Add(new Student() { StudentName = "g2c" });
                        g2.Items.Add(new Student() { StudentName = "g2c" });
                        g2.Items.Add(new Student() { StudentName = "g2c" });
                        Schools.Add(g2);
                        lv.DataContext = Schools;
                    }
                }
                public class Group : ModelBase
                {


                    private ObservableCollection<Student> item;

                    public ObservableCollection<Student> Items
                    {
                        get { return item; }
                        set { item = value; }
                    }

                }
                public class Student : ModelBase
                {
                    private string sName;

                    public string StudentName
                    {
                        get { return sName; }
                        set { sName = value; }
                    }
                }

                public class ModelBase : INotifyPropertyChanged, IDisposable
                {
                    public event PropertyChangedEventHandler PropertyChanged;

                    protected void OnPropertyChanged(string propertyName = null)
                    {
                        if (PropertyChanged != null)
                        {
                            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                        }
                    }

                    public void Dispose()
                    {
                        this.OnDispose();
                    }

                    protected virtual void OnDispose()
                    {

                    }
                }
            }

I think all you need to do is wrap your ListView in a grid as well, and set the grid's VerticalAlignment to Top . Right now the window, by default, is vertically center aligning its content.

<Grid VerticalAlignment="Top">
    <ListView x:Name="lv" ItemsSource="{Binding}" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Background="Salmon" VerticalAlignment="Top">
                    <ListView ItemsSource="{Binding Items}" Height="Auto">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding StudentName}"/>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>
</Grid>

ok, I found the solution. just set the itemContainerStyle is work. Holp it is helpful for others.

<ListView.ItemContainerStyle>
      <Style>
           <Setter Property="Control.VerticalAlignment" Value="Top"/>
      </Style>
</ListView.ItemContainerStyle>

You can achieve it via the ListView.ItemContainerStyle property (as you pointed out in your answer), but there's a shorter (and simpler?) way - by setting the ListView.VerticalContentAlignment :

<ListView VerticalContentAlignment="Top" (...)>
    (...)
</ListView>

To be precise - ListViewItem.VerticalAlignment is by means of default style bound to ItemsControl.VerticalContentAlignment of the closest ItemsControl ancestor - you can observe apposite error message in the output window should you place a ListViewItem outside of any ItemsControl . Naturally, horizontal alignment works analogously.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM