[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;
        }

此时运行，便可以看见渐变的歌词显示了。