Настройте границу с другим цветом кисти для каждого угла

Я создал статический ресурс, определяющий границу определенного элемента в моем xaml, но я не могу найти хороший способ определить уникальный цвет для каждой стороны!

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>

Но я хочу определить один цвет для каждой стороны границы и, в конечном итоге, другую толщину границы.

Какие-нибудь хорошие методы там делают?

Ответы

Ответ 1

Кажется, очень хаки, но вы можете определить границы внутри границ и сделать только одну сторону толщиной. Например

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

дал бы зеленую границу на дне и синюю границу справа. Разве это не самая красивая часть Xaml.

Ответ 2

Другое решение, использующее одну Border и VisualBrush, позволяя установить параметр Border CornerRadius и 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>
  • Сетка необходима, чтобы концы треугольных контуров "проталкивались" в границу.
  • Path.Name может использоваться для DataBinding или установки цвета из кода.

Ответ 3

у вас может быть DockPanel и вы можете поместить в него 4 Borders, каждый состыковался с другой стороны. как:

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

Ответ 4

Если вы используете сетку, вы можете накладывать границы друг на друга для достижения такого же эффекта. Просто установите толщину границы цвета границы, которую вы хотите показать, а другая толщина границы будет 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>

Это даст зеленую границу в левой, верхней и правой границах, но красную границу с нижней границей ячейки сетки.

Ответ 5

нет простого способа сделать это, не создавая собственный элемент управления или подклассы