Question

我是WPF / Xaml的新手并且正在搜索我面临的这个问题，但发现它很难。请求一些帮助。

我需要在面板/列表视图中显示usercontrols（DATABOUND）（水平），以便在满足listview / panel的宽度时进行包装，并使用垂直滚动条自动显示（如图所示）。 enter image description here 到目前为止我有这个代码。

 <ListView Grid.Row="3"
                  ItemsSource="{Binding Controls}"                   
                  VerticalAlignment="Bottom" Background="{x:Null}" BorderBrush="{x:Null}"

                  >



                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" Margin="0,0,0,10"></StackPanel>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="VerticalContentAlignment" Value="Bottom"/>
                        <Setter Property="Focusable"  Value="False" />
                    </Style>
                </ListView.ItemContainerStyle>
                <!--<ListView.ItemTemplate>
                    <DataTemplate>
                        <ContentControl Content="{Binding}" VerticalContentAlignment="Bottom"/>
                    </DataTemplate>
                </ListView.ItemTemplate>-->
            </ListView>

我甚至尝试过以下代码。是的，它包装但没有滚动条出现！

    <ItemsControl Grid.Row="3"
              Width="100" Height="200" 
              ItemsSource="{Binding Controls}"                   
              VerticalAlignment="Bottom" Background="{x:Null}" BorderBrush="{x:Null}"

              >

            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>                         
                    <WrapPanel Orientation="Horizontal" Margin="0,0,0,10"></WrapPanel>            
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>


        </ItemsControl>

注意：我可以通过任何控制来实现这一点。不一定是列表视图。

Answer 1

要包装您需要将ItemsPanel设置为WrapPanel的项目，如第二个示例所示，但您可能需要在ListView上禁用水平滚动：

<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" .../>

另外，如果你想使用ItemsControl，那么ScrollViewer不属于默认Template，就像ListView一样，所以你需要输入ScrollViewer {1}}

<ScrollViewer Grid.Row="3">
   <ItemsControl ...>
      <!-- .... -->
   </ItemsControl>
</ScrollViewer>

并且不要忘记将Grid.Row="3"从ItemsControl定义移至ScrollViewer

Answer 2

你很亲密： - ）

将您的列表视图放在视图面板中，该视图面板是您的滚动查看器中的一个包装。

<ScrollViewer>
  <ItemsSource="{Binding Controls}">
    <ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
         <WrapPanel></WrapPanel>
      </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel> 
  </ItemsControl>
</ScrollViewer>

Answer 3

你正在使用Wrap面板，所以你需要指定它应该采取的宽度...因为wrappanel在一个项目主机控制包裹面板本身无法计算宽度。它将尝试采取相应的方向的所有宽度（在你的情况下是水平的）

以下是带有列表框作为项目主机的示例代码...在此代码中，我已将wrappanel宽度绑定到列表框的实际宽度，以便它永远不会占用比列表框更宽的宽度，并且我也禁用了水平滚动，水平方向和垂直包裹不需要

注意：确保在使用以下代码之前更改项目模板，它将适用于所有项目主机，如ListView，ItemsControl ......

<ListBox Width="500" Height="500" Name="listbox" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal" Width="{Binding ActualWidth,ElementName=listbox}"></WrapPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid Height="100" Width="100">
                        <TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

对于ItemsControl

<ItemsControl Grid.Row="3"
              Width="100" Height="200" 
              ItemsSource="{Binding Controls}"                   
              VerticalAlignment="Bottom" Background="{x:Null}" BorderBrush="{x:Null}"
 Name="listbox"
              >

            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>

                    <WrapPanel IsItemsHost="True" Orientation="Horizontal" Width="{Binding ActualWidth,ElementName=listbox}"></WrapPanel>

                </ItemsPanelTemplate>

            </ItemsControl.ItemsPanel>

            <ItemsControl.Template>
                <ControlTemplate>
                    <ScrollViewer x:Name="ScrollViewer" Padding="{TemplateBinding Padding}">
                        <ItemsPresenter />
                    </ScrollViewer>
                </ControlTemplate>
            </ItemsControl.Template>

            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid Height="30" Width="30">
                        <TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>

        </ItemsControl>

用户控件包含在面板MVVM中

3 个答案: