使用缩放视图填充网格单元

Posted 2023-02-26

【中文标题】使用缩放视图填充网格单元

【英文标题】：Fill a Grid Cell with a scaled View

【发布时间】：2019-06-04 06:57:36

【问题描述】：

我想用缩小的View 填充Grid 中的空间（Scale="0.5"）。假设我有一个三行两列的Grid，按比例缩小的视图应该像这样填充Grid.Row="1"Grid.Column="1"（红色轮廓）：

我遇到的问题是View 将按比例缩小，但它不会在网格中重新定位。对于网格的单元格实际有多大，前者的大小仍然占主导地位：

看到这个结果，我看到了两个问题：

缩放发生后不执行水平选项 网格单元高度未更新以适应缩放视图的新高度

正如您在第一张图片中看到的那样，我实现了按比例缩小并尊重Grid 的大小。但是，通过将带有硬编码值的View 翻译到正确的位置，这是一种非常 hacky 方式。因此，一旦我向此页面添加任何新视图，按比例缩小的View 的定位将是错误的。

这是我的（简化的）代码：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <!--Other Views...-->
    <CircularView 
        Grid.Row="3"
        Grid.Column="0"
    </CircularView>
    <Grid
        Grid.Row="3"
        Grid.Column="0"
        Grid.ColumnSpan="2"
        Scale="0.5"
        VerticalOptions="CenterAndExpand"
        HeightRequest="240"
        IsVisible="Binding HasTermine">
        <MyCustomView/>
    </Grid>
    <!--Other Views...-->
</Grid>

我正在使用ColumnSpan="2"，因此在使用Scale="0.5" 后我的宽度正好是一列，但这可能已经是错误的方法，我绝对不希望这样做。还尝试在缩放发生后将HeightRequest更改为120，但这也会缩短MyCustomView的高度。

用缩小的视图填充网格单元的最佳方法是什么？

---

示例存储库：

https://github.com/Zure1/ScaleSample/

【问题讨论】：

我不确定我是否关注这个，但是，在第 3 行，您只想让视图占据第二列？

另外（不相关），您是如何实现左侧边框的漂亮框架视图的？

@BrunoCaceiro 是的，我想实现第一张图片中显示的内容。我用 android/ios 的自定义效果实现了圆角（请注意，它在视图的右侧也是圆角的，而不仅仅是左侧）。如果您只希望一侧变圆，则必须在实际视图上放置另一个 Frame 以覆盖一侧的圆角 :)

可以分享一下xaml代码吗？不需要所有代码，只需要相关代码。

@JackHua-MSFT 添加代码

【参考方案1】：

我做了一些测试，但无法用缩小的视图填充 Grid Cell。

您可以在此处打开免费的 Xamarin 支持案例：supportforXamarin 以获得更多帮助并查找是否有任何解决方案。

我没有使用scaled down 视图，而是使用带有grid layout 的视图来实现与您类似的要求，我在此处上传了一个示例（基于您）：resizeView-xamarin.forms。你可以看看它，也许你可以从中找到一些想法。希望它对你有意义。