商城网站建设,wordpress导入网页,wordpress layer 主题,哪个软件可以自动排名开发环境
VS2022
.NET 8.0
MVVM Toolkit 8.2.2 需求
开发中需要实现按照成绩动态指名#xff0c;以展示当前的竞赛成绩的一个实时情况及变化。
即如下效果#xff1a; 需求分析
按照接收到的信息#xff0c;就是要将获取到的集合排序#xff0c;并且要将排序前后的变…开发环境
VS2022
.NET 8.0
MVVM Toolkit 8.2.2 需求
开发中需要实现按照成绩动态指名以展示当前的竞赛成绩的一个实时情况及变化。
即如下效果 需求分析
按照接收到的信息就是要将获取到的集合排序并且要将排序前后的变化要能在UI上动态的表示出来以直观的显示排名的变化效果。
UI上的排名上升与下降的实现本质就是当前显示控件位置的变化最方便的方式肯定是在Canvas上设置它的Top位置了然后再有一个从原位置到新位置的过度动画那么就好了。
按上述思路首先想到的就是自定义控件完全自定义控件有点麻烦最后决定使用常用的集合控件 ItemsControl其子控件也行但仅用ListView尝试过来进行实现。 代码实现 VM及Model internal partial class MainWindowViewModel : ObservableRecipient{[ObservableProperty]ObservableCollectionPerson persons [new Person() { Id 1, Name 张三, Age 18, Gender 男, Address 北京, Grade 一年级 ,Y50,OldY50,Score40},new Person() { Id 2, Name 李四, Age 19, Gender 女, Address 上海, Grade 二年级,Y100,OldY100,Score60},new Person() { Id 3, Name 王五, Age 20, Gender 男, Address 广州, Grade 三年级 ,Y150,OldY150,Score90},];Timer timer;public MainWindowViewModel(){timer new Timer(OnTimer, null, 0,1000);}private void OnTimer(object? state){Dispatcher.CurrentDispatcher.Invoke(() {Random random new();var index random.Next(0, 3);Persons[index].Score random.Next(0, 100);var sorts Persons.OrderBy(p p.Score);int i 0;foreach (var item in sorts){item.Id i;item.Y i * 50;}});}}public partial class Person : ObservableObject{[ObservableProperty]private int id;[ObservableProperty]private string name;[ObservableProperty]private int age;[ObservableProperty]private string gender;[ObservableProperty]private string address;[ObservableProperty]private string grade;private int y;public int Y{get y;set{if (y ! value){OldY y; //记录旧值SetProperty(ref y, value);}}}[ObservableProperty]private int oldY;[ObservableProperty]private int score;} Xaml中绑定如下注意下述代码中的ZContentPresenter为自定义控件 ItemsControlx:NamemyItemsControlMargin10ItemsSource{Binding Persons}ItemsControl.ItemsPanelItemsPanelTemplateCanvas //ItemsPanelTemplate/ItemsControl.ItemsPanelItemsControl.ItemTemplateDataTemplatecontrol:ZContentPresenterx:NamepresenterContent{Binding}Top{Binding Y}ContentPresenter.ContentTemplateDataTemplateStackPanel OrientationHorizontalTextBox Text{Binding Id} /TextBox Text{Binding Name} /TextBox Text{Binding Age} /TextBox Text{Binding Y} //StackPanel/DataTemplate/ContentPresenter.ContentTemplate/control:ZContentPresenter/DataTemplate/ItemsControl.ItemTemplate/ItemsControl 对于 UI中的ZContentPresenter为自定义控件其代码如下 public class ZContentPresenter : ContentPresenter{public ZContentPresenter(){}public int Top{get { return (int)GetValue(TopProperty); }set { SetValue(TopProperty, value); }}public static readonly DependencyProperty TopProperty DependencyProperty.Register(Top, typeof(int), typeof(ZContentPresenter), new PropertyMetadata(0, TopChanged));private static void TopChanged(DependencyObject d, DependencyPropertyChangedEventArgs e){if (d is ZContentPresenter control){var oldValue (int)e.OldValue;var newValue (int)e.NewValue;var parent(ContentPresenter)control.VisualParent;StartAnimation((double)(oldValue), (double)(newValue), parent);}}private static void StartAnimation(double from, double to, FrameworkElement element){Storyboard storyboard new();DoubleAnimation animation new(){From from,To to,Duration TimeSpan.FromSeconds(0.5),AutoReverse false,RepeatBehavior new RepeatBehavior(1)};Storyboard.SetTarget(animation, element);Storyboard.SetTargetProperty(animation, new PropertyPath(Canvas.TopProperty));//Storyboard.SetTargetProperty(animation, new PropertyPath((Canvas.Top)));storyboard.Children.Add(animation);storyboard.Begin();
/* storyboard.Completed (sender, e) {storyboard.Stop();};*/}} 那为什么不直接在ItemContainerStyle中直接使用样式与Trigger中设置动画来实现呢
这涉及到Trigger不能侦听Y值的实时变化另外还有一个问题就是在Animation中不能绑定From与To值若From或To采用绑定会导致出现报错无法冻结此 Storyboard 时间线树供跨线程使用。 注意事项 1. 自定义控件中的 Storyboard.SetTargetProperty(animation, new PropertyPath((Canvas.Top)));
这种写法与
Storyboard.SetTargetProperty(animation, new PropertyPath(Canvas.TopProperty));
是等价的并且不能将括号去掉。 2. 另外就是一定要绑定Top属性为你指定的离Canvas顶部的距离本例中以Y值进行绑定 3. 虽然已经将ItemsControl中的DataTemplate的ContentPresneter改用了ZContentPresneter(即使将ContentPresenter.ContentTemplate也改为了ZContentPresneter.ContentTemplate,也没有效果)但若要改写ItemsControl的ItemContainerStyle它的TargetType仍还是只能为ContentPresenter它的默认容器就是ContentPresenter暂未发现如何将默认的容器改为ZContentPresneter。也就是说目前还只能如下设置 ItemsControl.ItemContainerStyleStyle TargetTypeContentPresenterSetter PropertyCanvas.Left Value0 /Setter PropertyCanvas.Top Value{Binding OldY} /Style.TriggersDataTrigger Binding{Binding Y, UpdateSourceTriggerPropertyChanged} Value50DataTrigger.EnterActionsBeginStoryboardStoryboardDoubleAnimationAutoReversefalseRepeatBehavior1Storyboard.TargetProperty(Canvas.Top)From5To20Duration0:0:1 //Storyboard/BeginStoryboard/DataTrigger.EnterActions/DataTrigger/Style.Triggers/Style/ItemsControl.ItemContainerStyle
