Style d'une bordure avec une couleur de pinceau différente pour chaque coin

Question

J'ai créé une ressource statique définissant la bordure d'un élément spécifique dans mon xaml, mais je ne trouve pas un bon moyen de définir une couleur unique pour chaque côté!

XAML:

<Border Style="{StaticResource SidePanelBorder}"> 
     <!-- rest of the xaml --> 
</Border> 

StaticResource:

<Style x:Key="SidePanelBorder"> 
    <Setter Property="Control.BorderBrush" Value="#FF363636" /> 
    <Setter Property="Control.BorderThickness" Value="1" /> 
</Style> 

Mais je veux définir une couleur pour chaque côté de la frontière, et éventuellement aussi une autre épaisseur de la bordure.

Toutes les bonnes techniques là-bas?

Answer 1

semble très hacky, mais vous pouvez définir les frontières à l'intérieur de frontières, et faire seulement 1 côté ont une épaisseur. Par exemple

<Border BorderThickness="0,0,0,10" BorderBrush="Green"> 
    <Border BorderThickness="0,0,10,0" BorderBrush="Blue"> 
     <Grid> 
      <Button>Hello</Button> 
     </Grid> 
    </Border> 
</Border> 

donnerait une bordure verte sur le fond et une bordure bleue vers la droite. Ce n'est pas le plus beau morceau de Xaml.

Answer 2

il n'y a pas moyen facile de le faire sans écrire votre propre contrôle ou sous-classement frontière

Answer 3

Vous pouvez avoir un DockPanel et y placer 4 bordures, chacune ancrée sur un côté différent. comme:

<DockPanel LastChildFill="true"> 
    <Border DockPanel.Dock="Left" Background="Red"/> 
    <Border DockPanel.Dock="Top" Background ="Blue"/> 
    <Border DockPanel.Dock="Right" Background ="Yellow"/> 
    <Border DockPanel.Dock="Bottom" Background ="Green"/> 
    <Grid> 
    ...........your control here 
    </Grid> 
</DockPanel> 

Answer 4

Si vous utilisez une grille, vous pouvez avoir la superposition de la frontière sur l'autre pour atteindre le même effet. Il suffit de régler l'épaisseur de la bordure de la couleur de la bordure que vous voulez montrer et avoir l'autre épaisseur de la bordure soit 0.

<UserControl.Resources> 
     <Style x:Key="GreenBorder" TargetType="Border"> 
      <Setter Property="BorderBrush" Value="Green" /> 
      <Setter Property="BorderThickness" Value="1,1,1,0" />   
     </Style> 
     <Style x:Key="RedBorder" TargetType="Border"> 
      <Setter Property="BorderBrush" Value="Red" /> 
      <Setter Property="BorderThickness" Value="0,0,0,1" /> 
     </Style> 
    </UserControl.Resources> 

    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="*" /> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="Auto" /> 
     </Grid.RowDefinitions> 
     <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource GreenBorder}"> 
      <!-- Content goes here --> 
     </Border> 
     <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource RedBorder}"> 
     </Border> 
    </Grid> 

Cela donnera une bordure verte à gauche, en haut et bordures droite, mais une bordure rouge à la bordure inférieure de la cellule Grid.

Answer 5

Une autre solution à l'aide d'une frontière et un VisualBrush, ce qui permet la mise en CornerRadius et BorderThickness de la frontière:

<Border BorderThickness="10" CornerRadius="10" HorizontalAlignment="Right" Height="150" VerticalAlignment="Bottom" Width="150" Margin="0,0,92.666,42.667"> 
    <Border.BorderBrush> 
     <VisualBrush> 
      <VisualBrush.Visual> 
       <Grid> 
        <Grid.RowDefinitions> 
         <RowDefinition/> 
         <RowDefinition/> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition/> 
         <ColumnDefinition/> 
        </Grid.ColumnDefinitions> 

        <Path x:Name="ColoredBorderLeft" Data="M0,0 L0,0 1,0.5 L1,0.5 0,1" Fill="Blue" Stretch="Fill" Grid.RowSpan="2"/> 
        <Path x:Name="ColoredBorderRight" Data="M1,0 L1,0 0,0.5 L0,0.5 1,1" Fill="Red" Stretch="Fill" Grid.Column="1" Grid.RowSpan="2"/> 
        <Path x:Name="ColoredBorderTop" Data="M0,0 L0,0 0.5,1 L0.5,1 1,0" Fill="Green" Stretch="Fill" Grid.ColumnSpan="2"/> 
        <Path x:Name="ColoredBorderBottom" Data="M0,1 L0,1 0.5,0 L0.5,0 1,1" Fill="Yellow" Stretch="Fill" Grid.Row="1" Grid.ColumnSpan="2"/> 
       </Grid> 
      </VisualBrush.Visual> 
     </VisualBrush> 
    </Border.BorderBrush> 
</Border> 

• La grille est nécessaire pour éviter que les pointes des triangles chemins pour « faire passer » dans la frontière .
• Le chemin d'accès peut être utilisé pour la liaison de données ou pour définir la couleur du code derrière.