WPF SkewTransform

Question

I want to create something like this in WPF

To do that I have written these lines:

<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>

But the problem is when I resize the window, the left panel goes upper than the right panel and vise-versa. like this:

How can I make them stick to each other?

Answer 1

I believe you should use the LayoutTransform other than the RenderTransform.

The skewed shapes should fit actually the available area, and the LayoutTransform does that.

UPDATE: the below XAML works for me:

<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>

UPDATE 2: added the margin.

UPDATE 3: patch for the correct scaling of the content.

Answer 2

Make the vertical margins the same thickness for each Border . It is probably better to apply the margins to the parent Grid and delete the Border margins completely.

The Top margin component is different for each Border .

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