仿以然胜甲首页(一)
前段时间在银光中国看到
改良仿以然胜甲EaranSE首页动画【感谢原作者】
这篇帖子后,一时兴起,干脆将以然胜甲首页整个仿下来(只是出于兴趣,喜欢的朋友可随意使用,不过出现任何法律后果,与本人概不负责)。
以下是首页部分关键代码
Desktop
public class Desktop : Canvas { private string clickName = string.Empty;//记录单击控件名称 private List<double> Tops = new List<double>();//Top位置坐标 private List<CustomPanel> Panels = new List<CustomPanel>();//Panel集 private int ctlNum = int.MaxValue; private int rowCtlNum = int.MinValue; private bool isLoaded = false; public static readonly DependencyProperty RowsProperty = DependencyProperty.Register("Rows", typeof(int), typeof(Desktop), new PropertyMetadata(1, RowsChanged)); public int Rows { get { return (int)GetValue(RowsProperty); } set { SetValue(RowsProperty, value); } } private static void RowsChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e) { Desktop desktop = sender as Desktop; if (desktop == null) return; int rows = 0; if (e.NewValue != null) int.TryParse(e.NewValue.ToString(), out rows); if (rows > 0) desktop.rowCtlNum = (desktop.ctlNum / rows) + (desktop.ctlNum % rows > 0 ? 1 : 0); } public Desktop() : base() { this.MinWidth = 480; this.MinHeight = 400; this.Loaded += new RoutedEventHandler(Desktop_Loaded); } void Desktop_Loaded(object sender, RoutedEventArgs e) { if (isLoaded) return; for (int i = 0; i < this.Children.Count; i++) { CustomPanel panel = this.Children[i] as CustomPanel; if (panel == null) continue; if (panel.Name == null || panel.Name.Trim() == "") panel.Name = "panel" + i.ToString(); panel.Click += BodyPanel_Click; panel.Margin = new Thickness(5, 3, 3, 3); Panels.Add(panel); } ctlNum = Panels.Count; if (Rows == 0) Rows = 1; rowCtlNum = (ctlNum / Rows) + (ctlNum % Rows > 0 ? 1 : 0); this.SizeChanged += new SizeChangedEventHandler(Desktop_SizeChanged); Desktop_SizeChanged(sender, null); isLoaded = true; } private void Desktop_SizeChanged(object sender, SizeChangedEventArgs e) { Double LWidth = 0;//小对象的宽度 Double MWidth = 0;//大对象的宽度 Double MHeight = 0;//大对象的高度 Double LHeight = 0;//小对象的高度 CalcPanelWidthAndHeight(out LWidth, out LHeight, out MWidth, out MHeight); //判断执行动画 if (string.IsNullOrEmpty(clickName) == true)//初始化动画,也就是第一次点击 { this.Children.Clear(); SetNormalState(MHeight, null); } else { Initialization(MWidth, MHeight, LWidth, LHeight); } } private void SetNormalState(double height, Storyboard sb) { Double MiddleWidth = this.ActualWidth / rowCtlNum - 5;//对象宽度 Double MiddleHeight = height / Rows - rowCtlNum - 5;//对象高度 for (int i = 0; i < ctlNum; i++) { CustomPanel temp = Panels[i]; double left = 0; double top = 0; if (i < rowCtlNum)//控制行Top { top = 2;//第一行顶点 left = MiddleWidth * i + i * 5;//第一行的左边距 } else { top = this.ActualHeight / Rows;//第二行顶点 left = MiddleWidth * (i - rowCtlNum) + (i - rowCtlNum) * 5;//第二行的左边距 } if (sb == null) { temp.Width = MiddleWidth; temp.Height = MiddleHeight; temp.SetValue(Canvas.LeftProperty, left);//与Margin有所不同 temp.SetValue(Canvas.TopProperty, top); this.Children.Add(temp); } else ReducePanel(sb, temp, MiddleWidth, MiddleHeight, top, left); } } private void CalcPanelWidthAndHeight(out double lWidth, out double lHeight, out double mWidth, out double mHeight) { lWidth = 200;//小对象的宽度 mWidth = this.ActualWidth - lWidth - 5;//大对象的宽度 mHeight = this.ActualHeight - 5;//大对象的高度 lHeight = (mHeight - (ctlNum - 1) * 6) / (ctlNum - 1);//小对象的高度 } private void BodyPanel_Click(object sender, RoutedEventArgs e) { CustomPanel panel = sender as CustomPanel; //Canvas ca = panel.Parent as Canvas; Double LWidth = 0;//小对象的宽度 Double MWidth = 0;//大对象的宽度 Double MHeight = 0;//大对象的高度 Double LHeight = 0;//小对象的高度 CalcPanelWidthAndHeight(out LWidth, out LHeight, out MWidth, out MHeight); //判断执行动画 if (string.IsNullOrEmpty(clickName) == true)//初始化动画,也就是第一次点击 { clickName = panel.Name;//保存为上一个点击按钮 Initialization(MWidth, MHeight, LWidth, LHeight); } else { Storyboard sb = new Storyboard(); if (panel.Name == clickName)//还原界面 { //当点击上一个点击的按钮时,还原初始界面 SetNormalState(MHeight, sb); clickName = string.Empty; } else//位置交换 { CustomPanel ctl = this.FindName(clickName) as CustomPanel; MaxPanel(sb, panel, MWidth - 5, MHeight - 10); ctl.Button.IsMax = false; ReducePanel(sb, ctl, LWidth, LHeight, Canvas.GetTop(panel), MWidth); clickName = panel.Name; } sb.Begin(); } } /// <summary> /// 获取每个对象顶点的位置数组 /// </summary> /// <param name="ca"></param> /// <returns></returns> public List<double> topList(Canvas ca) { List<double> ListTmp = new List<double>();//Top位置坐标 //初始化Tops坐标 //Tops.Add((ctlNum - 1)); Double MHeight = this.ActualHeight - 5;//大对象的高度 Double LTop = (MHeight - (ctlNum - 1) * 6) / (ctlNum - 1);//小对象的高度 for (int i = 0; i < ctlNum - 1; i++) { //95:初始化后控件高 3:间距 ListTmp.Add(i * LTop + i * 5 + 5); } return ListTmp; } /// <summary> /// 所有对象归位 /// </summary> /// <param name="MaxWidth">大对象的宽</param> /// <param name="MaxHeight">大对象的高</param> /// <param name="LWidth">小对象的宽</param> /// <param name="LHeight">小对象的高</param> private void Initialization(double MaxWidth, double MaxHeight, Double LWidth, Double LHeight) { Tops = topList(this); Storyboard sb = new Storyboard(); int iTop = 0; for (int i = 0; i < ctlNum; i++) { CustomPanel ctl = Panels[i]; if (ctl.Name == clickName)//判断是否是单击对象 { MaxPanel(sb, ctl, MaxWidth - 5, MaxHeight - 10);//第一次点击时 } else { ctl.Button.IsMax = false; ReducePanel(sb, ctl, LWidth, LHeight, Tops[iTop], MaxWidth);//其它的缩小归位 iTop++; } } sb.Begin(); } /// <summary> /// 放大Panel对象 /// </summary> /// <param name="sb"></param> /// <param name="panel"></param> private void MaxPanel(Storyboard sb, CustomPanel panel, double MaxWidth, double MaxHeight) { sb.Children.Add(CreateDoubleAnimation(panel, "(FrameworkElement.Width)", panel.Width, MaxWidth)); sb.Children.Add(CreateDoubleAnimation(panel, "(FrameworkElement.Height)", panel.Height, MaxHeight)); sb.Children.Add(CreateDoubleAnimation(panel, "(Canvas.Top)", Canvas.GetTop(panel), 5)); sb.Children.Add(CreateDoubleAnimation(panel, "(Canvas.Left)", Canvas.GetLeft(panel), 0)); } /// <summary> /// 缩小Panel对象,也就是小窗口的大小 /// </summary> /// <param name="sb">动画板</param> /// <param name="panel">动画对象</param> /// <param name="width">宽度(缩小目标)</param> /// <param name="height">高度(缩小目标)</param> /// <param name="Top">对象最终顶边</param> /// <param name="Left">对象最终左边</param> private void ReducePanel(Storyboard sb, CustomPanel panel, double width, double height, double Top, double Left) { sb.Children.Add(CreateDoubleAnimation(panel, "(FrameworkElement.Width)", panel.Width, width)); sb.Children.Add(CreateDoubleAnimation(panel, "(FrameworkElement.Height)", panel.Height, height)); sb.Children.Add(CreateDoubleAnimation(panel, "(Canvas.Top)", Canvas.GetTop(panel), Top)); sb.Children.Add(CreateDoubleAnimation(panel, "(Canvas.Left)", Canvas.GetLeft(panel), Left)); } /// <summary> /// 创建一个DoubleAnimation动画对象 /// </summary> /// <param name="element">动画对象</param> /// <param name="property">动画对象属性</param> /// <param name="from">起始值</param> /// <param name="to">结束值</param> /// <returns></returns> public static DoubleAnimation CreateDoubleAnimation(DependencyObject element, string property, double from, double to) { DoubleAnimation da = new DoubleAnimation(); TimeSpan tsBeginTime = new TimeSpan(0, 0, 0, 0, 0);//开始时间 TimeSpan tsDuration = TimeSpan.FromMilliseconds(1000);//播放时间的长度 da.BeginTime = tsBeginTime; da.Duration = new Duration(tsDuration);//播放长度 da.To = to; da.From = from; da.EasingFunction = new PowerEase() { EasingMode = EasingMode.EaseOut, Power = 3 }; Storyboard.SetTarget(da, element); Storyboard.SetTargetProperty(da, new PropertyPath(property)); return da; } }
CustomPanel
[TemplatePart(Name = StateButton, Type = typeof(PanelButton))] [TemplatePart(Name = ContentContainer, Type = typeof(ContentControl))] [TemplatePart(Name = PanelTitle, Type = typeof(TextBlock))] [TemplatePart(Name = PanelFooter, Type = typeof(TextBlock))] public abstract class CustomPanel : ContentControl { protected internal const string StateButton = "btnMax"; protected internal const string ContentContainer = "contentControl"; protected internal const string PanelTitle = "txtTitle"; protected internal const string PanelFooter = "txtFooter"; protected internal PanelButton btnMax; public PanelButton Button { get { return btnMax; } } protected internal ContentControl contentControl; protected internal TextBlock txtTitle; protected internal TextBlock txtFooter; public event RoutedEventHandler Click; public static readonly DependencyProperty TitleProperty = DependencyProperty.Register("Title", typeof(string), typeof(CustomPanel), new PropertyMetadata("", new PropertyChangedCallback(TitleChanged))); public string Title { get { return (string)GetValue(TitleProperty); } set { SetValue(TitleProperty, value); } } private static void TitleChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e) { CustomPanel panel = sender as CustomPanel; if (panel == null) return; if (e.NewValue != null && panel.txtTitle != null) panel.txtTitle.Text = e.NewValue.ToString(); else if (panel.txtTitle != null) panel.txtTitle.Text = ""; } public static readonly DependencyProperty FooterProperty = DependencyProperty.Register("Footer", typeof(string), typeof(CustomPanel), new PropertyMetadata("", new PropertyChangedCallback(FooterChanged))); public string Footer { get { return (string)GetValue(FooterProperty); } set { SetValue(FooterProperty, value); } } private static void FooterChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e) { CustomPanel panel = sender as CustomPanel; if (panel == null) return; if (e.NewValue != null && panel.txtFooter != null) { panel.txtFooter.Text = e.NewValue.ToString(); panel.txtFooter.Visibility = Visibility.Visible; } else if (panel.txtFooter != null) { panel.txtFooter.Text = ""; panel.txtFooter.Visibility = Visibility.Collapsed; } } public new static readonly DependencyProperty ContentProperty = DependencyProperty.Register("Content", typeof(UIElement), typeof(CustomPanel), new PropertyMetadata(null, new PropertyChangedCallback(ContentChanged))); public new UIElement Content { get { return (UIElement)GetValue(ContentProperty); } set { SetValue(ContentProperty, value); } } private static void ContentChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e) { CustomPanel panel = sender as CustomPanel; if (panel == null) return; if (e.NewValue != null && panel.contentControl != null) panel.contentControl.Content = e.NewValue; else if (panel.contentControl != null) panel.contentControl.Content = null; } public override void OnApplyTemplate() { base.OnApplyTemplate(); btnMax = base.GetTemplateChild(StateButton) as PanelButton; contentControl = base.GetTemplateChild(ContentContainer) as ContentControl; txtTitle = base.GetTemplateChild(PanelTitle) as TextBlock; txtFooter = base.GetTemplateChild(PanelFooter) as TextBlock; if (btnMax != null) btnMax.Click += new RoutedEventHandler(btnMax_Click); if (contentControl != null) contentControl.Content = Content; if (txtTitle != null) txtTitle.Text = Title; if (txtFooter != null) { txtFooter.Text = Footer; if (Footer.Trim() != "") txtFooter.Visibility = System.Windows.Visibility.Visible; else txtFooter.Visibility = System.Windows.Visibility.Collapsed; } } private void btnMax_Click(object sender, RoutedEventArgs e) { if (Click != null) Click(this, e); } }
PanelButton
public class PanelButton : Button { /// <summary> /// 当前按钮是否选中 /// </summary> public static readonly DependencyProperty IsMaxProperty = DependencyProperty.Register("IsMax", typeof(bool), typeof(PanelButton), new PropertyMetadata(false, new PropertyChangedCallback(IsMaxChanged))); /// <summary> /// 当前按钮是否选中 /// </summary> public bool IsMax { get { return (bool)GetValue(IsMaxProperty); } set { SetValue(IsMaxProperty, value); } } private static void IsMaxChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e) { PanelButton btn = sender as PanelButton; if (btn == null) return; if (btn.IsMax) { if (btn.IsMouseOver) VisualStateManager.GoToState(btn, "MaxEnter", true); else VisualStateManager.GoToState(btn, "Max", true); } else { if (btn.IsMouseOver) VisualStateManager.GoToState(btn, "UnMaxHover", true); else VisualStateManager.GoToState(btn, "UnMax", true); } } public PanelButton() : base() { this.DefaultStyleKey = typeof(PanelButton); this.Click += new RoutedEventHandler(MenuButton_Click); this.MouseEnter += new MouseEventHandler(PanelButton_MouseEnter); this.MouseLeave += new MouseEventHandler(PanelButton_MouseLeave); } void PanelButton_MouseLeave(object sender, MouseEventArgs e) { if (IsMax) VisualStateManager.GoToState(this, "Max", true); else VisualStateManager.GoToState(this, "UnMax", true); } void PanelButton_MouseEnter(object sender, MouseEventArgs e) { if (IsMax) VisualStateManager.GoToState(this, "MaxEnter", true); else VisualStateManager.GoToState(this, "UnMaxHover", true); } void MenuButton_Click(object sender, RoutedEventArgs e) { IsMax = !IsMax; } }
PanelButton样式,这个放在generic.xaml文件中
<Style TargetType="local:PanelButton"> <Setter Property="IsEnabled" Value="True" /> <Setter Property="IsTabStop" Value="True" /> <Setter Property="Cursor" Value="Hand" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="local:PanelButton"> <Grid x:Name="Root"> <Rectangle x:Name="NormalState" RadiusX="2" RadiusY="2" Cursor="Hand" Width="11" Height="11" Fill="Transparent" Stroke="{TemplateBinding BorderBrush}" Opacity="1"/> <Rectangle x:Name="HoverState" RadiusX="2" Cursor="Hand" Width="11" Height="11" Stroke="{TemplateBinding BorderBrush}" Opacity="0"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0 0" EndPoint="0 1" Opacity="0.8"> <GradientStop Color="#ffbdc4bb" Offset="0.2"/> <GradientStop Color="#ff6f776c" Offset="0.4"/> <GradientStop Color="#ff363d33" Offset="0.6"/> <GradientStop Color="#ff192016" Offset="0.7"/> <GradientStop Color="#ff4b4e4a" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> <Rectangle.Clip> <RectangleGeometry RadiusX="2" RadiusY="2" Rect="0 0 11 11"/> </Rectangle.Clip> </Rectangle> <Grid x:Name="MaxState" Cursor="Hand" Width="11" Height="11" Background="Transparent" Opacity="0"> <Rectangle Width="4.5" Height="4.5" Stroke="{TemplateBinding BorderBrush}" Cursor="Hand" VerticalAlignment="Top" HorizontalAlignment="Left" Fill="Transparent"/> <Rectangle Width="4.5" Height="4.5" Stroke="{TemplateBinding BorderBrush}" Cursor="Hand" VerticalAlignment="Bottom" HorizontalAlignment="Left" Fill="Transparent"/> <Rectangle Width="4.5" Height="4.5" Stroke="{TemplateBinding BorderBrush}" Cursor="Hand" VerticalAlignment="Top" HorizontalAlignment="Right" Fill="Transparent"/> <Rectangle Width="4.5" Height="4.5" Stroke="{TemplateBinding BorderBrush}" Cursor="Hand" VerticalAlignment="Bottom" HorizontalAlignment="Right" Fill="Transparent"/> <Grid.Clip> <RectangleGeometry RadiusX="2" RadiusY="2" Rect="0 0 11 11"/> </Grid.Clip> </Grid> <Grid x:Name="MaxHoverState" Cursor="Hand" Opacity="0" Width="11" Height="11" Background="Transparent"> <Rectangle Width="4.5" Height="4.5" Stroke="{TemplateBinding BorderBrush}" Cursor="Hand" VerticalAlignment="Top" HorizontalAlignment="Left"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0 0" EndPoint="0 1" Opacity="0.8"> <GradientStop Color="#ffbdc4bb" Offset="0.2"/> <GradientStop Color="#ff6f776c" Offset="0.4"/> <GradientStop Color="#ff363d33" Offset="0.6"/> <GradientStop Color="#ff192016" Offset="0.7"/> <GradientStop Color="#ff4b4e4a" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Width="4.5" Height="4.5" Stroke="{TemplateBinding BorderBrush}" Cursor="Hand" VerticalAlignment="Bottom" HorizontalAlignment="Left"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0 0" EndPoint="0 1" Opacity="0.8"> <GradientStop Color="#ffbdc4bb" Offset="0.2"/> <GradientStop Color="#ff6f776c" Offset="0.4"/> <GradientStop Color="#ff363d33" Offset="0.6"/> <GradientStop Color="#ff192016" Offset="0.7"/> <GradientStop Color="#ff4b4e4a" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Width="4.5" Height="4.5" Stroke="{TemplateBinding BorderBrush}" Cursor="Hand" VerticalAlignment="Top" HorizontalAlignment="Right"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0 0" EndPoint="0 1" Opacity="0.8"> <GradientStop Color="#ffbdc4bb" Offset="0.2"/> <GradientStop Color="#ff6f776c" Offset="0.4"/> <GradientStop Color="#ff363d33" Offset="0.6"/> <GradientStop Color="#ff192016" Offset="0.7"/> <GradientStop Color="#ff4b4e4a" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Width="4.5" Height="4.5" Stroke="{TemplateBinding BorderBrush}" Cursor="Hand" VerticalAlignment="Bottom" HorizontalAlignment="Right"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0 0" EndPoint="0 1" Opacity="0.8"> <GradientStop Color="#ffbdc4bb" Offset="0.2"/> <GradientStop Color="#ff6f776c" Offset="0.4"/> <GradientStop Color="#ff363d33" Offset="0.6"/> <GradientStop Color="#ff192016" Offset="0.7"/> <GradientStop Color="#ff4b4e4a" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Grid.Clip> <RectangleGeometry RadiusX="2" RadiusY="2" Rect="0 0 11 11"/> </Grid.Clip> </Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Unfocused"/> <VisualState x:Name="Focused"/> </VisualStateGroup> <VisualStateGroup x:Name="MaxStates"> <VisualState x:Name="Max"> <Storyboard> <DoubleAnimation Storyboard.TargetName="NormalState" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.3"/> <DoubleAnimation Storyboard.TargetName="HoverState" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.3"/> <DoubleAnimation Storyboard.TargetName="MaxHoverState" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.3"/> <DoubleAnimation Storyboard.TargetName="MaxState" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2"/> </Storyboard> </VisualState> <VisualState x:Name="UnMax"> <Storyboard> <DoubleAnimation Storyboard.TargetName="NormalState" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2"/> <DoubleAnimation Storyboard.TargetName="HoverState" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.3"/> <DoubleAnimation Storyboard.TargetName="MaxState" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.3"/> <DoubleAnimation Storyboard.TargetName="MaxHoverState" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.3"/> </Storyboard> </VisualState> <VisualState x:Name="MaxEnter"> <Storyboard> <DoubleAnimation Storyboard.TargetName="NormalState" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.3"/> <DoubleAnimation Storyboard.TargetName="HoverState" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.3"/> <DoubleAnimation Storyboard.TargetName="MaxState" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.3"/> <DoubleAnimation Storyboard.TargetName="MaxHoverState" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2"/> </Storyboard> </VisualState> <VisualState x:Name="UnMaxHover"> <Storyboard> <DoubleAnimation Storyboard.TargetName="NormalState" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.3"/> <DoubleAnimation Storyboard.TargetName="HoverState" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2"/> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="CommonStates"> <VisualStateGroup.Transitions> <VisualTransition GeneratedDuration="00:00:0.5" To="MouseOver"/> <VisualTransition GeneratedDuration="00:00:0.1" To="Pressed"/> </VisualStateGroup.Transitions> <VisualState x:Name="MouseOver"/> <VisualState x:Name="Pressed"/> <VisualState x:Name="Disabled" /> <VisualState x:Name="Normal"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>