WPF SkewTransform

我想在WPF創建這樣的WPF SkewTransform

enter image description here

要做到這一點我寫這幾行：

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

但問題是，當我調整窗口大小，左側面板高於右側面板，反之亦然。像這樣： enter image description here

我該如何讓他們堅持彼此？

來源

2014-01-06 Mehrdad Kamelzadeh

可能出現問題是由於在RenderTransformOrigin.You第一邊界沒有明確的RenderTransform原點。 –

我相信你應該使用比其他的RenderTransform的LayoutTransform。

歪斜的形狀實際上應該適合可用區域，並且LayoutTransform可以做到這一點。

UPDATE：下面的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：增加保證金。

UPDATE 3：正確縮放內容的補丁。

enter image description here