获奖网站设计,网页游戏推广网站怎么做,建工网和环球网哪个好,免费建站免费网站首页设计
1.效果图 一.代码现实 根据页面布局#xff0c;可以将页面设计成3行#xff0c;每行中分多少列#xff0c;看需求而定根据页面内容#xff0c;设计Model 实体类#xff0c;以及View Model 1.Index.xaml 页面布局设计 RowDefinition 分行#xff08;Row#xf…首页设计
1.效果图 一.代码现实 根据页面布局可以将页面设计成3行每行中分多少列看需求而定根据页面内容设计Model 实体类以及View Model 1.Index.xaml 页面布局设计 RowDefinition 分行Row属性分几行就写几个ColumnDefinition 分列Column 属性分几列就写几个 Height 属性Row (行)属性只有Height (高度)没有宽度。并且Height 设置成 auto 时根据内容适应高度。Width 属性Column (列) 只有Width (宽度)没有Height 高度Grid.Row 属性将控件放置在第几行Grid.Column 属性将控件放置在第几列FontWeight 属性设置成 Bold (加粗)Opacity 属性透明度ItemsSource 属性数据源绑定ClipToBounds 裁剪属性在Canvas 控件中使用ClipToBounds 设置成True后超出的内容会被裁剪掉 第一行设计放置显示的文本控件 TextBlock。
FontSize 属性控件显示的字体大小 第二行设计使用 ItemsControl 控件并且固定4列。 在的Grid 控件中每定义的每行Row中还可以划分成更细的行和列。根据需求自由灵活定义使用。ItemsControl 控件它允许您将任何类型的数据绑定到其中并为每个数据项显示一个模板 ItemsControl 控件固定的写法。比如要分4列
ItemsControlItemsControl.ItemsPanelItemsPanelTemplateUniformGrid Columns4//ItemsPanelTemplate/ItemsControl.ItemsPanel
/ItemsControl
ItemsControl 列固定完后接着进行固定内容模板的设计。内容设计固定的写法
!--模板内容设计--
ItemsControl.ItemTemplateDataTemplate/DataTemplate
/ItemsControl.ItemTemplate 进行模板内容设计的时候首先要清楚模板中都要有那些内容例如当前的模板有图标标题文本内容背景颜色还有2个白色的图标 外层使用Border 要设计圆角Border 里面放置Grid方便设计。因为Grid 中可以放置多个控件右边白色的圆图标使用Canvas 控件
ItemsControl Grid.Row1ItemsControl.ItemsPanelItemsPanelTemplateUniformGrid Columns4//ItemsPanelTemplate/ItemsControl.ItemsPanel!--模板内容设计--ItemsControl.ItemTemplateDataTemplateBorderGridStackPanel!--图标--materialDesign:PackIcon KindAbacus /!--标题文本--TextBlock Textjj/!--内容--TextBlock Text888 FontWeightBold//StackPanel!--白色背景底色控件--CanvasBorder Canvas.Top10 Canvas.Right-50 Width120 Height120 Background#ffffff Opacity0.1/Border Canvas.Top80 Canvas.Right-30 Width120 Height120 Background#ffffff Opacity0.1//Canvas/Grid/Border/DataTemplate/ItemsControl.ItemTemplate
/ItemsControl 1.1 模板设计完成后进行数据内容动态渲染。
创建首页内容数据集合实体类模型 TaskBar
/// summary
/// 首页任务栏
/// /summary
public class TaskBar: BindableBase
{private string icon;/// summary/// 图标/// /summarypublic string Icon{get { return icon; }set { icon value; }}private string title;/// summary/// 标题/// /summarypublic string Title{get { return title; }set { title value; }}private string content;/// summary/// 内容/// /summarypublic string Content{get { return content; }set { content value; }}private string color;/// summary/// 背景颜色/// /summarypublic string Color{get { return color; }set { color value; }}private string target;/// summary/// 触发目标/// /summarypublic string Target{get { return target; }set { target value; }}}
接着在ViewModel 中创建出TaskBar数据的动态集合给页面展示数据 public class IndexViewModel:BindableBase{public IndexViewModel(){TaskBarsnew ObservableCollectionTaskBar();CreateTaskBars();}private ObservableCollectionTaskBar taskBars;public ObservableCollectionTaskBar TaskBars{get { return taskBars; }set { taskBars value; RaisePropertyChanged(); }}void CreateTaskBars(){TaskBars.Add(new TaskBar() { IconClockFast,Title汇总,Content9,Color#FF0CA0FF,Target});TaskBars.Add(new TaskBar() { Icon ClockCheckOutline, Title 已完成, Content 9, Color #FF1ECA3A, Target });TaskBars.Add(new TaskBar() { Icon ChartLineVariant, Title 完成比例, Content 9%, Color #FF02C6DC, Target });TaskBars.Add(new TaskBar() { Icon PlaylistStar, Title 备忘录, Content 18, Color #FFFFA000, Target });}} 最后在ItemsControl 中进行数据绑定
ItemsControl Grid.Row1 ItemsSource{Binding TaskBars}ItemsControl.ItemsPanelItemsPanelTemplateUniformGrid Columns4//ItemsPanelTemplate/ItemsControl.ItemsPanel!--模板内容设计--ItemsControl.ItemTemplateDataTemplateBorder Background{Binding Color} CornerRadius5 Margin10GridStackPanel Margin20,10!--图标--materialDesign:PackIcon Kind{Binding Icon} Width30 Height30 /!--标题文本--TextBlock Text{Binding Title} Margin0,15 FontSize15/!--内容--TextBlock Text{Binding Content} FontWeightBold FontSize40//StackPanel!--白色背景底色控件--Canvas ClipToBoundsTrueBorder Canvas.Top10 CornerRadius100 Canvas.Right-50 Width120 Height120 Background#ffffff Opacity0.1/Border Canvas.Top80 CornerRadius100 Canvas.Right-30 Width120 Height120 Background#ffffff Opacity0.1//Canvas/Grid/Border/DataTemplate/ItemsControl.ItemTemplate
/ItemsControl 第三行设计当前行分两列放置内容 LastChildFill 属性设置成False,不填允最后一列Button 按钮样式希望变成图角可以使用组件带的默认样式来实现如下 Style{StaticResource MaterialDesignFloatingActionAccentButton} Grid Grid.Row2 Margin0,10Grid.ColumnDefinitionsColumnDefinition/ColumnDefinition//Grid.ColumnDefinitions!--外边框--Border Margin10,0 Background#BEBEBE CornerRadius5 Opacity0.1/Border Grid.Column1 Margin10,0 Background#BEBEBE CornerRadius5 Opacity0.1/!--主体内容左--DockPanel Margin10,0DockPanel Margin10,5 LastChildFillFalse DockPanel.DockTopTextBlock Text待办事项 FontSize20 FontWeightBold/Button Width30 Height30 VerticalAlignmentTop DockPanel.DockRight Style{StaticResource MaterialDesignFloatingActionAccentButton} materialDesign:PackIcon KindAdd //Button/DockPanel!--数据列表区域--ListBox //DockPanel!--主体内容右--DockPanel Grid.Column1 Margin10,0DockPanel Margin10,5 LastChildFillFalse DockPanel.DockTopTextBlock Text待办事项 FontSize20 FontWeightBold/Button Width30 Height30 VerticalAlignmentTop DockPanel.DockRight Style{StaticResource MaterialDesignFloatingActionAccentButton} materialDesign:PackIcon KindAdd //Button/DockPanel!--数据列表区域--ListBox //DockPanel
/Grid 二.Index.xaml 完整源码
UserControl x:ClassMyToDo.Views.IndexViewxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006 xmlns:dhttp://schemas.microsoft.com/expression/blend/2008 xmlns:localclr-namespace:MyToDo.Viewsmc:Ignorabled xmlns:materialDesignhttp://materialdesigninxaml.net/winfx/xaml/themesd:DesignHeight450 d:DesignWidth800GridGrid.RowDefinitionsRowDefinition Heightauto/RowDefinition Heightauto/RowDefinition//Grid.RowDefinitionsTextBlock Margin15,10 FontSize22 Text你好,WPF! 今天是2023-11-12 星期天/ItemsControl Grid.Row1 ItemsSource{Binding TaskBars}ItemsControl.ItemsPanelItemsPanelTemplateUniformGrid Columns4//ItemsPanelTemplate/ItemsControl.ItemsPanel!--模板内容设计--ItemsControl.ItemTemplateDataTemplateBorder Background{Binding Color} CornerRadius5 Margin10GridStackPanel Margin20,10!--图标--materialDesign:PackIcon Kind{Binding Icon} Width30 Height30 /!--标题文本--TextBlock Text{Binding Title} Margin0,15 FontSize15/!--内容--TextBlock Text{Binding Content} FontWeightBold FontSize40//StackPanel!--白色背景底色控件--Canvas ClipToBoundsTrueBorder Canvas.Top10 CornerRadius100 Canvas.Right-50 Width120 Height120 Background#ffffff Opacity0.1/Border Canvas.Top80 CornerRadius100 Canvas.Right-30 Width120 Height120 Background#ffffff Opacity0.1//Canvas/Grid/Border/DataTemplate/ItemsControl.ItemTemplate/ItemsControlGrid Grid.Row2 Margin0,10Grid.ColumnDefinitionsColumnDefinition/ColumnDefinition//Grid.ColumnDefinitions!--外边框--Border Margin10,0 Background#BEBEBE CornerRadius5 Opacity0.1/Border Grid.Column1 Margin10,0 Background#BEBEBE CornerRadius5 Opacity0.1/!--主体内容左--DockPanel Margin10,0DockPanel Margin10,5 LastChildFillFalse DockPanel.DockTopTextBlock Text待办事项 FontSize20 FontWeightBold/Button Width30 Height30 VerticalAlignmentTop DockPanel.DockRight Style{StaticResource MaterialDesignFloatingActionAccentButton} materialDesign:PackIcon KindAdd //Button/DockPanel!--数据列表区域--ListBox //DockPanel!--主体内容右--DockPanel Grid.Column1 Margin10,0DockPanel Margin10,5 LastChildFillFalse DockPanel.DockTopTextBlock Text待办事项 FontSize20 FontWeightBold/Button Width30 Height30 VerticalAlignmentTop DockPanel.DockRight Style{StaticResource MaterialDesignFloatingActionAccentButton} materialDesign:PackIcon KindAdd //Button/DockPanel!--数据列表区域--ListBox //DockPanel/Grid/Grid
/UserControl
