2010-05-28 16 views
7

Làm cách nào để tạo đường viền dưới cùng của phần tử Đường viền Silverlight này có màu đỏ chấm bên trong một đường màu đỏ rắn?Làm cách nào để tạo đường viền chấm chấm trên phần tử Đường viền trong Silverlight?

Border border = new Border(); 
border.CornerRadius = new CornerRadius(5); 
border.BorderThickness = new Thickness(0, 0, 0, 1); 
border.BorderBrush = new SolidColorBrush(Colors.Red); 

Trả lời

12

Bạn có thể thay đường viền bằng lưới và đặt hình chữ nhật lấp đầy toàn bộ khu vực không?

<Rectangle Stretch="Fill" RadiusX="10" RadiusY="10" StrokeDashArray="10, 2" Stroke="Black" Fill="White" /> 

StrokeDashArray có thể được sử dụng để vẽ nó chấm nhưng đường viền không có thuộc tính như vậy.

EDIT:

Kể từ khi tôi nhận thấy bạn đang chỉ nằm rải rác ở biên giới phía dưới bạn có thể làm một cái gì đó như thế này

<Border Width="100" Height="100" Background="Blue" BorderThickness="0,0,0,1"> 
    <Border.BorderBrush> 
     <LinearGradientBrush StartPoint="0,0" EndPoint=".2,0" SpreadMethod="Repeat" > 
      <GradientStopCollection> 
       <GradientStop Color="Transparent" Offset="0" /> 
       <GradientStop Color="Transparent" Offset="0.3" /> 
       <GradientStop Color="Red" Offset="0.3" /> 
       <GradientStop Color="Red" Offset="0.6" /> 
       <GradientStop Color="Transparent" Offset="0.6" /> 
       <GradientStop Color="Transparent" Offset="1" /> 
      </GradientStopCollection> 
     </LinearGradientBrush> 
    </Border.BorderBrush> 
</Border> 

Điều chỉnh Offset của giữa hai GradientStop để điều chỉnh độ rộng của dấu chấm màu đỏ/dấu gạch ngang. Bạn cũng có thể cần phải điều chỉnh điểm cuối để làm cho nó lặp lại theo khoảng thời gian bạn muốn.

+2

Nếu bạn không muốn dấu gạch ngang dọc theo dòng để di chuyển khi được đổi kích cỡ, bạn nên đặt 'MappingMode =" Absolute "' trên 'LinearGradientBrush'. Bạn cũng có thể phải tinh chỉnh một số thông số khác sau khi thực hiện thay đổi đó. –

6

Câu trả lời của Stephan rất hữu ích. Tuy nhiên, nếu bạn muốn có một đường chấm chấm đơn giản mà không căng về khi nó được thay đổi kích cỡ, hãy thử XAML này:

<!-- Horizontal dotted line --> 
<Border HorizontalAlignment="Stretch" Height="1" BorderThickness="0,0,0,1"> 
    <Border.BorderBrush> 
    <LinearGradientBrush StartPoint="0,0" EndPoint="2,0" 
         SpreadMethod="Repeat" MappingMode="Absolute"> 
     <GradientStop Color="Transparent" Offset="0" /> 
     <GradientStop Color="Transparent" Offset="0.499" /> 
     <GradientStop Color="#999" Offset="0.5" /> 
    </LinearGradientBrush> 
    </Border.BorderBrush>        
</Border> 

Dưới đây là một thay thế cho một dòng rải rác dọc:

<!-- Vertical dotted line --> 
<Border VerticalAlignment="Stretch" Width="1" BorderThickness="0,0,1,0"> 
    <Border.BorderBrush> 
    <LinearGradientBrush StartPoint="0,0" EndPoint="0,2" 
         SpreadMethod="Repeat" MappingMode="Absolute"> 
     <GradientStop Color="Transparent" Offset="0" /> 
     <GradientStop Color="Transparent" Offset="0.499" /> 
     <GradientStop Color="#999" Offset="0.5" /> 
    </LinearGradientBrush> 
    </Border.BorderBrush>        
</Border> 

Thật trùng hợp, nếu bạn sử dụng brush này trên một khu vực không rộng 1px/cao, sau đó bạn sẽ có được một mẫu hình sọc đẹp.