[Win8]Windows8開發筆記（四）：畫刷介紹以及如何?實現歌詞動態變色顯示

建立一個項目，叫做TestBrush。

在MainPage.xaml下，輸入以下代碼：

        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"                    TextWrapping="Wrap" FontSize="100" Text="只是說一句 好久不見"/>

可以看見螢幕上出現了如下文字：

接下來就是筆刷的加入。

• SolidColorBrush

先來看一下SolidColorBrush的效果。將代碼做如下修改：

<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"                    TextWrapping="Wrap" FontSize="100" Text="只是說一句 好久不見">            <TextBlock.Foreground>                <SolidColorBrush Color="Red"/>            </TextBlock.Foreground>        </TextBlock>

可以看見效果就是文字的顏色變成了紅色了，SolidColorBrush就是全填充的意思。

• ImageBrush

再看一下下一個筆刷：ImageBrush，也就是圖片筆刷的使用。

比如一張圖片6.jpg，代碼如下：

 <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"                    TextWrapping="Wrap" FontSize="100" Text="只是說一句 好久不見">            <TextBlock.Foreground>                <ImageBrush ImageSource="6.jpg"/>            </TextBlock.Foreground>        </TextBlock>

效果就是：

可以看出來效果就是使用圖片填充。

• LinearGradientBrush

簡單來說就是漸層筆刷，使用方法比前兩種略複雜，需要定義顏色的位移量實現漸層的效果。

<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"                    TextWrapping="Wrap" FontSize="100" Text="只是說一句 好久不見">            <TextBlock.Foreground>                <LinearGradientBrush>                    <GradientStop Color="Red" Offset="0"/>                    <GradientStop Color="Blue" Offset="1"/>                </LinearGradientBrush>            </TextBlock.Foreground>        </TextBlock>

效果如：

如此便實現了漸層的效果，offset位移量預設是0，可以在0~1之間任意設定實現需要的效果。

下面來使用這個漸層筆刷做一個歌詞動態顯示的功能。

首先，將漸層筆刷中的stop定義為兩個顏色相同的點，以此來實現顏色的立即分割：

<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"                    TextWrapping="Wrap" FontSize="100" Text="只是說一句 好久不見">            <TextBlock.Foreground>                <LinearGradientBrush>                    <GradientStop Color="Yellow" Offset="0"/>                    <GradientStop Color="Yellow" Offset="0.6"/>                    <GradientStop Color="Blue" Offset="0.6"/>                    <GradientStop Color="Blue" Offset="1"/>                </LinearGradientBrush>            </TextBlock.Foreground>        </TextBlock>

效果就是那種歌詞的分色效果了：

但是這樣還是沒有動起來啊，動態顯示只能利用後台代碼來實現了。

要改這個值只能用 name來擷取這兩個元素，但是這個控制項GradientStop並沒有name屬性啊？！

沒關係，我們可以用x:name。如果控制項有name屬性，可以用name和x:name，但是如果一個控制項沒有name屬性，那就只能用x:name。

修改後的代碼如下：

        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"                    TextWrapping="Wrap" FontSize="100" Text="只是說一句 好久不見">            <TextBlock.Foreground>                <LinearGradientBrush>                    <GradientStop Color="Yellow" Offset="0"/>                    <GradientStop x:Name="stop1" Color="Yellow" Offset="0.6"/>                    <GradientStop x:Name="stop2" Color="Blue" Offset="0.6"/>                    <GradientStop Color="Blue" Offset="1"/>                </LinearGradientBrush>            </TextBlock.Foreground>        </TextBlock>

接下來我們跳轉到背景字碼頁面。MainPage.xaml.cs檔案。

接下來我們使用xaml中推薦使用的定時器：DispatcherTimer。

有一個屬性叫做Interval，是一個TimeSpan，也就是一個時間跨度。

定義定時器沒200毫秒執行一次。

            DispatcherTimer timer = new DispatcherTimer();            timer.Interval = TimeSpan.FromMilliseconds(200); 

指定完了之後，還需要定義Tick時間，以便讓其知道滴答一下之後自己要做什麼。

完整的代碼如下：

 protected override void OnNavigatedTo(NavigationEventArgs e)        {            DispatcherTimer timer = new DispatcherTimer();            timer.Interval = TimeSpan.FromMilliseconds(200);             timer.Tick += timer_tick;            timer.Start();//啟動計時器        }        private void timer_tick(object sender, object e)        {            stop1.Offset += 0.01;            stop2.Offset += 0.01;        }

此時運行，便可以看見漸層的歌詞顯示了。