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