Windows Phone 7 button控件

System.Windows.Controls.Button button控件

一、button控件的各种样式的展示
可以通过
<phone:PhoneApplicationPage.Resources>
<Style x:Key="ButtonStyle1" TargetType="Button">
……
</Style>
……
</phone:PhoneApplicationPage.Resources>
来给控件定义公共的样式
调用样式的方法：在Button控件上添加样式的属性 Style="{StaticResource ButtonStyle1}"

<Button Content="前往下一頁" Height="88" HorizontalAlignment="Left" Margin="160,513,0,0" Name="button2" VerticalAlignment="Top" Width="288" Click="button2_Click" />

Margin属性定义了Button控件的相对整体界面的于左上右下的距离。
Height控件的高度
Width控件的宽度
Content控件显示的内容
Click单击触发的事件
HorizontalAlignment水平位置
VerticalAlignment垂直位置

 

 

MainPage.xaml

 

1. 代码  
2.  
3.  
4. <phone:PhoneApplicationPage   
5.     x:Class="buttonDemo.MainPage" 
6.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
7.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
8.     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
9.     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 
10.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
11.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
12.     mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" 
13.     FontFamily="{StaticResource PhoneFontFamilyNormal}" 
14.     FontSize="{StaticResource PhoneFontSizeNormal}" 
15.     Foreground="{StaticResource PhoneForegroundBrush}" 
16.     SupportedOrientations="Portrait" Orientation="Portrait" 
17.     shell:SystemTray.IsVisible="True" > 
18.     <!--定义公共的样式--> 
19.     <phone:PhoneApplicationPage.Resources> 
20.         <Style x:Key="ButtonStyle1" TargetType="Button"> 
21.             <Setter Property="Background" Value="Transparent"/> 
22.             <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/> 
23.             <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/> 
24.             <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/> 
25.             <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/> 
26.             <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/> 
27.             <Setter Property="Padding" Value="10,3,10,5"/> 
28.             <Setter Property="Template"> 
29.                 <Setter.Value> 
30.                     <ControlTemplate TargetType="Button"> 
31.                         <Grid Background="Transparent"> 
32.                             <VisualStateManager.VisualStateGroups> 
33.                                 <VisualStateGroup x:Name="CommonStates"> 
34.                                     <VisualState x:Name="Normal"/> 
35.                                     <VisualState x:Name="MouseOver"/> 
36.                                     <VisualState x:Name="Pressed"> 
37.                                         <Storyboard> 
38.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground"> 
39.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/> 
40.                                             </ObjectAnimationUsingKeyFrames> 
41.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground"> 
42.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/> 
43.                                             </ObjectAnimationUsingKeyFrames> 
44.                                         </Storyboard> 
45.                                     </VisualState> 
46.                                     <VisualState x:Name="Disabled"> 
47.                                         <Storyboard> 
48.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground"> 
49.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
50.                                             </ObjectAnimationUsingKeyFrames> 
51.                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground"> 
52.                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/> 
53.                                             </ObjectAnimationUsingKeyFrames> 
54.                                         </Storyboard> 
55.                                     </VisualState> 
56.                                 </VisualStateGroup> 
57.                             </VisualStateManager.VisualStateGroups> 
58.                             <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="15" Margin="{StaticResource PhoneTouchTargetOverhang}"> 
59.                                 <ContentPresenter Margin="5,11" d:LayoutOverrides="Height" HorizontalAlignment="Center"/> 
60.                             </Border> 
61.                         </Grid> 
62.                     </ControlTemplate> 
63.                 </Setter.Value> 
64.             </Setter> 
65.         </Style> 
66.         <Style x:Key="ButtonStyle2" TargetType="Button"> 
67.             <Setter Property="Template"> 
68.                 <Setter.Value> 
69.                     <ControlTemplate TargetType="Button"> 
70.                         <Grid> 
71.                             <Border BorderBrush="Black" BorderThickness="1" Background="#FF0054FB" CornerRadius="15"> 
72.                                 <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="Bottom" Margin="0,0,0,7"/> 
73.                             </Border> 
74.                             <Border BorderThickness="1" CornerRadius="15,15,0,0" Margin="0,0,0,48"> 
75.                                 <Border.Background> 
76.                                     <LinearGradientBrush EndPoint="0.506,0.8" StartPoint="0.507,0.05"> 
77.                                         <GradientStop Color="#19FFFFFF" Offset="0.996"/> 
78.                                         <GradientStop Color="#BFFFFFFF"/> 
79.                                     </LinearGradientBrush> 
80.                                 </Border.Background> 
81.                             </Border> 
82.                         </Grid> 
83.                     </ControlTemplate> 
84.                 </Setter.Value> 
85.             </Setter> 
86.         </Style> 
87.     </phone:PhoneApplicationPage.Resources> 
88.  
89.     <!--LayoutRoot is the root grid where all page content is placed--> 
90.     <Grid x:Name="LayoutRoot" Background="Transparent"> 
91.         <Grid.RowDefinitions> 
92.             <RowDefinition Height="Auto"/> 
93.             <RowDefinition Height="*"/> 
94.         </Grid.RowDefinitions> 
95.  
96.         <!--TitlePanel contains the name of the application and page title--> 
97.         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 
98.             <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/> 
99.             <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 
100.         </StackPanel> 
101.  
102.         <!--ContentPanel - place additional content here--> 
103.         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0"> 
104.             <Button Content="button" Height="88" HorizontalAlignment="Left" Margin="20,8,0,0" Name="button1" VerticalAlignment="Top" Width="410" /> 
105.             <Button Content="圓角按鈕" Height="84" Margin="0,118,38,0" VerticalAlignment="Top" Style="{StaticResource ButtonStyle1}" HorizontalAlignment="Right" Width="398"/> 
106.             <Button Content="Button" Margin="20,224,26,0" Height="84" VerticalAlignment="Top" Foreground="Black"> 
107.                 <Button.Background> 
108.                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
109.                         <GradientStop Color="#FF0010FF"/> 
110.                         <GradientStop Color="White" Offset="0.664"/> 
111.                         <GradientStop Color="#FF6D73D2" Offset="1"/> 
112.                     </LinearGradientBrush> 
113.                 </Button.Background> 
114.             </Button> 
115.             <Button Content="前往下一頁" Height="88" HorizontalAlignment="Left" Margin="160,513,0,0" Name="button2" VerticalAlignment="Top" Width="288" Click="button2_Click" /> 
116.             <Button Content="Button" HorizontalAlignment="Right" Height="108" Margin="0,0,168,168" Style="{StaticResource ButtonStyle2}" VerticalAlignment="Bottom" Width="128" Click="Button_Click" /> 
117.         </Grid> 
118.     </Grid> 
119. </phone:PhoneApplicationPage> 

private void button2_Click(object sender, RoutedEventArgs e)
{
NavigationService.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative));//导航创建新的页面 
}

private void Button_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("button click");//弹出对话框
}

二、旋转的按钮控件

 

 

SecondPage.xaml

 

1. 代码  
2.  
3. <phone:PhoneApplicationPage   
4.     x:Class="buttonDemo.SecondPage" 
5.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
6.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
7.     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
8.     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 
9.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
10.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
11.     FontFamily="{StaticResource PhoneFontFamilyNormal}" 
12.     FontSize="{StaticResource PhoneFontSizeNormal}" 
13.     Foreground="{StaticResource PhoneForegroundBrush}" 
14.     SupportedOrientations="Portrait" Orientation="Portrait" 
15.     mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480" 
16.     shell:SystemTray.IsVisible="True"> 
17.  
18.     <!--LayoutRoot is the root grid where all page content is placed--> 
19.     <Grid x:Name="LayoutRoot" Background="Transparent"> 
20.         <Grid.RowDefinitions> 
21.             <RowDefinition Height="Auto"/> 
22.             <RowDefinition Height="*"/> 
23.         </Grid.RowDefinitions> 
24.  
25.         <!--TitlePanel contains the name of the application and page title--> 
26.         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 
27.             <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/> 
28.             <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 
29.         </StackPanel> 
30.  
31.         <!--ContentPanel - place additional content here--> 
32.         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
33.             <Button x:Name="btnCreateButton" Content="產生按鈕" Height="74" Margin="0,8,0,0" VerticalAlignment="Top" HorizontalAlignment="Right" Width="210" Click="btnCreateButton_Click" /> 
34.             <TextBox x:Name="txtCount" Height="68" Margin="181,8,204,0" TextWrapping="Wrap" Text="10" VerticalAlignment="Top"/> 
35.             <Canvas x:Name="cvContent" Margin="8,88,8,96"/> 
36.             <Button Content="前往下一頁" Height="88" HorizontalAlignment="Left" Margin="168,519,0,0" Name="button2" VerticalAlignment="Top" Width="288" Click="button2_Click" /> 
37.             <TextBlock HorizontalAlignment="Left" Height="29" Margin="89,30,0,0" TextWrapping="Wrap" Text="按鈕數量" VerticalAlignment="Top" Width="92"/> 
38.         </Grid> 
39.     </Grid> 
40.  
41.  
42. </phone:PhoneApplicationPage> 

代码

<phone:PhoneApplicationPage 
    x:Class="buttonDemo.SecondPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button x:Name="btnCreateButton" Content="產生按鈕" Height="74" Margin="0,8,0,0" VerticalAlignment="Top" HorizontalAlignment="Right" Width="210" Click="btnCreateButton_Click" />
            <TextBox x:Name="txtCount" Height="68" Margin="181,8,204,0" TextWrapping="Wrap" Text="10" VerticalAlignment="Top"/>
            <Canvas x:Name="cvContent" Margin="8,88,8,96"/>
            <Button Content="前往下一頁" Height="88" HorizontalAlignment="Left" Margin="168,519,0,0" Name="button2" VerticalAlignment="Top" Width="288" Click="button2_Click" />
            <TextBlock HorizontalAlignment="Left" Height="29" Margin="89,30,0,0" TextWrapping="Wrap" Text="按鈕數量" VerticalAlignment="Top" Width="92"/>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

 

1. 代码  
2.  
3. <phone:PhoneApplicationPage   
4.     x:Class="buttonDemo.ThirdPage" 
5.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
6.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
7.     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
8.     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 
9.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
10.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
11.     FontFamily="{StaticResource PhoneFontFamilyNormal}" 
12.     FontSize="{StaticResource PhoneFontSizeNormal}" 
13.     Foreground="{StaticResource PhoneForegroundBrush}" 
14.     SupportedOrientations="Portrait" Orientation="Portrait" 
15.     mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480" 
16.     shell:SystemTray.IsVisible="True"> 
17.     <phone:PhoneApplicationPage.Resources> 
18.         <Storyboard x:Name="Storyboard1"> 
19.             <DoubleAnimation Duration="0:0:0.4" To="13" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" AutoReverse="True" Storyboard.TargetName="button1" d:IsOptimized="True"/> 
20.         </Storyboard> 
21.     </phone:PhoneApplicationPage.Resources> 
22.  
23.     <!--LayoutRoot is the root grid where all page content is placed--> 
24.     <Grid x:Name="LayoutRoot" Background="Transparent"> 
25.         <Grid.RowDefinitions> 
26.             <RowDefinition Height="Auto"/> 
27.             <RowDefinition Height="*"/> 
28.         </Grid.RowDefinitions> 
29.  
30.         <!--TitlePanel contains the name of the application and page title--> 
31.         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 
32.             <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/> 
33.             <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 
34.         </StackPanel> 
35.  
36.         <!--ContentPanel - place additional content here--> 
37.         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
38.             <Button Content="Button" HorizontalAlignment="Left" Margin="71,240,0,270" Name="button1" Width="346" RenderTransformOrigin="0.5,0.5" d:LayoutOverrides="VerticalAlignment" > 
39.                 <Button.RenderTransform> 
40.                     <CompositeTransform/> 
41.                 </Button.RenderTransform> 
42.             </Button> 
43.             <Button Content="轉吧，按鈕" Height="74" HorizontalAlignment="Left" Margin="182,6,0,0" Name="button2" VerticalAlignment="Top" Width="274" Click="button2_Click" /> 
44.         </Grid> 
45.     </Grid> 
46. </phone:PhoneApplicationPage> 

private void button2_Click(object sender, RoutedEventArgs e)
{
Storyboard1.Stop();

//(Storyboard1.Children[0] as DoubleAnimation).From = 0;
//(Storyboard1.Children[0] as DoubleAnimation).To = 150;
//Storyboard.SetTargetName( Storyboard1, "button1");
Storyboard1.Begin();

本文转自linzheng 51CTO博客，原文链接:

}http://blog.51cto.com/linzheng/1079220