时间:2022年05月23日 | 作者 : aaronyang | 分类 : wpf in net6 | 浏览: 654次 | 评论 0 人
全当练手 布局和一些基本思路,实际使用需要配合 数据绑定,动态生成的数据
11 信息卡片
<!--信息卡片--> <Grid Grid.Row="1" Margin="50 20 15 40"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> </Grid>
新建一个InfoCard用户控件显示信息
新建文件夹UserControls,右键新增InfoCard用户控件
顶部输入 xmlns:fa=" 就已经快捷提示了
====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========
接下来,定义卡片的外观,一般来说 写用户控件:
编写布局
编写控件
颜色使用常用颜色 红绿黄蓝紫灰等
文字随便写
最后提取动态的值,绑定xaml.cs的依赖属性
<UserControl x:Class="AyUIDemo1.UserControls.InfoCard" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:AyUIDemo1.UserControls" mc:Ignorable="d" xmlns:fa="http://schemas.awesome.incremented/wpf/xaml/fontawesome.sharp" d:DesignHeight="140" d:DesignWidth="316" Width="316" Height="140"> <Border Margin="0 0 25 0"> <Border.Background> <LinearGradientBrush StartPoint="0 0" EndPoint="1,2"> <GradientStop Color="red" Offset="0"/> <GradientStop Color="Gray" Offset="1"/> </LinearGradientBrush> </Border.Background> <Border.Clip> <RectangleGeometry RadiusX="15" RadiusY="15" Rect="0,0,291,140"/> </Border.Clip> <Grid> <Ellipse Width="230" Height="230" Margin="0 -130 -90 0" HorizontalAlignment="Right"> <Ellipse.Fill> <LinearGradientBrush> <GradientStop Color="Green" Offset="0"/> <GradientStop Color="Yellow" Offset="1"/> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> <fa:IconImage Icon="HatCowboy" Margin="0 0 25 25" Width="60" Height="60" Foreground="#FFFFFF" HorizontalAlignment="Right" VerticalAlignment="Center"/> <StackPanel Margin="35 0 0 20" VerticalAlignment="Bottom"> <TextBlock Text="AY学习" Foreground="#c9e9e9" FontSize="14"/> <TextBlock Text="WPF NET6" Foreground="#FFFFFF" FontSize="28" FontWeight="SemiBold"/> </StackPanel> </Grid> </Border> </UserControl>
编写后台依赖属性
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace AyUIDemo1.UserControls { /// <summary> /// InfoCard.xaml 的交互逻辑 /// </summary> public partial class InfoCard : UserControl { public InfoCard() { InitializeComponent(); } public string Title { get { return (string)GetValue(TitleProperty); } set { SetValue(TitleProperty, value); } } public static readonly DependencyProperty TitleProperty = DependencyProperty.Register("Title", typeof(string), typeof(InfoCard)); public string Number { get { return (string)GetValue(NumberProperty); } set { SetValue(NumberProperty, value); } } public static readonly DependencyProperty NumberProperty = DependencyProperty.Register("Number", typeof(string), typeof(InfoCard)); public FontAwesome.Sharp.IconChar Icon { get { return (FontAwesome.Sharp.IconChar)GetValue(IconProperty); } set { SetValue(IconProperty, value); } } public static readonly DependencyProperty IconProperty = DependencyProperty.Register("Icon", typeof(FontAwesome.Sharp.IconChar), typeof(InfoCard)); public Color Background1 { get { return (Color)GetValue(Background1Property); } set { SetValue(Background1Property, value); } } public static readonly DependencyProperty Background1Property = DependencyProperty.Register("Background1", typeof(Color), typeof(InfoCard)); public Color Background2 { get { return (Color)GetValue(Background2Property); } set { SetValue(Background2Property, value); } } public static readonly DependencyProperty Background2Property = DependencyProperty.Register("Background2", typeof(Color), typeof(InfoCard)); public Color EllipseBackground1 { get { return (Color)GetValue(EllipseBackground1Property); } set { SetValue(EllipseBackground1Property, value); } } public static readonly DependencyProperty EllipseBackground1Property = DependencyProperty.Register("EllipseBackground1", typeof(Color), typeof(InfoCard)); public Color EllipseBackground2 { get { return (Color)GetValue(EllipseBackground2Property); } set { SetValue(EllipseBackground2Property, value); } } public static readonly DependencyProperty EllipseBackground2Property = DependencyProperty.Register("EllipseBackground2", typeof(Color), typeof(InfoCard)); } }
前台绑定
<UserControl x:Class="AyUIDemo1.UserControls.InfoCard" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:AyUIDemo1.UserControls" mc:Ignorable="d" xmlns:fa="http://schemas.awesome.incremented/wpf/xaml/fontawesome.sharp" d:DesignHeight="140" d:DesignWidth="316" Width="316" Height="140"> <Border Margin="0 0 25 0"> <Border.Background> <LinearGradientBrush StartPoint="0 0" EndPoint="1,2"> <GradientStop Color="{Binding Background1,RelativeSource={RelativeSource AncestorType={x:Type local:InfoCard},Mode=FindAncestor},Mode=TwoWay}" Offset="0"/> <GradientStop Color="{Binding Background2,RelativeSource={RelativeSource AncestorType={x:Type local:InfoCard},Mode=FindAncestor},Mode=TwoWay}" Offset="1"/> </LinearGradientBrush> </Border.Background> <Border.Clip> <RectangleGeometry RadiusX="15" RadiusY="15" Rect="0,0,291,140"/> </Border.Clip> <Grid> <Ellipse Width="230" Height="230" Margin="0 -130 -90 0" HorizontalAlignment="Right"> <Ellipse.Fill> <LinearGradientBrush> <GradientStop Color="{Binding EllipseBackground1,RelativeSource={RelativeSource AncestorType={x:Type local:InfoCard},Mode=FindAncestor},Mode=TwoWay}" Offset="0"/> <GradientStop Color="{Binding EllipseBackground2,RelativeSource={RelativeSource AncestorType={x:Type local:InfoCard},Mode=FindAncestor},Mode=TwoWay}" Offset="1"/> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> <fa:IconImage Icon="{Binding Icon,RelativeSource={RelativeSource AncestorType={x:Type local:InfoCard},Mode=FindAncestor},Mode=TwoWay}" Margin="0 0 25 25" Width="60" Height="60" Foreground="#FFFFFF" HorizontalAlignment="Right" VerticalAlignment="Center"/> <StackPanel Margin="35 0 0 20" VerticalAlignment="Bottom"> <TextBlock Text="{Binding Title,RelativeSource={RelativeSource AncestorType={x:Type local:InfoCard},Mode=FindAncestor},Mode=TwoWay}" Foreground="#c9e9e9" FontSize="14"/> <TextBlock Text="{Binding Number,RelativeSource={RelativeSource AncestorType={x:Type local:InfoCard},Mode=FindAncestor},Mode=TwoWay}" Foreground="#FFFFFF" FontSize="28" FontWeight="SemiBold"/> </StackPanel> </Grid> </Border> </UserControl>
12 使用信息卡片
<usercontrols:InfoCard Grid.Column="0" Title="总览" Number="654,948" Icon="Eye" Background1="#827bff" Background2="#d9b5ff" EllipseBackground1="#b298fd" EllipseBackground2="#e4bbff"/>
复制2个,修改颜色和值
<!--信息卡片--> <Grid Grid.Row="1" Margin="50 20 15 40"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <usercontrols:InfoCard Grid.Column="0" Title="总览" Number="654,948" Icon="Eye" Background1="#827bff" Background2="#d9b5ff" EllipseBackground1="#b298fd" EllipseBackground2="#e4bbff"/> <usercontrols:InfoCard Grid.Column="1" Title="总订单" Number="192,340" Icon="ShoppingCart" Background1="#fd8a87" Background2="#f3ab92" EllipseBackground1="#fbd5a8" EllipseBackground2="#fdb89b"/> <usercontrols:InfoCard Grid.Column="2" Title="总收入" Number="¥19,532" Icon="Coins" Background1="#fc84cb" Background2="#fc8fae" EllipseBackground1="#fc8fae" EllipseBackground2="#ffabe6"/> </Grid>
13 主内容下半部分 2列
<!--主内容下半部分--> <Grid Grid.Row="2" > <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="300"/> </Grid.ColumnDefinitions> <!--图表--> <Border CornerRadius="20" Padding="35 25" Background="#243771" Margin="50 0 10 40"> </Border> <!--订单部分--> <Border Grid.Column="1" CornerRadius="20" Padding="0 25" Background="#243771" Margin="15 0 47 40"> </Border> </Grid>
14 订单部分
标题样式
<Style x:Key="titleText" TargetType="TextBlock"> <Setter Property="Foreground" Value="#FFFFFF"></Setter> <Setter Property="FontSize" Value="18"/> <Setter Property="FontWeight" Value="SemiBold"/> <Setter Property="Margin" Value="10 0 0 0"/> <Setter Property="VerticalAlignment" Value="Center"/> </Style> <Style x:Key="titleIcon" TargetType="fa:IconImage"> <Setter Property="Width" Value="18"></Setter> <Setter Property="Height" Value="18"/> <Setter Property="Margin" Value="0 3 0 0"/> <Setter Property="Foreground" Value="#7b82ea"/> </Style>
标题使用样式
<!--订单部分--> <Border Grid.Column="1" CornerRadius="20" Padding="0 25" Background="#243771" Margin="15 0 47 40"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <StackPanel Orientation="Horizontal" Margin="20 0 0 15"> <fa:IconImage Icon="Circle" Style="{StaticResource titleIcon}"/> <TextBlock Text="最近订单" Style="{StaticResource titleText}"/> </StackPanel> <!--订单--> </Grid> </Border>
15 订单列表
添加一个用户控件Order
<UserControl x:Class="AyUIDemo1.UserControls.Order" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:AyUIDemo1.UserControls" xmlns:fa="http://schemas.awesome.incremented/wpf/xaml/fontawesome.sharp" mc:Ignorable="d" > <Border Padding="5" Margin="0 5" HorizontalAlignment="Stretch"> <Border.Style> <Style TargetType="Border"> <Setter Property="Background" Value="Transparent"></Setter> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="#364c8f"/> </Trigger> </Style.Triggers> </Style> </Border.Style> <StackPanel Orientation="Horizontal" Background="Yellow"> <Grid Width="45" Height="45" Margin="25 0 0 0"> <Border CornerRadius="10" Background="#152457"/> <fa:IconImage Icon="Eye" Foreground="#bcc6e6" Width="25"/> </Grid> <StackPanel Margin="10 0 0 0" VerticalAlignment="Center"> <TextBlock Text="hello" FontSize="14" Foreground="#7c8dc3"/> <TextBlock Text="AAAYYY" FontSize="11" Foreground="#7c8dc3" Margin="0 3 0 0"/> </StackPanel> </StackPanel> </Border> </UserControl>
后台添加依赖属性,绑定
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace AyUIDemo1.UserControls { /// <summary> /// Order.xaml 的交互逻辑 /// </summary> public partial class Order : UserControl { public Order() { InitializeComponent(); } public string Title { get { return (string)GetValue(TitleProperty); } set { SetValue(TitleProperty, value); } } public static readonly DependencyProperty TitleProperty = DependencyProperty.Register("Title", typeof(string), typeof(Order)); public string Desc { get { return (string)GetValue(DescProperty); } set { SetValue(DescProperty, value); } } public static readonly DependencyProperty DescProperty = DependencyProperty.Register("Desc", typeof(string), typeof(Order)); public FontAwesome.Sharp.IconChar Icon { get { return (FontAwesome.Sharp.IconChar)GetValue(IconProperty); } set { SetValue(IconProperty, value); } } public static readonly DependencyProperty IconProperty = DependencyProperty.Register("Icon", typeof(FontAwesome.Sharp.IconChar), typeof(Order)); } }
xaml修改
<UserControl x:Class="AyUIDemo1.UserControls.Order" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:AyUIDemo1.UserControls" xmlns:fa="http://schemas.awesome.incremented/wpf/xaml/fontawesome.sharp" mc:Ignorable="d" > <Border Padding="5" Margin="0 5" HorizontalAlignment="Stretch"> <Border.Style> <Style TargetType="Border"> <Setter Property="Background" Value="Transparent"></Setter> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="#364c8f"/> </Trigger> </Style.Triggers> </Style> </Border.Style> <StackPanel Orientation="Horizontal"> <Grid Width="45" Height="45" Margin="25 0 0 0"> <Border CornerRadius="10" Background="#152457"/> <fa:IconImage Icon="{Binding Icon,RelativeSource={RelativeSource AncestorType={x:Type local:Order},Mode=FindAncestor},Mode=TwoWay}" Foreground="#bcc6e6" Width="25"/> </Grid> <StackPanel Margin="10 0 0 0" VerticalAlignment="Center"> <TextBlock Text="{Binding Title,RelativeSource={RelativeSource AncestorType={x:Type local:Order},Mode=FindAncestor},Mode=TwoWay}" FontSize="14" Foreground="#7c8dc3"/> <TextBlock Text="{Binding Desc,RelativeSource={RelativeSource AncestorType={x:Type local:Order},Mode=FindAncestor},Mode=TwoWay}" FontSize="11" Foreground="#7c8dc3" Margin="0 3 0 0"/> </StackPanel> </StackPanel> </Border> </UserControl>
16 回到主页面,添加列表项
F6编译下,方便xaml页面能智能提示
<!--订单--> <StackPanel Orientation="Vertical" Grid.Row="1"> <usercontrols:Order Title="T恤 李宁" Desc="杨洋 - 10:12" Icon="Tshirt"/> <usercontrols:Order Title="鞋 鸿星尔克" Desc="十年 - 12:05" Icon="ShoePrints"/> <usercontrols:Order Title="袜 李宁" Desc="张三 - 13:34" Icon="Socks"/> <usercontrols:Order Title="T恤 Pumb" Desc="杨洋 - 14:30" Icon="Tshirt"/> <usercontrols:Order Title="帽子 安踏" Desc="杨洋 - 15:58" Icon="HardHat"/> </StackPanel>
17 添加图表区域,画坐标轴
还是两行,跟右边保持一致
<!--图表--> <Border CornerRadius="20" Padding="35 25" Background="#243771" Margin="50 0 10 40"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <StackPanel Orientation="Horizontal" Margin="0 0 0 25"> <fa:IconImage Icon="Circle" Style="{StaticResource titleIcon}"/> <TextBlock Text="利润" Style="{StaticResource titleText}"/> </StackPanel> </Grid> </Border>
画两个坐标轴,实际使用这里会用 图表控件,下方只是演示 常用控件怎么使用
<Border CornerRadius="20" Padding="35 25" Background="#243771" Margin="50 0 10 40"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <StackPanel Orientation="Horizontal" Margin="0 0 0 25"> <fa:IconImage Icon="Circle" Style="{StaticResource titleIcon}"/> <TextBlock Text="利润" Style="{StaticResource titleText}"/> </StackPanel> <StackPanel HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0 0 0 25" Grid.Row="1"> <TextBlock Text="60000" Foreground="#717eb2" Margin="0 0 0 25"/> <TextBlock Text="50000" Foreground="#717eb2" Margin="0 0 0 25"/> <TextBlock Text="40000" Foreground="#717eb2" Margin="0 0 0 25"/> <TextBlock Text="30000" Foreground="#717eb2" Margin="0 0 0 25"/> <TextBlock Text="20000" Foreground="#717eb2" Margin="0 0 0 25"/> <TextBlock Text="10000" Foreground="#717eb2" Margin="0 0 0 25"/> <TextBlock Text="0" Foreground="#717eb2" HorizontalAlignment="Right"/> </StackPanel> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="50 0 0 0" Grid.Row="1"> <TextBlock Text="1" Foreground="#717eb2" /> <TextBlock Text="2" Foreground="#717eb2" Margin="41 0 0 0"/> <TextBlock Text="3" Foreground="#717eb2" Margin="41 0 0 0"/> <TextBlock Text="4" Foreground="#717eb2" Margin="41 0 0 0"/> <TextBlock Text="5" Foreground="#717eb2" Margin="41 0 0 0"/> <TextBlock Text="6" Foreground="#717eb2" Margin="41 0 0 0"/> <TextBlock Text="7" Foreground="#717eb2" Margin="41 0 0 0"/> <TextBlock Text="9" Foreground="#717eb2" Margin="41 0 0 0"/> <TextBlock Text="10" Foreground="#717eb2" Margin="41 0 0 0"/> <TextBlock Text="11" Foreground="#717eb2" Margin="41 0 0 0"/> <TextBlock Text="12" Foreground="#717eb2" Margin="41 0 0 0"/> </StackPanel> </Grid> </Border>
18 使用图表
安装 Live Chart WPF
framework项目使用
我是net6项目使用
点击安装
顶部引用 xmlns:wpf="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
使用:
x轴 ,y轴
<wpf:CartesianChart.AxisX> <wpf:Axis MinValue="1" MaxValue="5" Foreground="#717eb2" ShowLabels="False"> <wpf:Axis.Separator> <wpf:Separator StrokeThickness="0"/> </wpf:Axis.Separator> </wpf:Axis> </wpf:CartesianChart.AxisX> <wpf:CartesianChart.AxisY> <wpf:Axis MinValue="0" MaxValue="60000" Foreground="#717eb2" ShowLabels="False"> <wpf:Axis.Separator> <wpf:Separator StrokeThickness="0"/> </wpf:Axis.Separator> </wpf:Axis> </wpf:CartesianChart.AxisY>
19 我们给图表添加 数据
<!--图表--> <wpf:CartesianChart Grid.Row="1" Margin="45 0 0 25"> <wpf:CartesianChart.Background> <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Color="#26376f" Offset="0"/> <GradientStop Color="#6a6ae4" Offset="1.5"/> </LinearGradientBrush> </wpf:CartesianChart.Background> <wpf:CartesianChart.DataTooltip> <wpf:DefaultTooltip Background="#24336a" Foreground="#d5e2ff"/> </wpf:CartesianChart.DataTooltip> <wpf:CartesianChart.AxisX> <wpf:Axis MinValue="1" MaxValue="5" Foreground="#717eb2" ShowLabels="False"> <wpf:Axis.Separator> <wpf:Separator StrokeThickness="0"/> </wpf:Axis.Separator> </wpf:Axis> </wpf:CartesianChart.AxisX> <wpf:CartesianChart.AxisY> <wpf:Axis MinValue="0" MaxValue="60000" Foreground="#717eb2" ShowLabels="False"> <wpf:Axis.Separator> <wpf:Separator StrokeThickness="0"/> </wpf:Axis.Separator> </wpf:Axis> </wpf:CartesianChart.AxisY> <wpf:CartesianChart.Series> <wpf:LineSeries Stroke="#ada4fd" StrokeThickness="2" PointGeometrySize="0" Values="20000,17000,30000,15000,50000,30000,20000"> <wpf:LineSeries.Fill> <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Color="#b397e2" Offset="0.4"/> <GradientStop Color="#6a6ae4" Offset="1.2"/> </LinearGradientBrush> </wpf:LineSeries.Fill> </wpf:LineSeries> </wpf:CartesianChart.Series> </wpf:CartesianChart>
20 我们演示下效果
====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========
引用库:
livecharts.wpf.core 提供图表
推荐您阅读更多有关于“wpf in net6,”的文章
抖音:wpfui 工作wpf
目前在合肥企迈科技公司上班,加我QQ私聊
2023年11月网站停运,将搬到CSDN上
AYUI8全源码 Github地址:前往获取
杨洋(AaronYang简称AY,安徽六安人)和AY交流
高中学历,2010年开始web开发,2015年1月17日开始学习WPF
声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费
查看捐赠AYUI7.X MVC教程 更新如下:
第一课 第二课 程序加密教程
额 本文暂时没人评论 来添加一个吧
发表评论