WPF中如何在文本外面加虛線外框

原文: WPF中如何在文本外面加虛線外框

    昨天突然被問到如何在wpf裡面給一段文本加個虛線外框，由于有一段時間沒玩wpf了，一時還真沒想出來，雖然大概有個思路，但是也不保證正确。今天回到家，閑着沒事情也就随便試驗了一下。

    首先來個框：

<Grid>
<Border HorizontalAlignment="Center" VerticalAlignment="Center"
Width="60" Height="30" CornerRadius="5"
BorderBrush="Blue" BorderThickness="3">
<TextBlock Text="aaa" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</Grid>
      

http://11011.net/software/vspaste

    看看效果：

    一個中規中矩的實線框，如何改造成我們想要的虛線框哪？

    第一個想到的就是修改Border的Brush，來看看這樣的xaml：

<Grid>
<Border HorizontalAlignment="Center" VerticalAlignment="Center"
Width="60" Height="30" CornerRadius="5"
BorderThickness="3">
<Border.BorderBrush>
<LinearGradientBrush SpreadMethod="Repeat" StartPoint="0,5" EndPoint="5,0" MappingMode="Absolute">
<LinearGradientBrush.GradientStops>
<GradientStop Color="Blue" Offset="0"/>
<GradientStop Color="Blue" Offset="0.2"/>
<GradientStop Color="Transparent" Offset="0.4"/>
<GradientStop Color="Transparent" Offset="0.6"/>
<GradientStop Color="Blue" Offset="0.8"/>
<GradientStop Color="Blue" Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
<TextBlock Text="aaa" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</Grid>
      

http://11011.net/software/vspaste

    看看效果圖：

    因為把Brush修改成斜線的漸變色（藍色->透明->藍色），是以總體上看起來就是個虛線，但是在圓角的效果取有些不怎麼如意。

    再換個思路，更換為使用DrawingBrush：

<Grid>
<Border HorizontalAlignment="Center" VerticalAlignment="Center"
Width="60" Height="30" CornerRadius="5"
BorderThickness="3">
<Border.BorderBrush>
<DrawingBrush>
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Pen>
<Pen Brush="Blue" Thickness="3">
<Pen.DashStyle>
<DashStyle Dashes="3,2,0,2"/>
</Pen.DashStyle>
</Pen>
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,60,30" RadiusX="3" RadiusY="3"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Border.BorderBrush>
<TextBlock Text="aaa" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</Grid>
      

http://11011.net/software/vspaste

    利用Pen的DashStyle可以輕易的實作點劃的虛線圖，當然也可以輕易實作點點劃的虛線，DashStyle的規則為：實線長度，空線長度，實線長度，空線長度…，而實作長度如果為0，就代表點。

    不過細看這張圖的話，還是會發現一些不和諧的東西，圓角從外側看，确實是圓的，但是仔細看内側的話，發現其内側竟然是個直角。。。

    好吧，換個思路，放棄Border了，直接用Canvas，加Rectange:

<Grid>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Width="60" Height="30">
<Canvas>
<Rectangle RadiusX="5" RadiusY="5" Width="60" Height="30"
Stroke="Blue" StrokeDashArray="5,2,1,2" StrokeThickness="2"/>
</Canvas>
<TextBlock Text="aaa" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Grid>
      

http://11011.net/software/vspaste

    看起來還不錯，确實是圓角的，不過這後面兩個方案也有個明顯的缺點，就是無法随着文本框内容的增長而動态的繪制。當然可以用Binding來進一步消除這個問題：

<Grid>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Width="60" Height="30" x:Name="g">
<Canvas>
<Rectangle RadiusX="5" RadiusY="5"
Width="{Binding ElementName=g, Path=Width}"
Height="{Binding ElementName=g, Path=Height}"
Stroke="Blue" StrokeDashArray="5,2,1,2" StrokeThickness="2"/>
</Canvas>
<TextBlock Text="aaa" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Grid>
      

http://11011.net/software/vspaste

    效果圖：

    看起來還不錯，不過這個方案還是存在問題的，如果容器Grid本身是自增長的，那麼杯具就開始了：

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

http://11011.net/software/vspaste

    可以發現，Grid使用了自增長的方式，Binding也隻能獲得錯誤的Width和Height，也就是0，不過别擔心，WPF還提供了ActualWidth和ActualHeight：

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

http://11011.net/software/vspaste

    哈哈，圓滿達成目标。