寻找一些 WPF 布局建议

Question

我正在尝试对图像中显示的布局进行建模。

如果你看一下，它有许多文本框/复选框/按钮、几个对角控件和另一个单独的控件（红色轮廓）。

底部的屏幕截图显示了在该单独的控件中选中复选框时我希望发生的情况。

关于如何布局和处理这些对角部分有什么建议吗？我尝试仅旋转带边框的文本块，但边框保持为矩形，而不是像图像中那样被切断。我在让它们正确定位方面也遇到了一些麻烦。我还需要将这些对角线部分的宽度以某种方式绑定到红色边框中该单独控件的复选框/文本框部分。

我唯一的选择是旋转无边框文本块并使用路径自己绘制线条，并且为了扩展宽度，将其绑定到我单独控件的某些属性吗？

感谢您的任何建议。

Answer 1

这看起来是一个有趣的挑战。尝试以下 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>

我希望它有帮助。

Answer 2

它绝对可以使用边框和文本块，但很乏味。

你必须经常承受负利润。

您可以使用图像而不是边框​​来解决它，但您仍然需要使用 rendertransform 将文本块放在一定角度上，

我肯定会使用具有许多宽度为 Auto 的列的网格来实现它，首先放置简单的组件，然后放置棘手的组件，然后执行最后是旋转+负边距。

HTH。

Answer 3

至于处理对角线元素，请尝试将 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>