Viewbox 里面只能包含方形 Grid 吗？

Question

我只想知道 Viewbox 是否只能包含方形网格等 Squre 元素？ Viewbox 可以包含矩形网格吗？

我的问题原因： 我正在尝试将矩形 Grid 放置到 Viewbox 控件中，但是当我这样做时，它会在视图框中从上侧和下侧留下额外的边距，以使元素成为方形。

我的代码：

<ListView Grid.Row="9"
                     x:Name="lstView"
                     CanDragItems="True"
                     ItemsSource="{Binding Details.data}"
                     ItemTemplate="{StaticResource lvTemplate}"
                     Style="{StaticResource HorizontalWrapView}" />

------------------------------------

<DataTemplate x:Key="lvTemplate">
    <Viewbox>
        <Grid Margin="10 0" Height="120" Width="170" Background="Gray">
            <Grid >
                <TextBlock Text="abc"
                           Style="{StaticResource TileOverlay}" />
            </Grid>
        </Grid>
    </Viewbox>
</DataTemplate>

---------------------------------------------------------------

<Style x:Key="HorizontalWrapView"
       TargetType="ListView">
    <Setter Property="Template"
            Value="{StaticResource ListViewNoScroll}" />
    <Setter Property="ItemsPanel"
            Value="{StaticResource HorizontalWrapPanel}" />
    <Setter Property="SelectionMode"
            Value="None" />
    <Setter Property="IsItemClickEnabled"
            Value="True" />
    <Setter Property="MaxWidth"
            Value="{StaticResource MaxContentWidth}" />
</Style>

-----------------------------------------------

<ControlTemplate x:Key="ListViewNoScroll">
    <ItemsPresenter />
</ControlTemplate>

------------------------------------------------
<ItemsPanelTemplate x:Key="HorizontalWrapPanel">
    <WrapGrid Orientation="Horizontal"
              Margin="{StaticResource ListMargin}" />
</ItemsPanelTemplate>

输出：

这个 dataTemplate 是具有 WrapGrid 样式的列表视图。每个网格都在一个单独的视图框中。

Answer 1

您使用了DataTemplate，这意味着您正在尝试使用项目控件（ListView 或GridView）显示数据。您面临的问题不是视图框问题。这是ItemsContainer 问题。这里的问题是ItemsContainer 接受DataTemplate 并排列来自ItemSource 的所有项目并以相同的格式排列它们（由ItemsWrapPanel 处理）

---

如何解决这样的问题？

您只需向您的ItemsControl 提供VariableSizedGrid。我将考虑listview，但GridView 可能会为您提供您可能感兴趣的渲染类型，只需将ListView 替换为GridView，您就会坚如磐石。下面是代码：

 <ListView.ItemsPanel>
     <ItemsPanelTemplate>
         <!-- 
         or you can do this if you want horizontal scrolling
         <VariableSizedWrapGrid Orientation="Horizontal"/>
         -->
         <VariableSizedWrapGrid/>
     </ItemsPanelTemplate>
 </ListView.ItemsPanel>
 <ListView.GroupStyle>
     <GroupStyle>
         <GroupStyle.Panel>
             <ItemsPanelTemplate>
                  <VariableSizedWrapGrid ItemHeight="250" ItemWidth="250" Margin="10"/>
             </ItemsPanelTemplate>
         </GroupStyle.Panel>
     </GroupStyle>
 </ListView.GroupStyle>

我在上面的代码中做了什么？

除了提供ItemsControl (ListView) 来使用VariableSizedWrapPanel 来托管或呈现您的DataTemplate 之外，我什么也没做。因此，通过这种方式，您的数据将重新排列，以适应您提供的或自适应实现的大小的整个区域。

编辑 - 1

在问题中更新代码后，您使用我提供的解决方案的最终代码将如下所示：

<ListView Grid.Row="9" x:Name="lstView" CanDragItems="True" ItemTemplate="{StaticResource lvTemplate}" ItemsSource="{Binding Details.data}" Style="{StaticResource HorizontalWrapView}" >
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid/>
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                    <ListView.GroupStyle>
                        <GroupStyle>
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid ItemHeight="250" ItemWidth="250" Margin="10"/>
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </ListView.GroupStyle>
                </ListView>

请注意：我将 Visual Studio 2017 用于面向 Windows 最低版本 10240 的 UWP 环境

---

编辑 - 2

我实际上只是用谷歌搜索了这个问题，发现ListView 不支持VariableSizedWrapPanel。您需要改用 GridView。有关这方面的更多信息，请访问 MSDN 上的 This Thread。

因此，您可以切换到GridView，您的问题将得到解决。

请注意：为了使代码正常工作，请将ListView 替换为GridView，您将能够看到您想要的结果。