Ищете советы по компоновке WPF

Question

Я пытаюсь смоделировать макет, который отображается в этом image.

Если вы посмотрите, у него есть несколько текстовых полей/флажков/кнопок, несколько диагональных элементов управления и еще один отдельный элемент управления (в красном контуре).

Нижний снимок экрана показывает, что я хотел бы произойти, когда флажок установлен в этом отдельном элементе управления.

Любые советы о том, как выложить это и обработать эти диагональные участки? Я пробовал просто поворачивать textBlocks с границами, но затем границы остаются прямоугольными, а не обрезаны, как на изображении. У меня также были проблемы с правильной позицией. Мне также понадобилась бы ширина этих диагональных секций, чтобы как-то привязываться к элементу checkbox/textBox этого отдельного элемента управления на красной границе.

Является ли мой единственный выбор, чтобы повернуть без полей textBlocks и нарисовать линии, используя Paths, и для расширения ширины привяжите его к некоторому свойству моего отдельного элемента управления?

Спасибо за любой совет.

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

Это определенно выполнимо с границами и текстовыми блоками, но это утомительно.

вам придется играть с отрицательными полями.

Вы могли бы работать его с изображениями вместо границ, но вы по-прежнему нуждаются в TextBlocks на угол, используя 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>