手机网站开发网页设计效果图及代码
1，创建翻转面板的资源字典：FlippPanel.xaml。
- 无外观控件同样必须给样式指定类型（ <ControlTemplate TargetType="ss:FlipPanel">），相关详情参考：WPF之创建无外观控件-CSDN博客）。
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:ss="clr-namespace:无外观控件"xmlns:local="clr-namespace:无外观控件.Themes"><Style TargetType="ss:FlipPanel"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ss:FlipPanel"><Grid><Grid.RowDefinitions><RowDefinition Height="auto"></RowDefinition><RowDefinition Height="auto"></RowDefinition></Grid.RowDefinitions><!--1，为给模板添加VisualStateManager元素，模板必须使用布局面板。布局面板包含控件的两个可视化对象和VisualStateManager元素（该元素不可见）--><VisualStateManager.VisualStateGroups><VisualStateGroup Name="ViewStates"><VisualStateGroup.Transitions><!--两个可视对象切换时间，以及伴随的ToggleButton切换动画--><VisualTransition To="Normal" GeneratedDuration="00:00:01"><Storyboard ><DoubleAnimation To="0" Storyboard.TargetName="PART_Rota" Storyboard.TargetProperty="Angle" ></DoubleAnimation></Storyboard></VisualTransition><VisualTransition To="Flipped" GeneratedDuration="00:00:2"><Storyboard ><DoubleAnimation To="180" Storyboard.TargetName="PART_Rota" Storyboard.TargetProperty="Angle" ></DoubleAnimation></Storyboard></VisualTransition></VisualStateGroup.Transitions><VisualState Name="Normal"><Storyboard ><DoubleAnimation To="0" Storyboard.TargetName="front" Storyboard.TargetProperty="Opacity" Duration="00:00:00"></DoubleAnimation><!--ToggleButton旋转动画不能省，否则动画异常--><DoubleAnimation To="0" Storyboard.TargetName="PART_Rota" Storyboard.TargetProperty="Angle"></DoubleAnimation></Storyboard></VisualState><VisualState Name="Flipped"><Storyboard ><DoubleAnimation To="0" Storyboard.TargetName="back" Storyboard.TargetProperty="Opacity" Duration="00:00:00"></DoubleAnimation><!--ToggleButton旋转动画不能省，否则动画异常--><DoubleAnimation To="180" Storyboard.TargetName="PART_Rota" Storyboard.TargetProperty="Angle" Duration="00:00:00" ></DoubleAnimation></Storyboard></VisualState></VisualStateGroup></VisualStateManager.VisualStateGroups><Border x:Name="front" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{TemplateBinding CornerRadius}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"><ContentPresenter Content="{TemplateBinding FrontContent}"></ContentPresenter></Border><Border x:Name="back" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{TemplateBinding CornerRadius}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"><ContentPresenter Content="{TemplateBinding BackContent}"></ContentPresenter></Border><ToggleButton Grid.Row="1" Height="40" Name="FlipButton" RenderTransformOrigin="0.5,0.5"><ToggleButton.RenderTransform><RotateTransform x:Name="PART_Rota" ></RotateTransform></ToggleButton.RenderTransform><ToggleButton.Template><ControlTemplate TargetType="ToggleButton"><ToggleButton Grid.Column="1" Grid.Row="1" Name="FlipButton"><ToggleButton.Template><ControlTemplate TargetType="ToggleButton"><Rectangle ><Rectangle.Fill><DrawingBrush Stretch="None"><DrawingBrush.Drawing><GeometryDrawing Brush="White"><GeometryDrawing.Pen><Pen Brush="Black" Thickness="2"></Pen></GeometryDrawing.Pen><GeometryDrawing.Geometry><GeometryGroup><EllipseGeometry RadiusX="15" RadiusY="15"></EllipseGeometry><CombinedGeometry GeometryCombineMode="Intersect"><CombinedGeometry.Geometry1><EllipseGeometry RadiusX="7.5" RadiusY="7.5"></EllipseGeometry></CombinedGeometry.Geometry1><CombinedGeometry.Geometry2><PathGeometry Figures="M-7.5,0 L0,-7.5 L7.5,-7.5 L0,0 L7.5,7.5 L0,7.5 Z"></PathGeometry></CombinedGeometry.Geometry2></CombinedGeometry></GeometryGroup></GeometryDrawing.Geometry></GeometryDrawing></DrawingBrush.Drawing></DrawingBrush></Rectangle.Fill></Rectangle></ControlTemplate></ToggleButton.Template></ToggleButton></ControlTemplate></ToggleButton.Template></ToggleButton></Grid></ControlTemplate></Setter.Value></Setter></Style>
</ResourceDictionary>- VisualStateManager只能在布局面板下进行状态管理。
2，在generic.xaml中添加资源字典FlipPanel.xaml.
<ResourceDictionaryxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="无外观控件;component/Themes/colorpicker.xaml"></ResourceDictionary><ResourceDictionary Source="无外观控件;component/Themes/FlipPanel.xaml"></ResourceDictionary></ResourceDictionary.MergedDictionaries>
</ResourceDictionary>3,编写代码
[TemplatePart(Name = "FlipButton", Type =typeof(ToggleButton))]//该特性只是进行提示，无其他意义，可舍去[TemplateVisualState(GroupName = "Normal", Name = "ViewStates")]//该特性提示存在可视化切换，无其他实际意义，可舍去[TemplateVisualState(GroupName = "Flipped", Name = "ViewStates")]public class FlipPanel : Control{public static readonly DependencyProperty CornerRadiusProperty;public static readonly DependencyProperty FrontContentProperty;public static readonly DependencyProperty BackContentProperty;public static readonly DependencyProperty IsFlippedProperty;static FlipPanel(){DefaultStyleKeyProperty.OverrideMetadata(typeof(FlipPanel), new FrameworkPropertyMetadata(typeof(FlipPanel)));CornerRadiusProperty = DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(FlipPanel));FrontContentProperty = DependencyProperty.Register("FrontContent", typeof(object), typeof(FlipPanel));BackContentProperty = DependencyProperty.Register("BackContent", typeof(object), typeof(FlipPanel));IsFlippedProperty = DependencyProperty.Register("IsFlipped", typeof(bool), typeof(FlipPanel));}/// <summary>/// 设置控件边框倒角/// </summary>public CornerRadius CornerRadius{get{return (CornerRadius)this.GetValue(CornerRadiusProperty);}set{this.SetValue(CornerRadiusProperty, value);}}/// <summary>/// 前置内容/// </summary>public object FrontContent{get{return this.GetValue(FrontContentProperty);}set{this.SetValue(FrontContentProperty, value);}}/// <summary>/// 后置内容/// </summary>public object BackContent{get{return GetValue(BackContentProperty);}set{this.SetValue(BackContentProperty, value);}}/// <summary>/// 是否翻转/// </summary>public bool IsFlipped{get{return (bool)GetValue(IsFlippedProperty);}set{SetValue(IsFlippedProperty, value);ChangeVisualState(true);}}public override void OnApplyTemplate(){ToggleButton btn = GetTemplateChild("FlipButton") as ToggleButton;btn.Click += Btn_Click;ChangeVisualState(false);base.OnApplyTemplate();}private void Btn_Click(object sender, RoutedEventArgs e){IsFlipped = !IsFlipped;}void ChangeVisualState(bool useTransition){if (IsFlipped){VisualStateManager.GoToState(this, "Flipped", useTransition);}else{VisualStateManager.GoToState(this, "Normal", useTransition);}}}4，在UI上添加控件
<local:FlipPanel Grid.Row="1" IsFlipped="True"><local:FlipPanel.FrontContent><StackPanel><Button Content="前1"></Button><Button Content="前2"></Button><Button Content="前3"></Button><Button Content="前3"></Button><Button Content="前4"></Button></StackPanel></local:FlipPanel.FrontContent><local:FlipPanel.BackContent><StackPanel><Button Content="后1"></Button></StackPanel></local:FlipPanel.BackContent></local:FlipPanel>5，效果
6，Demo 链接
https://download.csdn.net/download/lingxiao16888/89253829?spm=1001.2014.3001.5501