封装在面板 MVVM 内的用户控件答案

【问题标题】：User Controls Wrapped inside a panel MVVM封装在面板 MVVM 内的用户控件
【发布时间】：2014-04-20 03:04:54
【问题描述】：

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

我需要在面板/列表视图中显示用户控件（DATABOUND）（水平），以便它们在满足列表视图/面板的宽度时换行，并自动显示垂直滚动条（如图所示）。到目前为止，我有这个代码。

 <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>

注意：我可以接受任何使这种情况发生的控件。不一定是列表视图。

【问题讨论】：

标签： wpf mvvm wpf-controls wpfdatagrid wrappanel

【解决方案1】：

您正在使用 Wrap 面板，因此您需要指定它应该采用的宽度...因为 wrappanel 在项目主机控件内 wrap 面板本身无法计算宽度。它将尝试采用与方向相关的所有宽度（在你的情况下它是水平的）

这里是列表框作为项目宿主的示例代码...在此代码中，我已将包装面板宽度绑定到列表框的实际宽度，这样它就不会占用比列表框更多的宽度，并且我也禁用了水平方向和垂直环绕不需要的水平滚动

注意：确保在使用以下代码之前更改项目模板，它将适用于所有项目主机，如 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>

【讨论】：

【解决方案2】：

你很亲密:-)

将您的列表视图与一个视图面板放在一起，该面板是您的滚动查看器内的一个包裹。

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

【讨论】：

谢谢你的提示，它有帮助
在我进入地下之前我可以通过电话做的所有事情，但你到了那里，所以没关系 :-)

【解决方案3】：

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

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

另外，如果你想使用ItemsControl，那么ScrollViewer 不是默认Template 的一部分，比如ListView，所以你需要包含ScrollViewer

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

不要忘记将 Grid.Row="3" 从 ItemsControl 定义移动到 ScrollViewer

【讨论】：

谢谢，对我有用