如何在 Xamarin 窗体中使用全宽矩形裁剪网格

Question

我正在尝试为 Xamarin 表单中的图像剪辑或创建圆角。一切都按预期工作，但我不知道如何让网格矩形占据整个宽度。现在宽度是静态的。

<Grid Grid.Row="2" HeightRequest="400" RowDefinitions="300,100" Margin="10,0">
                            <sh:Shadows Grid.Row="0" Grid.RowSpan="2">
                                <sh:Shadows.Resources>
                                    <Style TargetType="sh:Shadows">
                                        <Setter Property="IsClippedToBounds" Value="False"/>
                                        <Setter Property="CornerRadius" Value="10"/>
                                        <Setter Property="Shades">
                                            <Setter.Value>
                                                <sh:ShadeStack>
                                                    <sh:Shade BlurRadius="5" Offset="0,5" Color="{DynamicResource ThemeComplementary}" />
                                                </sh:ShadeStack>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </sh:Shadows.Resources>
                                <Frame Grid.Row="0" Grid.RowSpan="2" Padding="0" CornerRadius="10" HasShadow="False" IsClippedToBounds="True"/>
                            </sh:Shadows>
                            <Grid Grid.Row="0" IsClippedToBounds="True">
                                <Image Source="{Binding DailySupplicationBackgroundImageLink, Converter={StaticResource StringToImageSourceConverter}}" 
                                       HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill">
                                </Image>
                                <Grid.Clip>
                                    <RoundRectangleGeometry Rect="0,0,200,300" CornerRadius="10,10,0,0"/>
                                </Grid.Clip>
                            </Grid>
                            <Grid Grid.Row="1" IsClippedToBounds="True">
                                <Label Grid.Row="0" Margin="10,0" Text="Some Text here"/>
                            </Grid>
                        </Grid>

我希望仅从设置在内部网格中的两侧对图像进行舍入，如下所示。

<Grid Grid.Row="0" IsClippedToBounds="True">
                                <Image Source="{Binding DailySupplicationBackgroundImageLink, Converter={StaticResource StringToImageSourceConverter}}" 
                                       HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill">
                                </Image>
                                <Grid.Clip>
                                    <RoundRectangleGeometry Rect="0,0,200,300" CornerRadius="10,10,0,0"/> // Set Fill Width
                                </Grid.Clip>
                            </Grid>

这工作正常，但静态宽度为 Rect。我希望实现以下目标。

我知道有 Pancake 这样的软件包，但我觉得没有必要使用那个软件包。

Answer 1

终于从代码背后解决了。我没有剪裁网格，而是设法剪裁图像本身。我仍然有兴趣了解如何在 XAML 而不是代码隐藏中执行相同的操作。我在下面添加了 Page SizeChanged 事件来处理方向。

private void MydayPage_SizeChanged(object sender, EventArgs e)
        {
            image.Clip = new Xamarin.Forms.Shapes.RoundRectangleGeometry(new CornerRadius(10, 10, 0, 0), 
                new Rectangle
            {
                Width = Width-20,
                Height = 300,
                X = 0,
                Y = 0
            });
        }

如何在 Xamarin 窗体中使用全宽矩形裁剪网格

How to Clip Grid with Full Width Rectangle in Xamarin Form

xamarin.ios

xamarin.android

xamarin

xamarin.forms