Stile un bordo con un colore del pennello diverso per ogni angolo

Question

Ho creato una risorsa statica che definisce il bordo di un elemento specifico nel mio xaml, ma non riesco a trovare un buon modo per definire un colore unico per ciascun lato!

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> 

Ma voglio definire un colore per ogni lato del confine, e alla fine anche uno spessore di frontiera diverso.

Qualsiasi buona tecnica là fuori a fare questo?

Answer 1

sembra molto hacky, ma si potrebbe definire i confini entro i confini, e fare solo 1 lato hanno uno spessore. Ad esempio

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

darebbe un bordo verde sul fondo e un bordo blu a destra. Ma non è il pezzo più bello di Xaml.

Answer 2

non c'è un modo semplice per farlo senza scrivere il proprio controllo o sottoclasse di frontiera

Answer 3

è possibile disporre di un DockPanel e può inserire 4 bordi interni, ciascuno collegato a un lato diverso. come:

<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

Se si utilizza una griglia si può avere sovrapposizione di frontiera gli uni sugli altri per ottenere lo stesso effetto. Basta impostare lo spessore del bordo del colore del bordo che si desidera visualizzare e avere l'altro spessore del bordo essere 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> 

Questo vi darà un bordo verde a sinistra, bordi superiore e giuste, ma un bordo rosso al bordo inferiore della cella della griglia.

Answer 5

Un'altra soluzione utilizzando una frontiera ed una VisualBrush, che consente l'impostazione del Border CornerRadius e BorderThickness:

<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 griglia è necessaria per evitare che le punte dei percorsi dei triangoli a "far passare" in confine .
• Il Path.Name può essere utilizzato per DataBinding o l'impostazione del colore dal codice retrostante.