在開發公司套裝軟體產品時,在 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…
執行結果如下
網智數位-軟體開發