web-dev-qa-db-fra.com

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

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 bordure et éventuellement une épaisseur de bordure différente.

Des bonnes techniques pour faire ça?

wpfxamlcolorsborder
34
code-zoop

Semble très hacky, mais vous pouvez définir des bordures à l'intérieur des bordures et faire en sorte qu'un seul côté ait 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 en bas et une bordure bleue à droite. Ce n'est pas le plus joli morceau de Xaml.

51
MoominTroll

Une autre solution utilisant une bordure et un VisualBrush, permettant de définir les Borders CornerRadius et 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 grille est nécessaire pour empêcher les pointes des chemins du triangle de "pénétrer" dans la bordure.
  • Les Path.Name peuvent être utilisés pour DataBinding ou pour définir la couleur du code derrière.
22
eriksmith200

vous pouvez avoir un DockPanel et pouvez y mettre 4 bordures, chacune ancrée d'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>
9
viky

Si vous utilisez une grille, vous pouvez avoir une superposition de bordures les unes sur les autres pour obtenir le même effet. Définissez simplement l'épaisseur de bordure de la couleur de bordure que vous souhaitez afficher et définissez l'autre épaisseur de bordure sur 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 aux bordures gauche, supérieure et droite, mais une bordure rouge à la bordure inférieure de la cellule de la grille.

4
amurra

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

2
Rob Fonseca-Ensor