Tạo đường viền với màu cọ khác nhau cho mỗi góc

Question

Tôi đã tạo tài nguyên tĩnh xác định đường viền của một mục cụ thể trong xaml của tôi, nhưng tôi không thể tìm được cách tốt để xác định màu duy nhất cho mỗi bên!

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> 

Nhưng tôi muốn xác định một màu cho mỗi bên của biên giới, và cuối cùng cũng có độ dày Border khác nhau.

Bất kỳ kỹ thuật tốt nào có thể thực hiện việc này?

Answer 1

vẻ rất hacky, nhưng bạn có thể xác định biên giới trong phạm vi biên giới, và chắc chỉ có 1 bên có một độ dày. Ví dụ:

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

sẽ cung cấp đường viền màu lục ở phía dưới và đường viền màu xanh ở bên phải. Không phải là mảnh Xaml đẹp nhất.

Answer 2

không có cách nào dễ dàng để làm điều này mà không cần viết kiểm soát của riêng bạn hoặc subclassing biên giới

Answer 3

bạn có thể có DockPanel và có thể đặt 4 Đường viền bên trong, mỗi thanh được gắn vào mặt khác. như:

<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

Nếu bạn sử dụng một lưới bạn có thể có lớp phủ Border vào nhau để đạt được cùng ảnh hưởng. Chỉ cần thiết lập độ dày biên giới của màu đường viền bạn muốn hiển thị và có độ dày biên giới khác được 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> 

này sẽ cung cấp một biên giới màu xanh lá cây ở bên trái, phía trên và biên giới đúng, nhưng một biên giới Hồng đến đường viền dưới cùng của ô lưới.

Answer 5

Một giải pháp sử dụng một biên giới và một VisualBrush, cho phép thiết lập của Border CornerRadius và 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> 

• Các Lưới là cần thiết để ngăn chặn những lời khuyên của Paths tam giác để "đẩy qua" vào biên giới .
• Đường dẫn.Name có thể được sử dụng cho DataBinding hoặc đặt màu từ mã phía sau.