WEB开发技术

silverlight制作虚线的边框

<Grid>
<Grid HorizontalAlignment=”Center” VerticalAlignment=”Center” x:Name=”g”>
<Canvas>
<Rectangle RadiusX=”5″ RadiusY=”5″
Width=”{Binding ElementName=g, Path=ActualWidth}”
Height=”{Binding ElementName=g, Path=ActualHeight}”
Stroke=”Blue” StrokeDashArray=”5,2,1,2″ StrokeThickness=”2″/>
</Canvas>
<TextBlock Margin=”10,7,10,7″ Text=”aaa” HorizontalAlignment=”Center” VerticalAlignment=”Center”/>
</Grid>
</Grid>

效果图:

 

image

公共样式:

 1 <Style TargetType="ContentControl" x:Key="myBorder">
 2 
 3 <Setter Property="Template">
 4 
 5 <Setter.Value>
 6 
 7 <ControlTemplate>
 8 
 9 <Grid x:Name="g"
10 
11 Background="{TemplateBinding ContentControl.Background}"
12 
13 Width="{TemplateBinding ContentControl.Width}"
14 
15 Height="{TemplateBinding ContentControl.Height}">
16 
17 <Canvas>
18 
19 <Rectangle RadiusX="5" RadiusY="5"
20 
21 Width="{Binding ElementName=g, Path=ActualWidth}"
22 
23 Height="{Binding ElementName=g, Path=ActualHeight}"
24 
25 Stroke="{TemplateBinding ContentControl.BorderBrush}"
26 
27 StrokeDashArray="5,2,1,2"
28 
29 StrokeThickness="{TemplateBinding ContentControl.BorderThickness}"/>
30 
31 </Canvas>
32 
33 <ContentPresenter Margin="5" Content="{TemplateBinding ContentControl.Content}"/>
34 
35 </Grid>
36 
37 </ControlTemplate>
38 
39 </Setter.Value>
40 
41 </Setter>
42 
43 </Style>

http://www.cnblogs.com/sosoft/

使用示例:

<ContentControl Margin=”10″ HorizontalAlignment=”Center” VerticalAlignment=”Center”

BorderThickness=”2″ BorderBrush=”Blue” Style=”{StaticResource myBorder}”>

<TextBlock Text=”abc”/>

</ContentControl>

未经允许不得转载:WEB2.0开发设计 » silverlight制作虚线的边框
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们