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

Posted 2023-02-19

【中文标题】Viewbox 里面只能包含方形 Grid 吗？

【英文标题】：Can the Viewbox only contain square Grid inside of it?

【发布时间】：2017-11-30 13:55:19

【问题描述】：

我只想知道 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 样式的列表视图。每个网格都在一个单独的视图框中。

【问题讨论】：

我已经测试了您的代码，但无法重现您的问题。包含矩形网格的视图框在我这边没有拉伸为正方形。您能否提供有关您的代码的更多详细信息，例如WrapGrid 的样式。

我已经添加了所有与listview相关的代码sn-ps。请检查并帮助我。我想使网格成为矩形，上下没有多余的边距。

【参考方案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，您将能够看到您想要的结果。

【讨论】：

哦，伙计，您的解决方案看起来很有希望.. 立即检查，我会在一段时间内告诉您我从中得到了什么.. 无论如何，谢谢..

我在使用“VariableSizedWrapGrid”时遇到错误：未指定的错误。您用于控件的面板不允许作为控件的 ItemsPanel。

你用的是什么ItemsControl？

请重新检查问题。我已经添加了与 listview 相关的所有代码，请帮忙，我想制作网格矩形，上下边没有额外的边距。

在某些时候尝试一下，但同时您能告诉我为什么您使用的是 GroupStyle 吗？我想要一个矩形网格，所以 ItemHeight 和 ItemWidth 等于 250 将使它成为一个正方形。不是吗？