做了一些特效 分享一下
利用了自然动画的原理设计的 一个比较简单的自定义组件
预留了事件 和 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
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
