代码之家 › 专栏 › 技术社区 › Konstantin Chsherbakov

UWP自定义矩形形状

windows-10-universal win-universal-app uwp xaml

1

Konstantin Chsherbakov · 技术社区 · 8 年前

我有以下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代码中的第二个矩形的形式与下面屏幕上的白色矩形类似。

如何使矩形只在右侧倾斜?

1 回复 | 直到 8 年前

1

2

Justin XL 8 年前

你需要它

您可以附加 RectangleGeometry 到你的根 Grid Rect 内部 SizeChanged 每当其宽度或高度更新时发生。

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

Loading 您的根事件 网格 InsetClip Composition

private void OnRootGridLoading(FrameworkElement sender, object args)
{
    var rootVisual = ElementCompositionPreview.GetElementVisual(Root);
    var clip = rootVisual.Compositor.CreateInsetClip();
    rootVisual.Clip = clip;
}