我想模擬顯示在這個image中的佈局。尋找一些WPF佈局的建議
如果你看一下，它有一些文本框/複選框/按鈕，幾個對角線控件和另一個單獨的控件（紅色輪廓）。
底部的屏幕截圖顯示了當在單獨的控件中檢查複選框時我想要發生的事情。
有關如何佈置並處理這些對角線部分的任何提示？我試着只是旋轉帶有邊框的textBlocks，但邊框保持矩形，而不是像圖像中那樣截斷。我也遇到了一些讓他們正確定位的麻煩。我還需要將這些對角線部分的寬度以某種方式綁定到紅色邊框中該單獨控件的複選框/文本框部分。
是我唯一的選擇旋轉無邊界textBlocks和自己使用路徑繪製線和擴展的寬度，綁定到我的單獨控制的一些屬性？
感謝您的任何建議。
這看起來像一個有趣的挑戰。嘗試下面的XAML。它會在內容擴展時自動調整列的大小。關鍵是將一些畫布元素放置在網格中，以允許邊框的線條流入相鄰的單元格。這當然可以清理一些風格，將是一個有點脆弱，如果你需要調整大小，但我認爲這表明了辦法：
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ButtonStyleTestApp.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Grid x:Name="LayoutRoot" Background="#FF44494D" SnapsToDevicePixels="True">
<Grid.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</Grid.Resources>
<Grid Background="#DDD">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition MinWidth="30" Width="Auto"/>
<ColumnDefinition MinWidth="30" Width="Auto"/>
<ColumnDefinition MinWidth="30" Width="Auto"/>
<ColumnDefinition MinWidth="30" Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Border BorderThickness="1 1 0 1" BorderBrush="#888" Grid.Column="0" Grid.Row="1">
<TextBox Margin="10 5" VerticalAlignment="Center"/>
</Border>
<Border BorderThickness="1 1 0 1" BorderBrush="#888" Grid.Column="1" Grid.Row="1">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<CheckBox x:Name="CheckBox1" Margin="5" VerticalAlignment="Center"></CheckBox>
<TextBox Visibility="{Binding IsChecked, ElementName=CheckBox1, Converter={StaticResource BooleanToVisibilityConverter}}" Width="100" Margin="5" VerticalAlignment="Center"/>
</StackPanel>
</Border>
<Border BorderThickness="1 1 0 1" BorderBrush="#888" Grid.Column="2" Grid.Row="1">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<CheckBox x:Name="CheckBox2" Margin="5" VerticalAlignment="Center"></CheckBox>
<TextBox Visibility="{Binding IsChecked, ElementName=CheckBox2, Converter={StaticResource BooleanToVisibilityConverter}}" Width="100" Margin="5" VerticalAlignment="Center"/>
</StackPanel>
</Border>
<Border BorderThickness="1 1 0 1" BorderBrush="#888" Grid.Column="3" Grid.Row="1">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<CheckBox x:Name="CheckBox3" Margin="5" VerticalAlignment="Center"></CheckBox>
<TextBox Visibility="{Binding IsChecked, ElementName=CheckBox3, Converter={StaticResource BooleanToVisibilityConverter}}" Width="100" Margin="5" VerticalAlignment="Center"/>
</StackPanel>
</Border>
<Border BorderThickness="1" BorderBrush="#888" Grid.Column="4" Grid.Row="1">
<Button Margin="3" FontSize="10" VerticalAlignment="Center" Width="40">Click</Button>
</Border>
<Canvas Grid.Column="1">
<Grid ClipToBounds="False" Canvas.Top="30">
<Border
BorderBrush="#888"
BorderThickness="0 1 0 0"
RenderTransformOrigin="0 0"
Height="20"
Width="100"
Margin="0 0 0 -80">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-45"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<TextBlock VerticalAlignment="Center" TextAlignment="Left" Margin="21 1 1 1" FontSize="11">
Testing 1
</TextBlock>
</Border>
</Grid>
</Canvas>
<Canvas Grid.Column="2">
<Grid ClipToBounds="False" Canvas.Top="30">
<Border
BorderBrush="#666"
BorderThickness="0 1 0 0"
RenderTransformOrigin="0 0"
Height="20"
Width="100"
Margin="0 0 0 -80">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-45"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<TextBlock VerticalAlignment="Center" TextAlignment="Left" Margin="21 1 1 1" FontSize="11">
Testing 2
</TextBlock>
</Border>
</Grid>
</Canvas>
<Canvas Grid.Column="3">
<Grid ClipToBounds="False" Canvas.Top="30">
<Border
BorderBrush="#666"
BorderThickness="0 1 0 0"
RenderTransformOrigin="0 0"
Height="20"
Width="100"
Margin="0 0 0 -80">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-45"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<TextBlock VerticalAlignment="Center" TextAlignment="Left" Margin="21 1 1 1" FontSize="11">
Testing 3
</TextBlock>
</Border>
</Grid>
</Canvas>
<Canvas Grid.Column="4">
<Grid ClipToBounds="False" Canvas.Top="30">
<Border
BorderBrush="#666"
BorderThickness="0 1 0 0"
RenderTransformOrigin="0 0"
Height="20"
Width="100"
Margin="0 0 0 -80">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-45"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
</Border>
</Grid>
</Canvas>
</Grid>
</Grid>
</Window>
我希望它能幫助。
它絕對可以用邊框和文本塊來操作，但它很乏味。
你必須玩很多負邊距。
你可以工作了與圖像，而不是邊界，但你仍然在使用的RenderTransform
需要在一個角度的TextBlocks我使用網格有很多寬度自動列的絕對接近它，將容易組件先是棘手的，然後做旋轉+負邊距。
HTH。
就處理對角線元素而言，嘗試將TextBlock放在邊框內，並使用RotateTransform和SkewTransform轉換邊框。這應該讓你開始：
<Grid HorizontalAlignment="Left" Height="100" Margin="64,60.5,0,0" VerticalAlignment="Top" Width="100" Background="Blue">
<Border BorderBrush="Black" BorderThickness="1" Margin="20,25.5,20.5,41.5" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleY="20"/>
<RotateTransform Angle="90"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<TextBlock TextWrapping="Wrap" Text="TextBlock" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="180"/>
<TranslateTransform/>
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
</Border>
</Grid>
太棒了！這真的很有幫助。非常感謝！ – Flack 2010-11-11 15:43:21