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編譯，最終如下：