昨天我在《簡述WPF中的畫刷(Brush) 》中簡要介紹了WPF中的畫刷的使用。現在接着深入研究一下其中的ImageBrush。
如上文所述，ImageBrush是一種TileBrush，它使用ImageSource屬性來定義圖像作為畫刷的繪制內容。你可以控制圖像的縮放、對齊、鋪設方式。ImageBrush可用於繪制形狀、控件，文本等。
下面看看它的一些簡單應用：
首先看一下效果圖片：
先看看上圖的左邊部分：
圖1為原始圖片，圖2是將原始圖片作為Border的繪制畫刷的效果，圖3是將圖片應用於TextBlock的效果（為了演示，我增加了BitmapEffect效果）。
看看圖2的XAML代碼：
<Border BorderThickness="20,40,5,15" x:Name="borderWithImageBrush" Margin="11.331,178.215,157.086,117.315">
<Border.BorderBrush>
<ImageBrush ImageSource="summer.jpg" Viewport="0,0,1,1" />
</Border.BorderBrush>
<DockPanel>
<TextBlock DockPanel.Dock="Top" TextWrapping="Wrap" Margin="10">
<Run Text="使用ImageBrush繪制的邊框"/>
</TextBlock>
</DockPanel>
</Border>
（C#代碼略）
再看看圖3的XAML代碼：
<TextBlock FontWeight="Bold" FontSize="56pt" FontFamily="Arial"
Text="BrawDraw" x:Name="wordsWithImageBrush" Height="88.214" Margin="11.331,0,143.972,7.996" VerticalAlignment="Bottom">
<TextBlock.Foreground>
<ImageBrush ImageSource="Summer.jpg" />
</TextBlock.Foreground>
<TextBlock.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="Black" GlowSize="8" Noise="0" Opacity="0.6" />
</TextBlock.BitmapEffect>
</TextBlock>
淺藍色底部分為關鍵代碼，黃色底部分為增加的外發光特效（也就是Photoshop中常說的“輝光效果”）。
關鍵部分的C#代碼為：
TextBlock wordsWithImageBrush = new TextBlock();
// ...(其他定義wordsWithImageBrush屬性的代碼)
ImageBrush berriesBrush = new ImageBrush();
berriesBrush.ImageSource =
new BitmapImage(
new Uri(@"Summer.jpg", UriKind.Relative)
);
wordsWithImageBrush.Foreground = berriesBrush;
OuterGlowBitmapEffect glowEffect = new OuterGlowBitmapEffect();
glowEffect.GlowSize = 8;
glowEffect.GlowColor = Color.Black;
glowEffect.Noise = 0;
glowEffect.Opacity = 0.6;
wordsWithImageBrush.BitmapEffect = glowEffect;
再看看右邊部分：
圖4是使用了ImageBrush填充Ellipse的效果,這里使用了我的一個美女好友的圖片
。（相關代碼見下）
圖4的XAML代碼：
<Ellipse x:Name="ellipseWithImageBrush" Stroke="#FF000000" Height="150" Width="150">
<Ellipse.Fill>
<ImageBrush ImageSource="xian.png"/>
</Ellipse.Fill>
</Ellipse>
關鍵的C#代碼：
ImageBrush imgBrush = new ImageBrush();
imgBrush.ImageSource =
new BitmapImage(
new Uri(@"xian.png", UriKind.Relative)
);
ellipseWithImageBrush.Fill = imgBrush;
圖5使用了ImageBrush的鋪設方式屬性之后的效果。（具體代碼見下一篇文章《深入WPF中的圖像畫刷(ImageBrush)之2——ImageBrush的鋪設方式》）
圖6與圖3類似，不同的是使用了DropShadowBitmapEffect,同時還對文字大小進行了變形處理（垂直高度加高至128％）。
圖6的XAML代碼：
<TextBlock FontWeight="Bold" FontSize="56pt" TextWrapping="Wrap" FontFamily="Arial Black"
Text="Girl" x:Name="wordsWithGirlImageBrush" RenderTransformOrigin="0.5,0.5" Height="97.468" Margin="0,0,2.086,2.144" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="153.697">
<TextBlock.Foreground>
<ImageBrush ImageSource="xian.png" />
</TextBlock.Foreground>
<TextBlock.BitmapEffect>
<DropShadowBitmapEffect Color="Black" Direction="315" ShadowDepth="4" Softness="0.5"
Opacity="1.0"/>
</TextBlock.BitmapEffect>
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1.28"/>
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
（C#代碼略）
從上面例子中，我們可以思考一下，以前如果要在GDI+中實現文字的輝光效果、陰影效果，是不是需要寫非常多的C#代碼？現在，WPF已經不再麻煩，幾句代碼搞定！你是不是想將它們保存為圖片？如是，讀讀我以前寫的這篇BLOG吧：WPF中，如何使用圖像API進行繪制而不是XAML? 。