Question

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

如果你看一下，它有许多textBoxes / checkboxes / buttons，几个对角线控件和另一个单独的控件（红色轮廓）。

底部屏幕截图显示了在单独控件中选中复选框时我想要发生的事情。

有关如何铺设并处理这些对角线部分的任何提示？我尝试只旋转带有边框的textBlocks，但边框保持为矩形，而不是像图像中那样切断。让他们正确定位我也遇到了一些麻烦。我还需要将这些对角线部分的宽度以某种方式绑定到红色边框中该独立控件的复选框/ textBox部分。

我唯一的选择是旋转无边框的textBlocks并使用Paths自己绘制线条并扩展宽度，将它绑定到我的单独控件的某个属性？

感谢您的任何建议。

Answer 1

这看起来很有趣。尝试下面的XAML。随着内容的扩展，它会自动调整列的大小。关键是将一些画布元素放在网格中，以允许边框线条流入相邻的单元格。这肯定可以用一些样式清理，如果你需要调整尺寸，它会有点脆弱，但我认为它证明了这种方法：

alt text

<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放在Border中，并使用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>

3 个答案: