Diseñe un borde con un color de pincel diferente para cada esquina

Question

He creado un recurso estático que define el borde de un elemento específico en mi xaml, pero no encuentro una buena manera de definir un color único para cada lado.

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> 

Pero quiero definir un color para cada lado de la frontera, y eventualmente también un espesor de borde diferentes.

¿Alguna buena técnica por ahí haciendo esto?

Answer 1

parece muy hacky, pero se podría definir las fronteras dentro de las fronteras, y que sólo el 1 lado tiene un espesor. Por ejemplo,

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

daría un borde verde en la parte inferior y un borde azul en la derecha. Sin embargo, no es la pieza más bonita de Xaml.

Answer 2

no hay manera fácil de hacer esto sin tener que escribir su propio control o la subclasificación frontera

Answer 3

puede tener un DockPanel y puede poner 4 bordes dentro, cada uno acoplado a un lado diferente. como:

<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 utilizar una cuadrícula que puede tener superposición de Frontera entre sí para lograr el mismo efecto. Sólo hay que establecer el grosor del borde del color del borde que desea mostrar y tener el otro grosor del borde sea 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> 

Esto le dará un borde verde a la izquierda, arriba y bordes derecho, pero un borde rojo a la borde inferior de la celda de Grilla.

Answer 5

Otra solución usando una frontera y una VisualBrush, permitiendo el establecimiento de la frontera CornerRadius y 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> 

• se necesita la red para evitar que las puntas de los Caminos de triángulo para "sacar adelante" en la frontera .
• El Path.Name se puede utilizar para DataBinding o para establecer el color del código.