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
代码
<
phone:PhoneApplicationPage
x:Class
="buttonDemo.MainPage"
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"
mc:Ignorable
="d"
d:DesignWidth
="480"
d:DesignHeight
="768"
FontFamily
="{StaticResource PhoneFontFamilyNormal}"
FontSize
="{StaticResource PhoneFontSizeNormal}"
Foreground
="{StaticResource PhoneForegroundBrush}"
SupportedOrientations
="Portrait"
Orientation
="Portrait"
shell:SystemTray.IsVisible
="True"
>
<!--
定义公共的样式
-->
<
phone:PhoneApplicationPage.Resources
>
<
Style
x:Key
="ButtonStyle1"
TargetType
="Button"
>
<
Setter
Property
="Background"
Value
="Transparent"
/>
<
Setter
Property
="BorderBrush"
Value
="{StaticResource PhoneForegroundBrush}"
/>
<
Setter
Property
="Foreground"
Value
="{StaticResource PhoneForegroundBrush}"
/>
<
Setter
Property
="BorderThickness"
Value
="{StaticResource PhoneBorderThickness}"
/>
<
Setter
Property
="FontFamily"
Value
="{StaticResource PhoneFontFamilySemiBold}"
/>
<
Setter
Property
="FontSize"
Value
="{StaticResource PhoneFontSizeMediumLarge}"
/>
<
Setter
Property
="Padding"
Value
="10,3,10,5"
/>
<
Setter
Property
="Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
="Button"
>
<
Grid
Background
="Transparent"
>
<
VisualStateManager.VisualStateGroups
>
<
VisualStateGroup
x:Name
="CommonStates"
>
<
VisualState
x:Name
="Normal"
/>
<
VisualState
x:Name
="MouseOver"
/>
<
VisualState
x:Name
="Pressed"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
="Background"
Storyboard.TargetName
="ButtonBackground"
>
<
DiscreteObjectKeyFrame
KeyTime
="0"
Value
="{StaticResource PhoneForegroundBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
="BorderBrush"
Storyboard.TargetName
="ButtonBackground"
>
<
DiscreteObjectKeyFrame
KeyTime
="0"
Value
="{StaticResource PhoneForegroundBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
="Disabled"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
="BorderBrush"
Storyboard.TargetName
="ButtonBackground"
>
<
DiscreteObjectKeyFrame
KeyTime
="0"
Value
="{StaticResource PhoneDisabledBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
="Background"
Storyboard.TargetName
="ButtonBackground"
>
<
DiscreteObjectKeyFrame
KeyTime
="0"
Value
="Transparent"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
</
VisualStateGroup
>
</
VisualStateManager.VisualStateGroups
>
<
Border
x:Name
="ButtonBackground"
BorderBrush
="{TemplateBinding BorderBrush}"
BorderThickness
="{TemplateBinding BorderThickness}"
Background
="{TemplateBinding Background}"
CornerRadius
="15"
Margin
="{StaticResource PhoneTouchTargetOverhang}"
>
<
ContentPresenter
Margin
="5,11"
d:LayoutOverrides
="Height"
HorizontalAlignment
="Center"
/>
</
Border
>
</
Grid
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
<
Style
x:Key
="ButtonStyle2"
TargetType
="Button"
>
<
Setter
Property
="Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
="Button"
>
<
Grid
>
<
Border
BorderBrush
="Black"
BorderThickness
="1"
Background
="#FF0054FB"
CornerRadius
="15"
>
<
ContentPresenter
HorizontalAlignment
="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment
="Bottom"
Margin
="0,0,0,7"
/>
</
Border
>
<
Border
BorderThickness
="1"
CornerRadius
="15,15,0,0"
Margin
="0,0,0,48"
>
<
Border.Background
>
<
LinearGradientBrush
EndPoint
="0.506,0.8"
StartPoint
="0.507,0.05"
>
<
GradientStop
Color
="#19FFFFFF"
Offset
="0.996"
/>
<
GradientStop
Color
="#BFFFFFFF"
/>
</
LinearGradientBrush
>
</
Border.Background
>
</
Border
>
</
Grid
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
</
phone:PhoneApplicationPage.Resources
>
<!--
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
="0,0,0,0"
>
<
Button
Content
="button"
Height
="88"
HorizontalAlignment
="Left"
Margin
="20,8,0,0"
Name
="button1"
VerticalAlignment
="Top"
Width
="410"
/>
<
Button
Content
="圓角按鈕"
Height
="84"
Margin
="0,118,38,0"
VerticalAlignment
="Top"
Style
="{StaticResource ButtonStyle1}"
HorizontalAlignment
="Right"
Width
="398"
/>
<
Button
Content
="Button"
Margin
="20,224,26,0"
Height
="84"
VerticalAlignment
="Top"
Foreground
="Black"
>
<
Button.Background
>
<
LinearGradientBrush
EndPoint
="0.5,1"
StartPoint
="0.5,0"
>
<
GradientStop
Color
="#FF0010FF"
/>
<
GradientStop
Color
="White"
Offset
="0.664"
/>
<
GradientStop
Color
="#FF6D73D2"
Offset
="1"
/>
</
LinearGradientBrush
>
</
Button.Background
>
</
Button
>
<
Button
Content
="前往下一頁"
Height
="88"
HorizontalAlignment
="Left"
Margin
="160,513,0,0"
Name
="button2"
VerticalAlignment
="Top"
Width
="288"
Click
="button2_Click"
/>
<
Button
Content
="Button"
HorizontalAlignment
="Right"
Height
="108"
Margin
="0,0,168,168"
Style
="{StaticResource ButtonStyle2}"
VerticalAlignment
="Bottom"
Width
="128"
Click
="Button_Click"
/>
</
Grid
>
</
Grid
>
</
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
代码
<
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
>
private void btnCreateButton_Click(object sender, RoutedEventArgs e)
{
cvContent.Children.Clear();
for (int i = 0; i < Convert.ToInt32(txtCount.Text); i++)
{
Button newBtn = new Button();//创建Button控件
newBtn.Name = "btn" + i.ToString();
Canvas.SetLeft(newBtn, cvContent.ActualWidth / 2);//画布控件Canvas
Canvas.SetTop(newBtn, cvContent.ActualHeight / 2);
newBtn.Background = new SolidColorBrush(Colors.Orange);//背景颜色
newBtn.Content = "button-" + i.ToString();//按钮显示的内容
newBtn.RenderTransformOrigin = new Point(0, 0);
RotateTransform rt = new RotateTransform();//System.Windows.Media下的旋转控件
rt.Angle = i * (360 / Convert.ToInt32(txtCount.Text));//角度
newBtn.RenderTransform = rt;
cvContent.Children.Add(newBtn);
}
}
private void Test()
{
Storyboard a = new Storyboard();
}
private void button2_Click(object sender, RoutedEventArgs e)
{
NavigationService.Navigate(new Uri("/ThirdPage.xaml", UriKind.Relative));
}
三、会动的按钮控件
ThirdPage.xaml
代码
<
phone:PhoneApplicationPage
x:Class
="buttonDemo.ThirdPage"
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"
>
<
phone:PhoneApplicationPage.Resources
>
<
Storyboard
x:Name
="Storyboard1"
>
<
DoubleAnimation
Duration
="0:0:0.4"
To
="13"
Storyboard.TargetProperty
="(UIElement.RenderTransform).(CompositeTransform.Rotation)"
AutoReverse
="True"
Storyboard.TargetName
="button1"
d:IsOptimized
="True"
/>
</
Storyboard
>
</
phone:PhoneApplicationPage.Resources
>
<!--
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
Content
="Button"
HorizontalAlignment
="Left"
Margin
="71,240,0,270"
Name
="button1"
Width
="346"
RenderTransformOrigin
="0.5,0.5"
d:LayoutOverrides
="VerticalAlignment"
>
<
Button.RenderTransform
>
<
CompositeTransform
/>
</
Button.RenderTransform
>
</
Button
>
<
Button
Content
="轉吧，按鈕"
Height
="74"
HorizontalAlignment
="Left"
Margin
="182,6,0,0"
Name
="button2"
VerticalAlignment
="Top"
Width
="274"
Click
="button2_Click"
/>
</
Grid
>
</
Grid
>
</
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();
}