WPF SkewTransform

Question

我想在WPF中创建类似的东西

为此，我写了以下几行：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Border Grid.Column="0"  BorderThickness="10" BorderBrush="Black" Margin="0,33,0,114"   >
        <Border.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform AngleY="-10"/>
                <RotateTransform/>
                <TranslateTransform Y="71.691"/>
            </TransformGroup>
        </Border.RenderTransform>
        <Border  Background="BurlyWood" />
    </Border>
    <Border Grid.Column="1"  BorderThickness="10" BorderBrush="Black" RenderTransformOrigin="0.5,0.5" Margin="0,39,0,107"  >
        <Border.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform AngleY="10"/>
                <RotateTransform/>
                <TranslateTransform Y="41.82"/>
            </TransformGroup>
        </Border.RenderTransform>
        <Border  Background="BurlyWood" />
    </Border>
</Grid>

但是问题是当我调整窗口大小时，左面板比右面板高，反之亦然。 像这样：

我怎样才能使它们彼此粘合？

Answer 1

我相信您应该使用RenderTransform以外的LayoutTransform。

倾斜的形状应实际适合可用区域，而LayoutTransform会做到这一点。

更新：以下XAML对我有用：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Border Grid.Column="0" BorderThickness="10" BorderBrush="Black" 
            Background="BurlyWood" Margin="0,50"
            >
        <Border.LayoutTransform>
            <TransformGroup>
                <SkewTransform AngleY="10"/>
                <ScaleTransform ScaleX="-1" />
                <RotateTransform/>
            </TransformGroup>
        </Border.LayoutTransform>
        <Border>
            <Border.LayoutTransform>
                <ScaleTransform ScaleX="-1" />
            </Border.LayoutTransform>
            <TextBlock TextWrapping="Wrap" Margin="10,20">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</TextBlock>
        </Border>
    </Border>
    <Border Grid.Column="1" BorderThickness="10" BorderBrush="Black"
            Background="BurlyWood"  Margin="0,50"
            >
        <Border.LayoutTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform AngleY="10"/>
                <RotateTransform/>
            </TransformGroup>
        </Border.LayoutTransform>
        <TextBlock TextWrapping="Wrap" Margin="10,20">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</TextBlock>
    </Border>
</Grid>

更新2：增加了边距。

更新3：修补内容的正确缩放。

Answer 2

使每个Border的垂直边距具有相同的厚度。 将边距应用于父Grid并完全删除Border边距可能更好。

每个Border的上边距部分不同。

http://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.margin%28v=vs.110%29.aspx