Question

我有以下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代码中，我使用了Skew和Translate转换，但矩形在两侧都是Skewed，而且是向左平移并超出父元素的边界。

我怎么能这样做Rectangle只会在右侧倾斜？

Answer 1

你需要剪辑它。

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

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

或者，订阅您的根Loading的{{1}}事件，并使用Composition中新的Grid API。这样您根本不需要手动更新它。

InsetClip

UWP自定义矩形形状

1 个答案: