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>
代码
<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>
- 代码
- <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();
}
转载于:https://blog.51cto.com/linzheng/1079220