WPF – VisualBrush 劃刷 功能介紹

      在開發公司套裝軟體產品時，在 Windows平台 下公司團隊幾乎都採用 Windows Form 或 WPF兩個技術，今年的專案因為某些原因幾乎全部開始全部採用 WPF技術，當然研發過程也面臨了不同的技術適應期，但隨著專案的開發過程，團隊漸漸越來越喜愛WPF技術，因為不論在繪圖界面呈現，開發速度的產能，效益比逐漸明顯出來，尤其是在 XAML 語法的特性，明顯界面與程式邏輯分離的架構，程式相對乾淨了許多，今年下半年公司也因為某些因素，投入繪圖技術的研究，在WPF的支援下，許多客戶的要求都可以快速的開發因應…
      而今天我也想要分享WPF一個繪圖呈現的一個利器- VisualBrush 畫刷 功能，VisualBrush主要特性是可以複製現有視窗特定的控制箱、元素、容器等區塊的外觀，也就是可以快取下來，好像一面鏡子，然後可以在其他地方顯示，實作方式事實上非常簡單，這邊我就帶大家來看一個範例…

   
  1: <Window x:Class="VisualBrush.MainWindow"
  2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5:         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6:         xmlns:local="clr-namespace:VisualBrush"
  7:         mc:Ignorable="d"
  8:         Title="MainWindow" Height="600" Width="800">
  9:     <Grid>
 10:         <Grid.ColumnDefinitions>
 11:             <ColumnDefinition>
 12:             </ColumnDefinition>
 13:             <ColumnDefinition >
 14:             </ColumnDefinition>
 15:         </Grid.ColumnDefinitions>
 16:         <Grid.RowDefinitions>
 17:             <RowDefinition></RowDefinition>
 18:             <RowDefinition></RowDefinition>
 19:         </Grid.RowDefinitions>
 20:         <Button x:Name="btn1" Grid.Column="0" >網智數位-軟體開發 ， WPF - VisualBrush </Button>
 21:         <Rectangle  Grid.Column="1"  >
 22:             <Rectangle.Fill>
 23:                 <VisualBrush Visual="{Binding ElementName=btn1}"></VisualBrush>
 24:             </Rectangle.Fill>
 25:         </Rectangle>
 26: 
 27:         <!--<Button x:Name="btn2" Grid.Row="1" Grid.Column="0" Background="Red">網智數位-軟體開發 ， WPF - VisualBrush</Button>-->
 28:         <Image Source="gril.png" x:Name="img1" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  Stretch="Fill"></Image>
 29:         <Rectangle  Grid.Column="1" Grid.Row="1" >
 30:             <Rectangle.Fill>
 31:                 <VisualBrush Visual="{Binding ElementName=img1}"></VisualBrush>
 32:             </Rectangle.Fill>
 33:         </Rectangle>
 34:     </Grid>
 35: </Window>

 
重點在我用黃色標示起來的程式碼，很簡單透過 Binding 機制，我分別將2個矩形 Rectangle 的內容區域，放入 VisualBrush ，而各分別繫結至為 Button的外觀 和 Image 圖片的外觀，之後這2個 Rectangle矩形就好像2面鏡子分別對應Button跟Image… 
執行結果如下
 
 
網智數位-軟體開發