UWP 自定义矩形形状

Posted 2023-02-22

【中文标题】UWP 自定义矩形形状

【英文标题】：UWP Custom rectangle shape

【发布时间】：2017-07-02 17:43:32

【问题描述】：

我有以下 XAML 代码：

<Grid>
    <toolkitControls:DropShadowPanel Style="StaticResource DefaultCardDropShadowEffect">
        <Grid CornerRadius="5" Background="Binding AccentColor" Padding="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <!-- Rectangle for border aroung the card -->
            <Rectangle Grid.RowSpan="3" Fill="Binding AccentColor" StrokeLineJoin="Round" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeDashCap="Round" StrokeDashArray="4" Stroke="White" StrokeThickness="2" RadiusX="5" RadiusY="5"/>
            <!-- Overflowing rectangle -->
            <Rectangle Grid.RowSpan="3" Margin="0,-2,0,-2" Fill="White" RenderTransformOrigin="0.5,0.5" AllowDrop="True">
                <Rectangle.RenderTransform>
                    <CompositeTransform SkewX="-25" TranslateX="-80"/>
                </Rectangle.RenderTransform>
            </Rectangle>

            <Grid HorizontalAlignment="Stretch" Padding="10" Margin="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <!-- Image and name layout -->
                <Grid VerticalAlignment="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Grid Visibility="Binding ImageSource, Converter=StaticResource NullToVisibilityConverter, ConverterParameter=true">
                        <Ellipse Fill="Orange" Width="45" Height="45"/>
                        <SymbolIcon Symbol="Accept" Foreground="White"/>
                    </Grid>
                    <Ellipse Visibility="Binding ImageSource, Converter=StaticResource NullToVisibilityConverter" Width="45" Height="45">
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="ms-appx:///Assets/Samples/SampleImage.png"/>
                        </Ellipse.Fill>
                    </Ellipse>
                    <TextBlock Grid.Column="1" Text="Binding CardName" VerticalAlignment="Center" FontSize="StaticResource BigTextSize" Padding="10,0,0,0"/>
                    <Button Grid.Column="2" HorizontalAlignment="Right" Padding="0" Margin="0" Width="20" Height="20" Style="StaticResource TiltableAccentButton">
                        <Button.ContentTemplate>
                            <DataTemplate>
                                <Viewbox Width="15" Height="15">
                                    <SymbolIcon Symbol="Edit" Foreground="White"/>
                                </Viewbox>
                            </DataTemplate>
                        </Button.ContentTemplate>
                    </Button>
                </Grid>

                <!-- Number layour -->
                <TextBlock Grid.Row="1" Text="Binding CardNumber" Margin="0,10,0,10" FontSize="24"/>
                <Grid Grid.Row="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="Binding CardHolderName" FontSize="StaticResource BigTextSize"/>
                    <TextBlock Grid.Column="1" Text="Binding CardExpireDate" FontSize="StaticResource BigTextSize"/>
                </Grid>
            </Grid>
        </Grid>
    </toolkitControls:DropShadowPanel>
</Grid>

我希望 XAML 代码中的第二个矩形具有类似于下一个屏幕上的白色的形式。

在当前的 XAML 代码中，我使用了倾斜和平移转换来完成它，但是矩形在两边都是倾斜的，而且向左平移并超出了父元素的边界。

我该怎么做才能使矩形仅在右侧倾斜？

【参考方案1】：

你需要剪辑它。

您可以在 XAML 中将 RectangleGeometry 附加到您的根 Grid，但您需要在 SizeChanged 事件中手动更新 Rect，只要其宽度或高度得到更新。

<Grid x:Name="Root" SizeChanged="OnRootGridSizeChanged">
    <Grid.Clip>
        <RectangleGeometry Rect="0, 0, WidthOfRoot, HeightOfRoot" />
    </Grid.Clip>

或者，订阅您的根Grid 的Loading 事件，并使用来自Composition 的新InsetClip API。这样你根本不需要手动更新它。

private void OnRootGridLoading(FrameworkElement sender, object args)

    var rootVisual = ElementCompositionPreview.GetElementVisual(Root);
    var clip = rootVisual.Compositor.CreateInsetClip();
    rootVisual.Clip = clip;

【讨论】：

为什么不用多边形而不是剪裁矩形？

@jsmyth886 这种方式更加灵活。您可以对其进行动画处理，更改圆角半径、角度等。