Windows8/wp8 自定义 Metro风格 Menu组件
2013-12-19 16:48
218 查看
做了一些特效 分享一下
利用了自然动画的原理设计的 一个比较简单的自定义组件
预留了事件 和 Command 方便扩展
demo:
http://download.csdn.net/detail/wangrenzhu2011/6740959
利用了自然动画的原理设计的 一个比较简单的自定义组件
预留了事件 和 Command 方便扩展
using System; using System.Collections.Generic; using System.Linq; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Documents; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; using System.Windows.Input; namespace App9 { [TemplatePart(Name = BORDER_ONE, Type = typeof(Border))] [TemplatePart(Name = BORDER_TWO, Type = typeof(Border))] [TemplatePart(Name = BORDER_THREE, Type = typeof(Border))] [TemplatePart(Name = BORDER_FOUR, Type = typeof(Border))] [TemplatePart(Name = BUTTON_MENUBTN, Type = typeof(Button))] public class SenseMenu : Control { private bool _isLoaded; #region Template Part const string BORDER_ONE = "borderOne"; const string BORDER_TWO = "borderTwo"; const string BORDER_THREE = "borderThree"; const string BORDER_FOUR = "borderFour"; const string BUTTON_MENUBTN = "menuBtn"; #endregion #region Members Border borderOne; Border borderTwo; Border borderThree; Border borderFour; Button menuBtn; #endregion #region DependencyProperties #region Command /// <summary> /// Command Dependency Property /// </summary> public static readonly DependencyProperty CommandProperty = DependencyProperty.Register( "Command", typeof(ICommand), typeof(SenseMenu), new PropertyMetadata(null, OnCommandChanged)); /// <summary> /// Gets or sets the Command property. This dependency property /// indicates the command to execute when the button gets tapped. /// </summary> public ICommand Command { get { return (ICommand)GetValue(CommandProperty); } set { SetValue(CommandProperty, value); } } /// <summary> /// Handles changes to the Command property. /// </summary> /// <param name="d"> /// The <see cref="DependencyObject"/> on which /// the property has changed value. /// </param> /// <param name="e"> /// Event data that is issued by any event that /// tracks changes to the effective value of this property. /// </param> private static void OnCommandChanged( DependencyObject d, DependencyPropertyChangedEventArgs e) { var target = (SenseMenu)d; ICommand oldCommand = (ICommand)e.OldValue; ICommand newCommand = target.Command; target.OnCommandChanged(oldCommand, newCommand); } /// <summary> /// Provides derived classes an opportunity to handle changes /// to the Command property. /// </summary> /// <param name="oldCommand">The old Command value</param> /// <param name="newCommand">The new Command value</param> protected virtual void OnCommandChanged( ICommand oldCommand, ICommand newCommand) { } #endregion #region CommandParameter /// <summary> /// CommandParameter Dependency Property /// </summary> public static readonly DependencyProperty CommandParameterProperty = DependencyProperty.Register( "CommandParameter", typeof(object), typeof(SenseMenu), new PropertyMetadata(null, OnCommandParameterChanged)); /// <summary> /// Gets or sets the CommandParameter property. This dependency property /// indicates the command parameter. /// </summary> public object CommandParameter { get { return (object)GetValue(CommandParameterProperty); } set { SetValue(CommandParameterProperty, value); } } /// <summary> /// Handles changes to the CommandParameter property. /// </summary> /// <param name="d"> /// The <see cref="DependencyObject"/> on which /// the property has changed value. /// </param> /// <param name="e"> /// Event data that is issued by any event that /// tracks changes to the effective value of this property. /// </param> private static void OnCommandParameterChanged( DependencyObject d, DependencyPropertyChangedEventArgs e) { var target = (SenseMenu)d; object oldCommandParameter = (object)e.OldValue; object newCommandParameter = target.CommandParameter; target.OnCommandParameterChanged(oldCommandParameter, newCommandParameter); } /// <summary> /// Provides derived classes an opportunity to handle changes /// to the CommandParameter property. /// </summary> /// <param name="oldCommandParameter">The old CommandParameter value</param> /// <param name="newCommandParameter">The new CommandParameter value</param> protected virtual void OnCommandParameterChanged( object oldCommandParameter, object newCommandParameter) { } #endregion #region CommandOne /// <summary> /// Command Dependency Property /// </summary> public static readonly DependencyProperty CommandOneProperty = DependencyProperty.Register( "CommandOne", typeof(ICommand), typeof(SenseMenu), new PropertyMetadata(null, OnCommandOneChanged)); /// <summary> /// Gets or sets the Command property. This dependency property /// indicates the command to execute when the button gets tapped. /// </summary> public ICommand CommandOne { get { return (ICommand)GetValue(CommandOneProperty); } set { SetValue(CommandOneProperty, value); } } /// <summary> /// Handles changes to the Command property. /// </summary> /// <param name="d"> /// The <see cref="DependencyObject"/> on which /// the property has changed value. /// </param> /// <param name="e"> /// Event data that is issued by any event that /// tracks changes to the effective value of this property. /// </param> private static void OnCommandOneChanged( DependencyObject d, DependencyPropertyChangedEventArgs e) { var target = (SenseMenu)d; ICommand oldCommand = (ICommand)e.OldValue; ICommand newCommand = target.CommandOne; target.OnCommandOneChanged(oldCommand, newCommand); } /// <summary> /// Provides derived classes an opportunity to handle changes /// to the Command property. /// </summary> /// <param name="oldCommand">The old Command value</param> /// <param name="newCommand">The new Command value</param> protected virtual void OnCommandOneChanged( ICommand oldCommand, ICommand newCommand) { } #endregion #region CommandOneParameter /// <summary> /// CommandParameter Dependency Property /// </summary> public static readonly DependencyProperty CommandOneParameterProperty = DependencyProperty.Register( "CommandOneParameter", typeof(object), typeof(SenseMenu), new PropertyMetadata(null, CommandOneParameterChanged)); /// <summary> /// Gets or sets the CommandParameter property. This dependency property /// indicates the command parameter. /// </summary> public object CommandOneParameter { get { return (object)GetValue(CommandOneParameterProperty); } set { SetValue(CommandOneParameterProperty, value); } } /// <summary> /// Handles changes to the CommandParameter property. /// </summary> /// <param name="d"> /// The <see cref="DependencyObject"/> on which /// the property has changed value. /// </param> /// <param name="e"> /// Event data that is issued by any event that /// tracks changes to the effective value of this property. /// </param> private static void CommandOneParameterChanged( DependencyObject d, DependencyPropertyChangedEventArgs e) { var target = (SenseMenu)d; object oldCommandParameter = (object)e.OldValue; object newCommandParameter = target.CommandOneParameter; target.OnCommandOneParameterChanged(oldCommandParameter, newCommandParameter); } /// <summary> /// Provides derived classes an opportunity to handle changes /// to the CommandParameter property. /// </summary> /// <param name="oldCommandParameter">The old CommandParameter value</param> /// <param name="newCommandParameter">The new CommandParameter value</param> protected virtual void OnCommandOneParameterChanged( object oldCommandParameter, object newCommandParameter) { } #endregion #region CommandTwo /// <summary> /// Command Dependency Property /// </summary> public static readonly DependencyProperty CommandTwoProperty = DependencyProperty.Register( "CommandTwo", typeof(ICommand), typeof(SenseMenu), new PropertyMetadata(null, OnCommandTwoChanged)); /// <summary> /// Gets or sets the Command property. This dependency property /// indicates the command to execute when the button gets tapped. /// </summary> public ICommand CommandTwo { get { return (ICommand)GetValue(CommandTwoProperty); } set { SetValue(CommandTwoProperty, value); } } /// <summary> /// Handles changes to the Command property. /// </summary> /// <param name="d"> /// The <see cref="DependencyObject"/> on which /// the property has changed value. /// </param> /// <param name="e"> /// Event data that is issued by any event that /// tracks changes to the effective value of this property. /// </param> private static void OnCommandTwoChanged( DependencyObject d, DependencyPropertyChangedEventArgs e) { var target = (SenseMenu)d; ICommand oldCommand = (ICommand)e.OldValue; ICommand newCommand = target.CommandTwo; target.OnCommandTwoChanged(oldCommand, newCommand); } /// <summary> /// Provides derived classes an opportunity to handle changes /// to the Command property. /// </summary> /// <param name="oldCommand">The old Command value</param> /// <param name="newCommand">The new Command value</param> protected virtual void OnCommandTwoChanged( ICommand oldCommand, ICommand newCommand) { } #endregion #region CommandTwoParameter /// <summary> /// CommandParameter Dependency Property /// </summary> public static readonly DependencyProperty CommandTwoParameterProperty = DependencyProperty.Register( "CommandTwoParameter", typeof(object), typeof(SenseMenu), new PropertyMetadata(null, CommandTwoParameterChanged)); /// <summary> /// Gets or sets the CommandParameter property. This dependency property /// indicates the command parameter. /// </summary> public object CommandTwoParameter { get { return (object)GetValue(CommandTwoParameterProperty); } set { SetValue(CommandTwoParameterProperty, value); } } /// <summary> /// Handles changes to the CommandParameter property. /// </summary> /// <param name="d"> /// The <see cref="DependencyObject"/> on which /// the property has changed value. /// </param> /// <param name="e"> /// Event data that is issued by any event that /// tracks changes to the effective value of this property. /// </param> private static void CommandTwoParameterChanged( DependencyObject d, DependencyPropertyChangedEventArgs e) { var target = (SenseMenu)d; object oldCommandParameter = (object)e.OldValue; object newCommandParameter = target.CommandTwoParameter; target.OnCommandTwoParameterChanged(oldCommandParameter, newCommandParameter); } /// <summary> /// Provides derived classes an opportunity to handle changes /// to the CommandParameter property. /// </summary> /// <param name="oldCommandParameter">The old CommandParameter value</param> /// <param name="newCommandParameter">The new CommandParameter value</param> protected virtual void OnCommandTwoParameterChanged( object oldCommandParameter, object newCommandParameter) { } #endregion #region CommandThree /// <summary> /// Command Dependency Property /// </summary> public static readonly DependencyProperty CommandThreeProperty = DependencyProperty.Register( "CommandThree", typeof(ICommand), typeof(SenseMenu), new PropertyMetadata(null, OnCommandThreeChanged)); /// <summary> /// Gets or sets the Command property. This dependency property /// indicates the command to execute when the button gets tapped. /// </summary> public ICommand CommandThree { get { return (ICommand)GetValue(CommandThreeProperty); } set { SetValue(CommandThreeProperty, value); } } /// <summary> /// Handles changes to the Command property. /// </summary> /// <param name="d"> /// The <see cref="DependencyObject"/> on which /// the property has changed value. /// </param> /// <param name="e"> /// Event data that is issued by any event that /// tracks changes to the effective value of this property. /// </param> private static void OnCommandThreeChanged( DependencyObject d, DependencyPropertyChangedEventArgs e) { var target = (SenseMenu)d; ICommand oldCommand = (ICommand)e.OldValue; ICommand newCommand = target.CommandThree; target.OnCommandThreeChanged(oldCommand, newCommand); } /// <summary> /// Provides derived classes an opportunity to handle changes /// to the Command property. /// </summary> /// <param name="oldCommand">The old Command value</param> /// <param name="newCommand">The new Command value</param> protected virtual void OnCommandThreeChanged( ICommand oldCommand, ICommand newCommand) { } #endregion #region CommandThreeParameter /// <summary> /// CommandParameter Dependency Property /// </summary> public static readonly DependencyProperty CommandThreeParameterProperty = DependencyProperty.Register( "CommandThreeParameter", typeof(object), typeof(SenseMenu), new PropertyMetadata(null, CommandThreeParameterChanged)); /// <summary> /// Gets or sets the CommandParameter property. This dependency property /// indicates the command parameter. /// </summary> public object CommandThreeParameter { get { return (object)GetValue(CommandThreeParameterProperty); } set { SetValue(CommandThreeParameterProperty, value); } } /// <summary> /// Handles changes to the CommandParameter property. /// </summary> /// <param name="d"> /// The <see cref="DependencyObject"/> on which /// the property has changed value. /// </param> /// <param name="e"> /// Event data that is issued by any event that /// tracks changes to the effective value of this property. /// </param> private static void CommandThreeParameterChanged( DependencyObject d, DependencyPropertyChangedEventArgs e) { var target = (SenseMenu)d; object oldCommandParameter = (object)e.OldValue; object newCommandParameter = target.CommandThreeParameter; target.OnCommandThreeParameterChanged(oldCommandParameter, newCommandParameter); } /// <summary> /// Provides derived classes an opportunity to handle changes /// to the CommandParameter property. /// </summary> /// <param name="oldCommandParameter">The old CommandParameter value</param> /// <param name="newCommandParameter">The new CommandParameter value</param> protected virtual void OnCommandThreeParameterChanged( object oldCommandParameter, object newCommandParameter) { } #endregion #region CommandFour /// <summary> /// Command Dependency Property /// </summary> public static readonly DependencyProperty CommandFourProperty = DependencyProperty.Register( "CommandFour", typeof(ICommand), typeof(SenseMenu), new PropertyMetadata(null, OnCommandFourChanged)); /// <summary> /// Gets or sets the Command property. This dependency property /// indicates the command to execute when the button gets tapped. /// </summary> public ICommand CommandFour { get { return (ICommand)GetValue(CommandFourProperty); } set { SetValue(CommandFourProperty, value); } } /// <summary> /// Handles changes to the Command property. /// </summary> /// <param name="d"> /// The <see cref="DependencyObject"/> on which /// the property has changed value. /// </param> /// <param name="e"> /// Event data that is issued by any event that /// tracks changes to the effective value of this property. /// </param> private static void OnCommandFourChanged( DependencyObject d, DependencyPropertyChangedEventArgs e) { var target = (SenseMenu)d; ICommand oldCommand = (ICommand)e.OldValue; ICommand newCommand = target.CommandFour; target.OnCommandFourChanged(oldCommand, newCommand); } /// <summary> /// Provides derived classes an opportunity to handle changes /// to the Command property. /// </summary> /// <param name="oldCommand">The old Command value</param> /// <param name="newCommand">The new Command value</param> protected virtual void OnCommandFourChanged( ICommand oldCommand, ICommand newCommand) { } #endregion #region CommandFourParameter /// <summary> /// CommandParameter Dependency Property /// </summary> public static readonly DependencyProperty CommandFourParameterProperty = DependencyProperty.Register( "CommandFourParameter", typeof(object), typeof(SenseMenu), new PropertyMetadata(null, CommandFourParameterChanged)); /// <summary> /// Gets or sets the CommandParameter property. This dependency property /// indicates the command parameter. /// </summary> public object CommandFourParameter { get { return (object)GetValue(CommandFourParameterProperty); } set { SetValue(CommandFourParameterProperty, value); } } /// <summary> /// Handles changes to the CommandParameter property. /// </summary> /// <param name="d"> /// The <see cref="DependencyObject"/> on which /// the property has changed value. /// </param> /// <param name="e"> /// Event data that is issued by any event that /// tracks changes to the effective value of this property. /// </param> private static void CommandFourParameterChanged( DependencyObject d, DependencyPropertyChangedEventArgs e) { var target = (SenseMenu)d; object oldCommandParameter = (object)e.OldValue; object newCommandParameter = target.CommandFourParameter; target.OnCommandFourParameterChanged(oldCommandParameter, newCommandParameter); } /// <summary> /// Provides derived classes an opportunity to handle changes /// to the CommandParameter property. /// </summary> /// <param name="oldCommandParameter">The old CommandParameter value</param> /// <param name="newCommandParameter">The new CommandParameter value</param> protected virtual void OnCommandFourParameterChanged( object oldCommandParameter, object newCommandParameter) { } #endregion #region ButtonOneSymbolText public string ButtonOneSymbolText { get { return (string)GetValue(ButtonOneSymbolTextProperty); } set { SetValue(ButtonOneSymbolTextProperty, value); } } // Using a DependencyProperty as the backing store for ButtonOneSymbolText. This enables animation, styling, binding, etc... public static readonly DependencyProperty ButtonOneSymbolTextProperty = DependencyProperty.Register("ButtonOneSymbolText", typeof(string), typeof(SenseMenu), new PropertyMetadata("")); #endregion #region ButtonTwoSymbolText public string ButtonTwoSymbolText { get { return (string)GetValue(ButtonTwoSymbolTextProperty); } set { SetValue(ButtonTwoSymbolTextProperty, value); } } // Using a DependencyProperty as the backing store for ButtonTwoSymbolText. This enables animation, styling, binding, etc... public static readonly DependencyProperty ButtonTwoSymbolTextProperty = DependencyProperty.Register("ButtonTwoSymbolText", typeof(string), typeof(SenseMenu), new PropertyMetadata("")); #endregion #region ButtonThreeSymbolText public string ButtonThreeSymbolText { get { return (string)GetValue(ButtonThreeSymbolTextProperty); } set { SetValue(ButtonThreeSymbolTextProperty, value); } } // Using a DependencyProperty as the backing store for ButtonThreeSymbolText. This enables animation, styling, binding, etc... public static readonly DependencyProperty ButtonThreeSymbolTextProperty = DependencyProperty.Register("ButtonThreeSymbolText", typeof(string), typeof(SenseMenu), new PropertyMetadata("")); #endregion #region ButtonFourSymbolText public string ButtonFourSymbolText { get { return (string)GetValue(ButtonFourSymbolTextProperty); } set { SetValue(ButtonFourSymbolTextProperty, value); } } // Using a DependencyProperty as the backing store for ButtonFourSymbolText. This enables animation, styling, binding, etc... public static readonly DependencyProperty ButtonFourSymbolTextProperty = DependencyProperty.Register("ButtonFourSymbolText", typeof(string), typeof(SenseMenu), new PropertyMetadata("")); #endregion #region IsOpen /// <summary> /// IsOpen Dependency Property /// </summary> public static readonly DependencyProperty IsOpenProperty = DependencyProperty.Register( "IsOpen", typeof(bool), typeof(SenseMenu), new PropertyMetadata(false, OnIsOpenChanged)); /// <summary> /// Gets or sets the IsOpen property. This dependency property /// indicates whether the AppBar is visible. /// </summary> public bool IsOpen { get { return (bool)GetValue(IsOpenProperty); } set { SetValue(IsOpenProperty, value); } } /// <summary> /// Handles changes to the IsOpen property. /// </summary> /// <param name="d"> /// The <see cref="DependencyObject"/> on which /// the property has changed value. /// </param> /// <param name="e"> /// Event data that is issued by any event that /// tracks changes to the effective value of this property. /// </param> private static void OnIsOpenChanged( DependencyObject d, DependencyPropertyChangedEventArgs e) { var appBar = (SenseMenu)d; bool oldIsOpen = (bool)e.OldValue; bool newIsOpen = appBar.IsOpen; appBar.OnIsOpenChanged(oldIsOpen, newIsOpen); } /// <summary> /// Provides derived classes an opportunity to handle changes /// to the IsOpen property. /// </summary> /// <param name="oldIsOpen">The old IsOpen value</param> /// <param name="newIsOpen">The new IsOpen value</param> protected virtual void OnIsOpenChanged( bool oldIsOpen, bool newIsOpen) { if (!_isLoaded) { return; } if (newIsOpen) { VisualStateManager.GoToState(this, "ExpendState", true); } else { VisualStateManager.GoToState(this, "NormalState", true); } } #endregion #endregion #region Event public event RoutedEventHandler Click_One; public event RoutedEventHandler Click_Two; public event RoutedEventHandler Click_Three; public event RoutedEventHandler Click_Four; public event RoutedEventHandler MenuClick; #endregion #region CTOR public SenseMenu() { this.DefaultStyleKey = typeof(SenseMenu); this.Loaded += OnLoaded; this.Unloaded += OnUnloaded; } #endregion #region OnLoaded() private void OnLoaded(object sender, RoutedEventArgs e) { VisualStateManager.GoToState(this, "NormalState", false); _isLoaded = true; } #endregion #region OnUnloaded() private void OnUnloaded(object sender, RoutedEventArgs e) { _isLoaded = false; borderOne.Tapped -= borderOne_Tapped; borderTwo.Tapped -= borderTwo_Tapped; borderThree.Tapped -= borderThree_Tapped; borderFour.Tapped -= borderFour_Tapped; menuBtn.Click -= menuBtn_Click; } #endregion #region OnApplayTemplate protected override void OnApplyTemplate() { base.OnApplyTemplate(); borderOne = GetTemplateChild(BORDER_ONE) as Border; borderTwo = GetTemplateChild(BORDER_TWO) as Border; borderThree = GetTemplateChild(BORDER_THREE) as Border; borderFour = GetTemplateChild(BORDER_FOUR) as Border; menuBtn = GetTemplateChild(BUTTON_MENUBTN) as Button; borderOne.Tapped += borderOne_Tapped; borderTwo.Tapped += borderTwo_Tapped; borderThree.Tapped += borderThree_Tapped; borderFour.Tapped += borderFour_Tapped; menuBtn.Click += menuBtn_Click; } #endregion #region EventMehod private void menuBtn_Click(object sender, RoutedEventArgs e) { if (MenuClick != null) MenuClick(sender, new RoutedEventArgs()); if (Command != null && Command.CanExecute(CommandParameter)) { Command.Execute(CommandParameter); } IsOpen = !IsOpen; } private void borderFour_Tapped(object sender, TappedRoutedEventArgs e) { ExcuteCommand(CommandFour, CommandFourParameter, e, Click_One); } private void borderThree_Tapped(object sender, TappedRoutedEventArgs e) { ExcuteCommand(CommandThree, CommandThreeParameter, e, Click_Two); } private void borderTwo_Tapped(object sender, TappedRoutedEventArgs e) { ExcuteCommand(CommandTwo, CommandTwoParameter, e, Click_Three); } private void borderOne_Tapped(object sender, TappedRoutedEventArgs e) { ExcuteCommand(CommandOne, CommandOneParameter, e, Click_Four); } private void ExcuteCommand(ICommand commmand, object parameter, TappedRoutedEventArgs e, RoutedEventHandler clickEvent) { base.OnTapped(e); if (clickEvent != null) clickEvent(this, new RoutedEventArgs()); if (commmand != null && commmand.CanExecute(parameter)) { commmand.Execute(parameter); } } #endregion } }
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:local="using:App9"> <Style x:Key="MenuButtonStyle" TargetType="Button"> <Setter Property="Background" Value="Black"/> <Setter Property="Foreground" Value="{StaticResource ButtonForegroundThemeBrush}"/> <Setter Property="Padding" Value="12,4,12,4"/> <Setter Property="HorizontalAlignment" Value="Left"/> <Setter Property="VerticalAlignment" Value="Center"/> <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/> <Setter Property="FontWeight" Value="SemiBold"/> <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/> <Setter Property="FontFamily" Value="Segoe UI Symbol"></Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="PointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <SolidColorBrush Color="#7F000000"/> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedBackgroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="Border"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <SolidColorBrush Color="Black"/> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBorderThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Focused"> </VisualState> <VisualState x:Name="Unfocused"/> <VisualState x:Name="PointerFocused"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="100"> <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="SenseButtonStyle" TargetType="Border"> <Setter Property="CornerRadius" Value="1000"></Setter> <Setter Property="Width" Value="50"></Setter> <Setter Property="Background" Value="Black"></Setter> <Setter Property="Height" Value="50"></Setter> </Style> <Style x:Key="SenseIconStyle" TargetType="TextBlock"> <Setter Property="HorizontalAlignment" Value="Center"></Setter> <Setter Property="VerticalAlignment" Value="Center"></Setter> <Setter Property="FontFamily" Value="Segoe UI Symbol"></Setter> <Setter Property="FontSize" Value="20"></Setter> </Style> <Style TargetType="local:SenseMenu"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="local:SenseMenu"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <Grid> <Button x:Name="menuBtn" Canvas.ZIndex="10" Content="" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0" Style="{StaticResource MenuButtonStyle}" Width="50" Height="50"/> <Border x:Name="borderOne" RenderTransformOrigin="0.5,0.5" Style="{StaticResource SenseButtonStyle}" Opacity="0" d:IsHidden="True"> <Border.RenderTransform> <CompositeTransform/> </Border.RenderTransform> <TextBlock Text="" Style="{StaticResource SenseIconStyle}" d:IsHidden="True"></TextBlock> </Border> <Border x:Name="borderTwo" RenderTransformOrigin="0.5,0.5" Style="{StaticResource SenseButtonStyle}" Opacity="0" d:IsHidden="True"> <Border.RenderTransform> <CompositeTransform/> </Border.RenderTransform> <TextBlock Text="" Style="{StaticResource SenseIconStyle}" d:IsHidden="True"></TextBlock> </Border> <Border x:Name="borderThree" RenderTransformOrigin="0.5,0.5" Style="{StaticResource SenseButtonStyle}" Opacity="0" d:IsHidden="True"> <Border.RenderTransform> <CompositeTransform/> </Border.RenderTransform> <TextBlock Text="" Style="{StaticResource SenseIconStyle}" d:IsHidden="True"></TextBlock> </Border> <Border x:Name="borderFour" RenderTransformOrigin="0.5,0.5" Style="{StaticResource SenseButtonStyle}" Opacity="0" d:IsHidden="True"> <Border.RenderTransform> <CompositeTransform/> </Border.RenderTransform> <TextBlock Text="" Style="{StaticResource SenseIconStyle}"></TextBlock> </Border> </Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="VisualStateGroup"> <VisualStateGroup.Transitions> <VisualTransition GeneratedDuration="0:0:1" From="NormalState" To="ExpendState"> <VisualTransition.GeneratedEasingFunction> <BackEase Amplitude="0"/> </VisualTransition.GeneratedEasingFunction> <Storyboard> <DoubleAnimation Duration="0:0:0.6" To="-186.333" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="borderOne"> <DoubleAnimation.EasingFunction> <BackEase Amplitude="0.5"/> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation Duration="0:0:0.6" To="36.333" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="borderOne"> <DoubleAnimation.EasingFunction> <BackEase Amplitude="0.5"/> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation Duration="0:0:0.9" To="-171" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="borderTwo"> <DoubleAnimation.EasingFunction> <BackEase Amplitude="0.5"/> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation Duration="0:0:0.9" To="-92.333" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="borderTwo"> <DoubleAnimation.EasingFunction> <BackEase Amplitude="0.5"/> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation Duration="0:0:0.9" To="-81.667" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="borderThree"> <DoubleAnimation.EasingFunction> <BackEase Amplitude="0.5"/> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation Duration="0:0:0.9" To="-175" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="borderThree"> <DoubleAnimation.EasingFunction> <BackEase Amplitude="0.5"/> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation Duration="0:0:1.1" To="40" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="borderFour"> <DoubleAnimation.EasingFunction> <BackEase Amplitude="0.5"/> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation Duration="0:0:1.1" To="-176" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="borderFour"> <DoubleAnimation.EasingFunction> <BackEase Amplitude="0.5"/> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation Duration="0:0:1.1" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="borderFour"/> <DoubleAnimation Duration="0:0:0.9" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="borderThree"> <DoubleAnimation.EasingFunction> <BackEase/> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation Duration="0:0:0.9" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="borderTwo"> <DoubleAnimation.EasingFunction> <BackEase/> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation Duration="0:0:1.1" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="borderOne"> <DoubleAnimation.EasingFunction> <BackEase/> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation Duration="0:0:1.1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="borderFour"> <DoubleAnimation.EasingFunction> <SineEase/> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation Duration="0:0:0.9" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="borderThree"> <DoubleAnimation.EasingFunction> <SineEase/> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation Duration="0:0:0.9" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="borderTwo"> <DoubleAnimation.EasingFunction> <SineEase/> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation Duration="0:0:0.9" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="borderOne" EnableDependentAnimation="True"> <DoubleAnimation.EasingFunction> <SineEase/> </DoubleAnimation.EasingFunction> </DoubleAnimation> </Storyboard> </VisualTransition> <VisualTransition From="ExpendState" GeneratedDuration="0:0:1" To="NormalState"> <VisualTransition.GeneratedEasingFunction> <PowerEase/> </VisualTransition.GeneratedEasingFunction> <Storyboard> <DoubleAnimation Duration="0:0:0.3" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="borderOne"/> <DoubleAnimation Duration="0:0:0.3" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="borderOne"/> <DoubleAnimation Duration="0:0:0.4" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="borderTwo"/> <DoubleAnimation Duration="0:0:0.4" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="borderTwo"/> <DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="borderThree"/> <DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="borderThree"/> <DoubleAnimation Duration="0:0:0.9" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="borderFour"> <DoubleAnimation.EasingFunction> <PowerEase/> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation Duration="0:0:0.9" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="borderFour"> <DoubleAnimation.EasingFunction> <PowerEase/> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation Duration="0:0:0.9" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="borderFour"> <DoubleAnimation.EasingFunction> <PowerEase/> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="borderThree"/> <DoubleAnimation Duration="0:0:0.4" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="borderTwo"/> <DoubleAnimation Duration="0:0:0.3" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="borderOne"/> <DoubleAnimation Duration="0:0:0.9" To="-360" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="borderFour"> <DoubleAnimation.EasingFunction> <PowerEase/> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation Duration="0:0:0.5" To="-360" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="borderThree"/> <DoubleAnimation Duration="0:0:0.4" To="-360" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="borderTwo"/> <DoubleAnimation Duration="0:0:0.3" To="-360" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="borderOne"/> </Storyboard> </VisualTransition> </VisualStateGroup.Transitions> <VisualState x:Name="NormalState"> <Storyboard> <DoubleAnimation Duration="0" To="-360" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="borderFour" d:IsOptimized="True"/> <DoubleAnimation Duration="0" To="-360" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="borderThree" d:IsOptimized="True"/> <DoubleAnimation Duration="0" To="-360" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="borderTwo" d:IsOptimized="True"/> <DoubleAnimation Duration="0" To="-360" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="borderOne" d:IsOptimized="True"/> </Storyboard> </VisualState> <VisualState x:Name="ExpendState"> <Storyboard> <DoubleAnimation Duration="0" To="-186.333" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="borderOne" d:IsOptimized="True"/> <DoubleAnimation Duration="0" To="36.333" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="borderOne" d:IsOptimized="True"/> <DoubleAnimation Duration="0" To="-171" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="borderTwo" d:IsOptimized="True"/> <DoubleAnimation Duration="0" To="-92.333" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="borderTwo" d:IsOptimized="True"/> <DoubleAnimation Duration="0" To="-81.667" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="borderThree" d:IsOptimized="True"/> <DoubleAnimation Duration="0" To="-175" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="borderThree" d:IsOptimized="True"/> <DoubleAnimation Duration="0" To="40" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="borderFour" d:IsOptimized="True"/> <DoubleAnimation Duration="0" To="-176" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="borderFour" d:IsOptimized="True"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="borderFour" d:IsOptimized="True"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="borderThree" d:IsOptimized="True"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="borderTwo" d:IsOptimized="True"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="borderOne" d:IsOptimized="True"/> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary>
demo:
http://download.csdn.net/detail/wangrenzhu2011/6740959
相关文章推荐
- VC/Wince 实现仿Win8 Metro风格界面3——按钮移动交换、删除、添加快捷方式(附效果图)
- 学习使用YUI的Menu组件
- C#实现Menu和ContextMenu自定义风格及contextMenu自定义
- Material Design风格各组件
- 献给开发者:为设计Windows 8 Metro风格应用准备着(转)
- 安卓开发笔记——Menu菜单组件(选项菜单,上下文菜单,子菜单)
- Android Metro风格的Launcher开发系列第一篇
- [转载] Android Metro风格的Launcher开发系列第一篇
- Metro风格界面
- Metro风格XAML应用程序性能技巧
- 从 Windows Phone 到 Windows 8 平台Metro风格应用的统一设计
- 给Metro风格RSS阅读器加个搜索
- 图解使用Win8Api进行Metro风格的程序开发八----剪贴板
- JQuery EasyUI 之Menu(菜单)组件
- 基于Bootstrap的Metro风格模板
- Java Swing中的下拉式菜单(menu)、弹出式菜单(JPopupMenu)、选项卡窗体(JTabbedPane)组件使用案例
- Metro 风格的软件界面欣赏
- Metro风格控件
- 《android课表》之metro风格
- Metro风格的CSS框架 BootMetro