Question

我的项目中有一个ListView，并且我希望ListView中的项目相对于父窗口大小响应地调整大小。这种自动大小更改类似于instagram Windows应用：

gif：http://uupload.ir/files/c0rv_insta.gif

我希望能够在DataTemplate中指定MaxHeight和MaxWidth，以便在项目达到大小限制时显示更多项目。

这是我的代码：

<ListView x:Name="ViewPosts" ItemsSource="{Binding ImageUser}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
             <WrapPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate >
            <v:StateViewPostSimple/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListView>

这是我的DataTemplate / StateViewPostSimple：

<UserControl ....>
   <Grid>
       <Image Stretch="Fill" Source="{Binding Images[0].URI}" MaxHeight="150" MaxWidth="150" MinHeight="100" MinWidth="100"/>
   </Grid>
</UserControl>

我设置了 MaxHeight ， MaxWidth 和 MinHeight ， MinWidth ，但这没什么区别。

Answer 1

这是因为水平WrapPanel不会拉伸其内容，它要么适合该项目，要么溢出到下一行。

一种解决方案是覆盖度量和安排方法，这会花费更多的精力。

另一种方法是将UniformGrid用作ItemsPanelTemplate，这会自动拉伸其内容。

<ListView.ItemsPanel>
    <ItemsPanelTemplate>
        <UniformGrid Rows="{Binding NumberOfRows}" Columns="{Binding NumberOfColumns}"/>
    </ItemsPanelTemplate>
</ListView.ItemsPanel>

然后用如下代码修改这两个变量（NumberOfRows，NumberOfColumns）：

//you need access to listview object
//set the number of columns based on the current width of listview
if(listview.ActualWidth <= 450)
    NumberOfColumns = 3;
else if(listview.ActualWidth <= 600)
    ...

或者您可以将其表达为：

NumberOfColumns = (int)Math.listview.ActualWidth / 150;
if(NumberOfColumns < 3) NumberOfColumns = 3;

然后您可以找到行数：

//ImageUserList.Count = number of all items
//listview.ItemsSource.Cast<object>().Count() can be used instead
NumberOfRows = (int)Math.Ceiling(ImageUserList.Count / (double)NumberOfColumns);

确保正确使用DataContext以便绑定到这两个变量。

根据父级大小自动调整WPF中的ListView项目的大小

1 个答案: