Как сделать пунктирную рамку на элементе Border в Silverlight?

Как сделать нижнюю границу этого элемента Border Silverlight красной пунктирной внутри красной сплошной линии?

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

.net c# border silverlight dotted-line
person Edward Tanguay    schedule 28.05.2010    source источник

Ответы (2)


arrow_upward
12
arrow_downward

Можете ли вы заменить границу сеткой и придать ей прямоугольник, который заполнит всю область?

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

StrokeDashArray можно использовать для рисования точек, но у Border нет такого свойства.

РЕДАКТИРОВАТЬ:

Поскольку я заметил, что вы ставите точки только на нижней границе, вы можете сделать что-то вроде этого

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

Отрегулируйте Offset двух средних GradientStop, чтобы отрегулировать ширину красной точки/тире. Вам также может потребоваться настроить конечную точку, чтобы она повторялась с желаемым интервалом.

person Stephan    schedule 28.05.2010
comment
Если вы не хотите, чтобы штрихи вдоль линии двигались при изменении ее размера, вы должны установить MappingMode="Absolute" на LinearGradientBrush. Возможно, вам также придется настроить некоторые другие параметры после внесения этого изменения. - person Drew Noakes; 21.12.2011

arrow_upward
6
arrow_downward

Ответ Стефана полезен. Однако, если вам нужна простая пунктирная линия, которая не растягивается при изменении размера, попробуйте следующий XAML:

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

Вот альтернатива вертикальной пунктирной линии:

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

По совпадению, если вы используете эту кисть на области шириной/высотой меньше 1 пикселя, то вы получите красивый узор в тонкую полоску.

person Drew Noakes    schedule 21.12.2011