[WPF] VisualBrush 中的佈局

今天插一篇隨筆。說一說上週五遇到的一個佈局問題，問題大概是這樣的：須要在一個快區域上添加一張透明的背景圖片，因爲區域較大、而且寬高都不是固定大小，圖片較小 因此圖片須要居中顯示。除此以外還須要在圖片的透明部分添加一個非透明的純色。

好比：最終的效果圖、以下圖所示：

固然若是隻是爲了實現這種效果、實現方案有多種，至少有三大類：

一、嵌套兩個控件、分別應用純色 和 居中圖像。

二、使用 VisualBrush 將組合效果應用在同一個控件的Background上

三、重寫控件、將組合效果繪製在Background上。

 

筆者今天說的是第二種方案：VisualBrush、這個強大的Brush類，它能夠將任意Visual元素轉化爲Brush。

 

筆者第一次寫的代碼以下：

  <Grid Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="*" />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>
        <Border Grid.Row="1" Grid.Column="1">
            <Border.Background>
                <VisualBrush>
                    <VisualBrush.Visual>
                        <Border Background="#455C73">
                            <Image Width="20"
                                   Height="20"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   Source="img_xiaofangzi.png" />
                        </Border>
                    </VisualBrush.Visual>
                </VisualBrush>
            </Border.Background>
        </Border>
    </Grid>

第一次寫的代碼

看樣子應該沒多大問題、可出現的效果卻不盡人意、圖像被拉伸了（而且Image的寬高都失效了）：

看到這個效果、個人第一直覺是在 VisualBrush上應用： Stretch="None" ：

    <Grid Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="*" />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>
        <Border Grid.Row="1" Grid.Column="1">
            <Border.Background>
                <VisualBrush Stretch="None">
                    <VisualBrush.Visual>
                        <Border Background="#455C73">
                            <Image Width="20"
                                   Height="20"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   Source="img_xiaofangzi.png" />
                        </Border>
                    </VisualBrush.Visual>
                </VisualBrush>
            </Border.Background>
        </Border>
    </Grid>

修改後的代碼

事實再一次出乎意料：

表現出來的形式：VisualBrush中的Border大小沒有填充整個背景色。 而且 Border的小大 和 Image的大小一致，很像是Image的寬高 20 * 20 把 Border撐大了。

在嘗試爲Broder設置寬高後，效果終於滿意了。最終代碼：

 <Grid Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="*" />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>
        <Border Grid.Row="1" Grid.Column="1">
            <Border.Background>
                <VisualBrush Stretch="None">
                    <VisualBrush.Visual>
                        <Border Width="3000"
                                Height="3000"
                                Background="#455C73">
                            <Image Width="20"
                                   Height="20"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   Source="img_xiaofangzi.png" />
                        </Border>
                    </VisualBrush.Visual>
                </VisualBrush>
            </Border.Background>
        </Border>
    </Grid>

最終代碼

固然，代碼仍是不夠完美：因爲背景區域的大小不固定，因此設置了一個超大的寬高。

 

問題解決了，再回頭看一下VisualBrush 中的佈局、因爲 VisualBursh中的Visual的父級是VisualBrush, 它不能爲Visual中的根元素提供大小，所以若是應用了 Stretch="None"  ，那麼就須要手動設置Visual根元素的大小了。這一點在 MSDN 上也能夠獲得證明。