Vous cherchez des conseils de mise en page WPF

Question

J'essaie de modéliser la mise en page qui est affichée dans ce image.

Si vous jetez un coup d'oeil, il a un certain nombre de boîtes de texte/cases à cocher/boutons, un couple de contrôles en diagonale, et un autre contrôle séparé (dans un contour rouge).

La capture d'écran inférieure montre ce que je voudrais arriver quand une case est cochée dans ce contrôle séparé.

Avez-vous des conseils sur la façon d'agencer et de manipuler ces portions en diagonale? J'ai essayé juste de faire tourner des textBlocks avec des bordures, mais les bordures restent rectangulaires, pas coupées comme dans l'image. J'ai aussi eu du mal à les positionner correctement. J'aurais aussi besoin que la largeur de ces sections diagonales soit liée à la partie checkbox/textBox de ce contrôle séparé dans la bordure rouge.

Mon seul choix consiste-t-il à faire pivoter textBlocks sans bordure et à dessiner les lignes moi-même à l'aide de chemins et pour l'expansion de largeur, le lier à une propriété de mon contrôle séparé?

Merci pour tout conseil.

Answer 1

Cela ressemblait à un défi amusant. Essayez le XAML suivant. Il ajustera automatiquement la taille des colonnes au fur et à mesure de l'expansion du contenu. La clé consiste à placer des éléments de canevas dans une grille pour permettre aux lignes des bordures de s'écouler dans les cellules adjacentes. Cela pourrait certainement être nettoyé avec des styles et sera un peu fragile si vous devez modifier les tailles, mais je pense que cela démontre l'approche:

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

J'espère que ça aide.

Answer 2

C'est certainement faisable avec des bordures et des blocs de texte, mais c'est fastidieux.

vous auriez beaucoup à jouer avec des marges négatives.

Vous pouvez le travailler avec des images au lieu des frontières, mais vous avez encore besoin de TextBlocks sur un angle à l'aide RenderTransform

J'approche sans aucun doute à l'aide d'une grille avec beaucoup de colonnes de largeur automatique, placez le facile les composants d'abord puis les plus délicats et font les rotations + les marges neg en dernier.

HTH.

Answer 3

En ce qui concerne la manipulation des éléments diagonaux, essayez de placer le TextBlock dans une bordure et de transformer la bordure avec une RotateTransform et une SkewTransform. Cela devrait vous aider à démarrer:

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