浙江温州网络公司,长沙网站seo推广公司,小型装修公司店面装修,网站首页 栏目页 内容页qq音乐桌面版做的效果感觉很不错#xff0c;今天就模仿一下它首页歌单的效果#xff0c;从简单做起。。。看一下效果#xff1a;#xff0c;其实也很简单#xff0c;就是布局和动画#xff0c;触发器。。。还用到了ItemsControl下面就看看代码#xff1a;MainWindow的xa… qq音乐桌面版做的效果感觉很不错今天就模仿一下它首页歌单的效果从简单做起。。。看一下效果其实也很简单就是布局和动画触发器。。。还用到了ItemsControl下面就看看代码MainWindow的xaml代码Window x:ClassWPFDemos.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:localclr-namespace:WPFDemosmc:Ignorabledx:NamewidnowWindowStartupLocationCenterScreenTitletitle Height570 Width1000Window.ResourcesRectangleGeometry x:Keyclip Rect0 0 165 165 RadiusX10 RadiusY10/Style TargetTypeItemsControl x:Keystyle1Setter PropertyFontFamily Value微软雅黑/Setter PropertyFontSize Value13/Setter PropertyItemTemplateSetter.ValueDataTemplate DataTypeItemStackPanel Margin10Border x:Nameborder CornerRadius10 ClipToBoundsTrue BackgroundTransparent Width165 Height165 Clip{StaticResource clip}GridImage Source{Binding ImgPath} StretchUniformToFill/Border x:Nameplay Background#77000000 VisibilityCollapsedViewbox Width50 Height50 x:NameviewboxPath x:NameplayIcon FillWhite DataM512 5.12C231.936 5.12 5.12 231.936 5.12 512s226.816 506.88 506.88 506.88 506.88-226.816 506.88-506.88-226.816-506.88-506.88-506.88z m214.528 524.288L445.44 755.2c-14.336 11.776-35.84 1.536-35.84-16.896V285.696c0-18.432 21.504-28.672 35.84-16.896l281.088 226.304c10.752 8.704 10.752 25.088 0 34.304z//Viewbox/BorderBorder x:NamecountTip Background#1F1018 HorizontalAlignmentRight VerticalAlignmentBottom Margin10 CornerRadius11 Padding7 3StackPanel OrientationHorizontal VerticalAlignmentCenterViewbox Width16 Height16Path FillWhite DataM899.729695 470.846718c0.775666-9.406231 1.726318-18.811438 1.726318-28.41926 0-207.385281-174.362166-375.516536-389.456013-375.516536-215.08873 0-389.456013 168.130232-389.456013 375.516536 0 9.643638 0.945535 19.013029 1.726318 28.41926-34.059724 19.031449-57.360406 55.004755-57.360406 96.789417l0 166.902264c0 61.440327 49.821709 111.255897 111.274316 111.255897 0 0 111.375623 0.183172 111.274316 0 59.120492-2.62171 111.268176-51.466162 111.268176-111.255897L400.726707 567.637158c0-61.458747-49.815569-111.292736-111.268176-111.292736 0 0-104.131639 0-111.274316 0 0-194.441481 149.45387-333.822948 333.816808-333.822948s334.99975 138.190339 333.816808 333.822948c-0.022513 4.730745-111.268176 0-111.268176 0-61.457724 0-111.274316 49.833989-111.274316 111.292736l0 166.902264c0 59.789735 52.147684 108.634186 111.274316 111.255897-0.102331 0.183172 55.634088 0 55.634088 0l0 83.47825c0 15.328104 12.456706 27.813462 27.817556 27.813462 15.365966 0 27.817556-12.486382 27.817556-27.813462l0-83.47825c61.457724 0 111.274316-49.815569 111.274316-111.255897L957.093171 567.637158C957.090101 525.851473 933.789419 489.87919 899.729695 470.846718z//ViewboxTextBlock Margin2 0 Text{Binding Count,StringFormat{}{0}万} ForegroundWhite FontSize12 VerticalAlignmentCenter//StackPanel/Border/Grid/BorderTextBlock x:Nametitle Text{Binding Title} Margin0 10//StackPanelDataTemplate.TriggersEventTrigger RoutedEventMouseEnter SourceNameborderBeginStoryboard StoryboardThicknessAnimation Duration0:0:0.1 To0 -8 0 8 Storyboard.TargetPropertyMargin Storyboard.TargetNameborder//Storyboard/BeginStoryboard/EventTriggerEventTrigger RoutedEventMouseLeave SourceNameborderBeginStoryboard StoryboardThicknessAnimation Duration0:0:0.1 To0 0 0 0 Storyboard.TargetPropertyMargin Storyboard.TargetNameborder//Storyboard/BeginStoryboard/EventTriggerTrigger PropertyIsMouseOver ValueTrue SourceNameborderSetter PropertyVisibility ValueVisible TargetNameplay/Setter PropertyVisibility ValueCollapsed TargetNamecountTip//TriggerTrigger PropertyIsMouseOver ValueTrue SourceNameviewboxSetter PropertyFill Value#1ECE9C TargetNameplayIcon//TriggerTrigger PropertyIsMouseOver ValueTrue SourceNametitleSetter PropertyForeground Value#1ECE9C TargetNametitle//Trigger/DataTemplate.Triggers/DataTemplate/Setter.Value/Setter
/Style/Window.ResourcesStackPanel Margin10 30TextBlock Text 你的歌单保藏库 FontSize23 FontFamily微软雅黑 /ItemsControl ItemsSource{Binding Items,ElementNamewidnow} Style{StaticResource style1}ItemsControl.ItemsPanelItemsPanelTemplateWrapPanel OrientationHorizontal/WrapPanel/ItemsPanelTemplate/ItemsControl.ItemsPanel/ItemsControl/StackPanel
/Window MainWindow的后台代码using System.Collections.Generic;
using System.ComponentModel;
using System.Windows;namespace WPFDemos
{public partial class MainWindow : Window, INotifyPropertyChanged{public MainWindow(){InitializeComponent();DataContext this;Items new Listobject(){new Item{ ImgPathD:\bizhi\清纯\6-9.jpg,Title音乐时节 | 秋分,Count138.6},new Item{ ImgPathD:\bizhi\清纯\9-7.jpg,Title中文小清新 | 恋爱告白的甜蜜,Count9.5},new Item{ ImgPathD:\bizhi\清纯\9-8.jpg,Title学习工作阅读 | 柔和静心の轻,Count1641.7},new Item{ ImgPathD:\bizhi\清纯\2-5.jpg,Title[韩语快歌]提神醒脑必备,Count1257.4},new Item{ ImgPathD:\bizhi\清纯\3-1.jpg,Title古风韶华白首不过浮生一阙,Count123.4},new Item{ ImgPathD:\bizhi\清纯\23-9.jpg,Title学习工作阅读 | 柔和静心の轻,Count191.4},new Item{ ImgPathD:\bizhi\清纯\28-6.jpg,Title学习工作阅读 | 柔和静心の轻,Count676.5},new Item{ ImgPathD:\bizhi\清纯\28-1.jpg,Title[韩语快歌]提神醒脑必备,Count676.5},new Item{ ImgPathD:\bizhi\清纯\32-4.jpg,Title学习工作阅读 | 柔和静心の轻,Count676.5},new Item{ ImgPathD:\bizhi\清纯\34-8.jpg,Title古风韶华白首不过浮生一阙,Count676.5},};}public event PropertyChangedEventHandler PropertyChanged;private Listobject _items;public Listobject Items{get { return _items; }set{_items value;PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Items)));}}}public class Item{public string ImgPath { get; set; }public string Title { get; set; }public double Count { get; set; }}
}完啦这次为了方便代码全都放在这两个文件里了。。效果图【文中素材图片来源于网络侵删】号外为了方便WPF爱好者交流经验我建了个群有兴趣的可以加一下哦加不上的小伙伴可以加我微信我拉你进群~
