Windows Phone 7 下ListBox中嵌入Button

在上一篇文章《Windows Phone 7下ListBox的使用》中，提到了如何在Windows Phone 7下使用ListBox控件，并绑定数据到该控件，以一个售书列表作为例子学习。下面试着更新该例子的UI，使整个界面稍微美观一些（回头看了一下最终效果图，感觉不是那么好看）。在ListBox中嵌入Button，并对Button添加渐变效果。

首先，打开上一篇文章的工程BookList，在右边的解决方案窗口中，打开App.xaml文件（该文件的作用在《第一个WP7工程：Hello WP7》有介绍），我们将要在该文件建立一个控件模块。打开后找到这段代码：

    <Application.Resources>
    </Application.Resources>

在该代码里面添加我们的控件模块，代码如下：

    <Application.Resources>
        <Style x:Key="MyButton" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="RootElement">
                            <Rectangle Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" RadiusX="15" RadiusY="15">
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                        <GradientStop Color="Yellow" Offset="0.0" />
                                        <GradientStop Color="Red" Offset="0.25" />
                                        <GradientStop Color="Blue" Offset="0.75" />
                                        <GradientStop Color="LimeGreen" Offset="1.0" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                                <Rectangle.Stroke>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#EC04FA" Offset="0" />
                                        <GradientStop Color="#FFFFFF" Offset="1" />
                                        </LinearGradientBrush>
                                </Rectangle.Stroke>
                                </Rectangle>
                            <ContentPresenter x:Name="contentPresenter" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>

添加完控件模板后，回到我们的MainPage.xaml中，在原来的

<DataTemplate>

中添加一个Button控件，并把控件风格设置为我们刚才编写的模板风格，添加后代码如下：

                    <DataTemplate>
                        <Button Width="460" Height="120" Style="{StaticResource MyButton}">
                            <Button.Content>
                                <StackPanel Orientation="Horizontal">

结束语句如下：

                                </StackPanel>
                            </Button.Content>
                        </Button>
                    </DataTemplate>

按下F5编译，最终效果图如下：