WPF学习笔记-数据采集与监控项目03-课程总览（ItemsControl控件）
以下是学习笔记：
https://www.bilibili.com/video/BV1gq4y1D76d?p=57&spm_id_from=pageDriver&vd_source=3f21d2e208ef0bf2c49a9be7560735e5
重点内容：学习课程总览的数据绑定
1，滚动页面效果：
把页面放入ScrollViewer中
2，课程总览的页面
<!--课程总览，第3行-->
<Grid Margin="10,0" Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--第一行的标题-->
<TextBlock Text="课程总览" Foreground="#3f4c5d" VerticalAlignment="Center" FontSize="15"
FontWeight="Bold"/>
<TextBlock HorizontalAlignment="right" VerticalAlignment="Center">
<Hyperlink FontSize="15">详情</Hyperlink>
</TextBlock>
<!--第二行的课程展示，这个最重要-->
<ItemsControl ItemsSource="{Binding CourseSeriesList}" Grid.Row="1">
<!--需要修改容器模板-->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Background="White" CornerRadius="10">
<Border.Effect>
<DropShadowEffect Color="Gray" ShadowDepth="0" BlurRadius="10" Opacity="0.2" Direction="0"></DropShadowEffect>
</Border.Effect>
<Grid Height="70">
<!--分成三列-->
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition Width="3.5*"/>
</Grid.ColumnDefinitions> <!--三列之间的分割竖线-->
<Border BorderBrush="#ddd" BorderThickness="0,0,1,0" Margin="0,10"/>
<Border BorderBrush="#ddd" BorderThickness="0,0,1,0" Margin="0,10" Grid.Column="1"/> <!--第一列-->
<TextBlock Text="{Binding CourseName}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="#444"/> <!--第二列-->
<lvc:PieChart Grid.Column="1" LegendLocation="Right" InnerRadius="10" Margin="0,0,10,0" Series="{Binding SeriesCollection}">
<!--<lvc:PieChart.Series>-->
<!--<lvcs:SeriesCollection>
<lvc:PieSeries Title="111" Values="12" DataLabels="False"/>
<lvc:PieSeries Title="111" Values="12" DataLabels="False"/>
<lvc:PieSeries Title="111" Values="12" DataLabels="False"/>
<lvc:PieSeries Title="111" Values="12" DataLabels="False"/>
<lvc:PieSeries Title="111" Values="12" DataLabels="False"/>
</lvcs:SeriesCollection>
</lvc:PieChart.Series>-->
<lvc:PieChart.ChartLegend>
<lvc:DefaultLegend BulletSize="10"/>
</lvc:PieChart.ChartLegend>
<lvc:PieChart.DataTooltip>
<lvc:DefaultLegend BulletSize="10"/>
</lvc:PieChart.DataTooltip>
</lvc:PieChart> <!--第三列-->
<ItemsControl Grid.Column="2" ItemsSource="{Binding SeriesLsit}">
<!--修改控件模板-->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<!--设置列数，超过5列自动换行-->
<!--<UniformGrid Columns="5"/>-->
<!--设置动态的列数-->
<UniformGrid Columns="{Binding DataContext.ItemCount,RelativeSource={RelativeSource AncestorType=UserControl,Mode=FindAncestor}}"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition MinHeight="24"/>
<RowDefinition MinHeight="24"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding SeriesName}" VerticalAlignment="Center"/>
<TextBlock Text="{Binding CurrentValue}" Grid.Row="1" VerticalAlignment="Center"/>
<TextBlock Text="{Binding IsGrowing ,Converter={StaticResource BoolToArrowConverter_suibian}}"
Foreground="{Binding IsGrowing,Converter={StaticResource BoolToBrushConverter_suibian}}" Grid.Column="1" VerticalAlignment="Center" Margin="10,0,0,0"/>
<TextBlock Text="{Binding ChangeRate}" Grid.Column="1"
Foreground="{Binding IsGrowing,Converter={StaticResource BoolToBrushConverter_suibian}}" Grid.Row="1" VerticalAlignment="Center" Margin="10,0,0,0"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<!--第三列的原始草稿模板-->
<!--<UniformGrid Columns="5" Grid.Column="2">
<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="云课堂"/>
<TextBlock Text="161" Grid.Row="1"/>
<TextBlock Text="|" Grid.Column="1"/>
<TextBlock Text="75%" Grid.Column="1" Grid.Row="1"/>
</Grid>
</UniformGrid>--> </Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
3，Model
/// <summary>
/// 课程类
/// </summary>
public class CourseServiceModel
{
public string CourseName { get; set; }
public SeriesCollection SeriesCollection { get; set; }
public ObservableCollection<SeriesModel> SeriesLsit { get; set; }
}
4,ViewModel
public class FirstPageViewModel:NotifyBase
{
private int _instrumentValue=0; public int InstrumentValue
{
get { return _instrumentValue; }
set { _instrumentValue = value; this.DoNotify(); }
} private int _itemCount;
//设置一个变量，给一个动态数量排列
public int ItemCount
{
get { return _itemCount; }
set { _itemCount = value; this.DoNotify(); }
} /// <summary>
/// 课程集合
/// </summary>
public ObservableCollection<CourseServiceModel> CourseSeriesList { get; set; }=new ObservableCollection<CourseServiceModel>(); Random random=new Random(); /// <summary>
/// 线程的开关
/// </summary>
private bool taskSwitch=true; /// <summary>
/// 开启的线程集合
/// </summary>
List<Task> tasklList=new List<Task>(); public FirstPageViewModel()
{
this.RefreshInstrumentValue();
this.InitCourseSeries();
} void InitCourseSeries()
{
#region 测试添加数据 //CourseSeriesList.Add(new CourseServiceModel()
//{ // CourseName = "Java从入门到放弃",
// SeriesCollection = new SeriesCollection()
// {
// new PieSeries()
// {
// Title = "1111",
// Values = new ChartValues<ObservableValue> {(new ObservableValue(10))},
// DataLabels = false,
// },
// new PieSeries()
// {
// Title = "2222",
// Values = new ChartValues<ObservableValue> {(new ObservableValue(20))},
// DataLabels = false,
// },
// new PieSeries()
// {
// Title = "3333",
// Values = new ChartValues<ObservableValue> {(new ObservableValue(30))},
// DataLabels = false,
// },
// new PieSeries()
// {
// Title = "4444",
// Values = new ChartValues<ObservableValue> {(new ObservableValue(40))},
// DataLabels = false,
// },
// },
// SeriesLsit = new ObservableCollection<SeriesModel>()
// {
// new SeriesModel(){SeriesName = "云课堂1",CurrentValue = 161,IsGrowing = false,ChangeRate = 75},
// new SeriesModel(){SeriesName = "云课堂2",CurrentValue = 161,IsGrowing = true,ChangeRate = 50},
// new SeriesModel(){SeriesName = "云课堂3",CurrentValue = 161,IsGrowing = false,ChangeRate = 90},
// new SeriesModel(){SeriesName = "云课堂4",CurrentValue = 161,IsGrowing = true,ChangeRate = 85},
// new SeriesModel(){SeriesName = "云课堂5",CurrentValue = 161,IsGrowing = false,ChangeRate = 78},
// }
//});
//CourseSeriesList.Add(new CourseServiceModel()
//{
// CourseName = "Java从入门到放弃",
// SeriesCollection = new SeriesCollection()
// {
// new PieSeries()
// {
// Title = "1111",
// Values = new ChartValues<ObservableValue> {(new ObservableValue(10))},
// DataLabels = false,
// },
// new PieSeries()
// {
// Title = "2222",
// Values = new ChartValues<ObservableValue> {(new ObservableValue(20))},
// DataLabels = false,
// },
// new PieSeries()
// {
// Title = "3333",
// Values = new ChartValues<ObservableValue> {(new ObservableValue(30))},
// DataLabels = false,
// },
// new PieSeries()
// {
// Title = "4444",
// Values = new ChartValues<ObservableValue> {(new ObservableValue(40))},
// DataLabels = false,
// },
// },
// SeriesLsit = new ObservableCollection<SeriesModel>()
// {
// new SeriesModel(){SeriesName = "云课堂1",CurrentValue = 161,IsGrowing = false,ChangeRate = 75},
// new SeriesModel(){SeriesName = "云课堂2",CurrentValue = 161,IsGrowing = true,ChangeRate = 50},
// new SeriesModel(){SeriesName = "云课堂3",CurrentValue = 161,IsGrowing = false,ChangeRate = 90},
// new SeriesModel(){SeriesName = "云课堂4",CurrentValue = 161,IsGrowing = true,ChangeRate = 85},
// new SeriesModel(){SeriesName = "云课堂5",CurrentValue = 161,IsGrowing = false,ChangeRate = 78},
// new SeriesModel(){SeriesName = "其他",CurrentValue = 161,IsGrowing = false,ChangeRate = 78},
// }
//}); #endregion var cList = LocalDataAccess.GetInstance().GetCoursePlayRecord();
//获取最大的数量
this.ItemCount = cList.Max(c => c.SeriesLsit.Count); //【特别注意】用这个方式，相当于把之前的对象替换掉了，页面接收不到数据的
//this.CourseSeriesList = new ObservableCollection<CourseServiceModel>(cList); //要使用CourseSeriesList.Add(item)方式，页面才能接收到数据
foreach (var item in cList)
{
this.CourseSeriesList.Add(item);
}
} void RefreshInstrumentValue()
{
var task = Task.Factory.StartNew(new Action(async () =>
{
while (taskSwitch)
{
//0和100是最大值和最小值，这里为了演示效果是写死的，后期可用变量替代。
InstrumentValue = random.Next(Math.Max(this.InstrumentValue - 5,0), Math.Min( this.InstrumentValue + 5,100)); //停顿1秒刷新
await Task.Delay(1000);
}
}));
tasklList.Add(task);
} public void Dispose()
{
try
{
taskSwitch = false; //等待所有线程结束
Task.WaitAll(this.tasklList.ToArray());
}
catch (Exception e)
{
}
} }
5，数据的查询
public List<CourseServiceModel> GetCoursePlayRecord()
{
try
{
List<CourseServiceModel> cModelList = new List<CourseServiceModel>();
if (DBConnection())
{
string userSql = @"select a.course_name,a.course_id ,b.play_count,b.is_growing,b.growing_rate
, c.platforms_name
from courses a
left join play_record b
on a.course_id = b.course_id
left join platforms c
on b.platform_id = c.platforms_id
order by a.course_id,c.platforms_id"; adapter = new SqlDataAdapter(userSql, conn);
DataTable table = new DataTable();
int count = adapter.Fill(table); string courseId = "";
CourseServiceModel cModel = null;
foreach (DataRow dr in table.AsEnumerable())
{
string tempId = dr.Field<string>("course_id");
if (courseId != tempId)
{
courseId = tempId;
cModel = new CourseServiceModel();
cModelList.Add(cModel); cModel.CourseName = dr.Field<string>("course_name");
cModel.SeriesCollection = new LiveCharts.SeriesCollection();
cModel.SeriesLsit = new ObservableCollection<SeriesModel>();
} if (cModel != null)
{
cModel.SeriesCollection.Add(new PieSeries()
{
Title = dr.Field<string>("platforms_name"),
Values = new ChartValues<ObservableValue>
{(new ObservableValue(dr.Field<int>("play_count")))},
DataLabels = false
});
} cModel.SeriesLsit.Add(new SeriesModel()
{
SeriesName = dr.Field<string>("platforms_name"),
CurrentValue = dr.Field<int>("play_count"),
IsGrowing = dr.Field<int>("is_growing") == 1,
ChangeRate = dr.Field<int>("growing_rate"),
});
} } return cModelList;
}
catch (Exception e)
{
throw e;
}
finally
{
this.Dispose();
} }
单选框效果
1，控件模板
<UserControl.Resources>
<ControlTemplate TargetType="RadioButton" x:Key="CategoryItemButtonTemplate">
<!--定义视觉树-->
<Grid Background="Transparent" Margin="10,0">
<Border Background="#eee" CornerRadius="5" Name="back">
<TextBlock Text="{TemplateBinding Content}" Margin="15,6" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
</Grid>
<!--定义视觉树_End-->
<!--定义触发器-->
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="Orange" TargetName="back"/>
<Setter Property="Foreground" Value="white"/>
</Trigger>
</ControlTemplate.Triggers>
<!--定义触发器_End-->
</ControlTemplate>
</UserControl.Resources>
2，
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<TextBlock Text="课程分类" VerticalAlignment="Center" />
<!--ItemsSource用来数据绑定-->
<ItemsControl ItemsSource="{Binding CategoryCourses}">
<!--布局进行控制的面板-->
<ItemsControl.ItemsPanel>
<!--控件的容器外观-->
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<!--数据模板-->
<DataTemplate>
<!--使用分组GroupName="course"使每一行相互隔离-->
<RadioButton Content="{Binding CategoryName}" IsChecked="{Binding IsSelected}"
Template="{StaticResource CategoryItemButtonTemplate}" GroupName="course"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel> <StackPanel Orientation="Horizontal" Grid.Row="1" VerticalAlignment="Center">
<TextBlock Text="技术分类" VerticalAlignment="Center" />
<ItemsControl ItemsSource="{Binding CategoryTechnology}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<RadioButton Content="{Binding CategoryName}" IsChecked="{Binding IsSelected}"
Template="{StaticResource CategoryItemButtonTemplate}" GroupName="technology"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel> <StackPanel Orientation="Horizontal" Grid.Row="2" VerticalAlignment="Center">
<TextBlock Text="授课老师" VerticalAlignment="Center" />
<ItemsControl ItemsSource="{Binding CategoryTeacher}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<RadioButton Content="{Binding CategoryName}" IsChecked="{Binding IsSelected}"
Template="{StaticResource CategoryItemButtonTemplate}" GroupName="teacher"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
3，
public class CoursePageViewModel
{
public ObservableCollection<CategoryItemModel> CategoryCourses { get; set; }
public ObservableCollection<CategoryItemModel> CategoryTechnology { get; set; }
public ObservableCollection<CategoryItemModel> CategoryTeacher { get; set; } public CoursePageViewModel()
{
this.CategoryCourses = new ObservableCollection<CategoryItemModel>();
this.CategoryCourses.Add(new CategoryItemModel("全部", true));
this.CategoryCourses.Add(new CategoryItemModel("公开课"));
this.CategoryCourses.Add(new CategoryItemModel("VIP课程")); this.CategoryTechnology = new ObservableCollection<CategoryItemModel>();
this.CategoryTechnology.Add(new CategoryItemModel("全部", true));
this.CategoryTechnology.Add(new CategoryItemModel("C#"));
this.CategoryTechnology.Add(new CategoryItemModel("Python")); this.CategoryTeacher = new ObservableCollection<CategoryItemModel>();
this.CategoryTeacher.Add(new CategoryItemModel("全部", true));
this.CategoryTeacher.Add(new CategoryItemModel("Jason"));
this.CategoryTeacher.Add(new CategoryItemModel("Mason"));
}
}
WPF学习笔记-数据采集与监控项目03-课程总览（ItemsControl控件）的更多相关文章
- WPF学习笔记（四）：AvalonEdit 代码高亮编辑控件专题
AvalonEdit 是一个基于 WPF 的文本编辑器组件.它是由 Daniel Grunwald 为 SharpDevelop 编写的.从 5.0 版开始,AvalonEdit 根据MIT许可证发布 ...
- 【WPF学习】第六十五章 创建无外观控件
用户控件的目标是提供增补控件模板的设计表面,提供一种定义控件的快速方法,代价是失去了将来的灵活性.如果喜欢用户控件的功能,但需要修改使其可视化外观,使用这种方法就有问题了.例如,设想希望使用相同的颜色 ...
- 学习笔记找到多个具有相同 ID“_header”的控件,FindControl 要求控件具有唯一的 ID.
解决 找到多个具有相同 ID“_header”的控件,FindControl 要求控件具有唯一的 ID. private void DisplayHotBooks() { //获取 ...
- WPF学习笔记-用Expression Design制作矢量图然后导出为XAML
WPF学习笔记-用Expression Design制作矢量图然后导出为XAML 第一次用Windows live writer写东西,感觉不错,哈哈~~ 1.在白纸上完全凭感觉,想象来画图难度很大, ...
- WPF 学习笔记－在WPF下创建托盘图标
原文:WPF 学习笔记-在WPF下创建托盘图标 首先需要在项目中引用System.Windows.Forms,System.Drawing; using System; using System.Co ...
- WPF 学习笔记－设置属性使窗口不可改变大小
原文:WPF 学习笔记-设置属性使窗口不可改变大小 调整Windows下的ResizeMode属性: ResizeMode = NoResize Resize属性是控制Windows是否可以改变大小, ...
- WPF学习笔记（8）：DataGrid单元格数字为空时避免验证问题的解决
原文:WPF学习笔记(8):DataGrid单元格数字为空时避免验证问题的解决 如下图,在凭证编辑窗体中,有的单元格不需要数字,但如果录入数字后再删除,会触发数字验证,单元格显示红色框线,导致不能执行 ...
- zabbix学习笔记：zabbix监控之短信报警
zabbix学习笔记:zabbix监控之短信报警 zabbix的报警方式有多种,除了常见的邮件报警外,特殊情况下还需要设置短信报警和微信报警等额外方式.本篇文章向大家介绍短信报警. 短信报警设置 短信 ...
- C# WPF 低仿网易云音乐（PC）Banner动画控件
原文:C# WPF 低仿网易云音乐(PC)Banner动画控件 由于技术有限没能做到一模一样的动画,只是粗略地做了一下.动画有点生硬,还有就是没做出网易云音乐的立体感.代码非常简单粗暴,而且我也写有很 ...
- WPF编程，通过Double Animation同时动态缩放和旋转控件的一种方法。
原文:WPF编程,通过Double Animation同时动态缩放和旋转控件的一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_4330793 ...
随机推荐
- Vue过滤案例、按键修饰符、数据双向绑定
目录 Vue过滤案例.按键修饰符.数据双向绑定 一.v-for能循环的类型 二.js的几种循环方式 三.key值的解释 四.数组.对象的检测与更新 五.input的几个事件 六.事件修饰符 七.按键修 ...
- 跟着廖雪峰学python 005
函数的调用.定义.参数 编辑 #######命名关键字参数没完 abs()函数:绝对值 >>> abs(100) 100 >>> abs(-20) 20 ma ...
- JavaScript的this指向详解
一.概念: 函数的上下文(this)由调用函数的方式决定,function是"运行时上下文"策略: 函数如果不调用,则不能确定函数的上下文. 二.规则: 对象打点调用它的方法函数, ...
- JumpServer(v2.28.6) 堡垒机常见问题
JumpServer 各组件查询日志方法 # 默认持久化目录 /data/jumpserver ls -al /data/jumpserver/core/logs ls -al /data/jumps ...
- async异步编程屏蔽凡人
为提高效率与增加逼格,墙裂建议引入async异步编程,这不比基于threading的线程.基于multiprocessing的进程香?这些大家伙太重量级了,代码又啰里啰唆的一点也不pythonic,只 ...
- 【USACO 2021 US Open, Platinum】United Cows of Farmer John
\(\text{Solution}\) 简要的口胡 线段树维护合法左端点数量 正序枚举 \(i\),将其视为右端点,去除不合法的左端点,统计贡献 再将其视为中间点,由它产生的左端点在线段树上区间加 注 ...
- Centos7-RAID冗余磁盘阵列
转载csdn: Centos7-RAID冗余磁盘阵列_黏住你不让你的博客-CSDN博客
- 内网安全之：黄金&白银票据传递域控制器权限维持
内网安全之:黄金&白银票据传递域控制器权限维持 目录 内网安全之:黄金&白银票据传递域控制器权限维持 1 Golden Ticket 1.1 导出 krbtgt 的 NTLM Hash ...
- 04#Web 实战：Gitee 贡献图
前言 这次要做的 Web 前端实战是一个 Gitee 个人主页下的贡献图(在线 Demo),偶尔做一两个,熟悉熟悉 JS 以及 jQ.整体来说这个案例并不难,主要是控制第一个节点以及最后一个节点处于星 ...
- OpenLayers多源数据加载
一.实验内容 栅格瓦片数据加载: 矢量数据加载: 矢量瓦片数据加载. 二.实验步骤 2.1 加载已经封装的在线瓦片地图 <!DOCTYPE html> <html lang=&quo ...