html
<UserControl
x:Class="NavTest.Views.Page5"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:cv="clr-namespace:NavTest.Components"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:dp="clr-namespace:NavTest.Assets.Dp"
xmlns:hc="https://handyorg.github.io/handycontrol"
xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
xmlns:local="clr-namespace:NavTest.Views"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:mv="clr-namespace:NavTest.ViewModels"
d:DataContext="{d:DesignInstance mv:Page5ViewModel}"
d:DesignHeight="450"
d:DesignWidth="800"
Background="Transparent"
FontSize="50"
mc:Ignorable="d">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.1*" />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<dp:CostomTextBox
dp:TextBoxHelper.Title="this addition"
IsHighLighted="True"
Text="{Binding RelativeSource={RelativeSource Mode=Self}, Path=(dp:TextBoxHelper.Title)}" />
<TextBlock Background="{Binding MyBrush}" Text="ddd" />
</StackPanel>
<Border
Grid.Row="1"
BorderBrush="Yellow"
BorderThickness="2"
CornerRadius="10">
<Border.Background>
<LinearGradientBrush>
<GradientStop Offset="0.1" Color="#d378ff" />
<GradientStop Offset="0.5" Color="#7895ff" />
<GradientStop Offset="1" Color="#5ad7fd" />
</LinearGradientBrush>
</Border.Background>
<DataGrid
x:Name="myDataGrid"
Margin="30"
AutoGenerateColumns="False"
Background="Transparent"
BorderBrush="#CDCDCD"
CanUserAddRows="False"
ColumnHeaderHeight="40"
ColumnWidth="*"
GridLinesVisibility="None"
IsReadOnly="True"
ItemsSource="{Binding MyStudents}"
RowDetailsVisibilityMode="Collapsed"
RowHeaderWidth="0"
RowHeight="40"
SelectedIndex="{Binding DetailInex}">
<DataGrid.ColumnHeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="Foreground" Value="#1B1B1B" />
<Setter Property="BorderThickness" Value="0,0,0,1" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
</DataGrid.ColumnHeaderStyle>
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Setter Property="BorderThickness" Value="0,0,0,1" />
</Style>
</DataGrid.RowStyle>
<DataGrid.CellStyle>
<Style TargetType="DataGridCell">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridCell">
<Border Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" Content="{TemplateBinding Content}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.CellStyle>
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<Grid
Width="680"
Height="300"
Margin="10,3,10,3">
<DataGrid
Margin="30"
AutoGenerateColumns="False"
Background="White"
BorderBrush="#CDCDCD"
CanUserAddRows="False"
ColumnHeaderHeight="40"
ColumnWidth="*"
IsReadOnly="True"
ItemsSource="{Binding MyCourse}"
RowHeaderWidth="0"
RowHeight="30">
<DataGrid.ColumnHeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="Foreground" Value="#1B1B1B" />
<Setter Property="BorderThickness" Value="0,0,0,1" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
</DataGrid.ColumnHeaderStyle>
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Setter Property="BorderThickness" Value="0,0,0,1" />
</Style>
</DataGrid.RowStyle>
<DataGrid.CellStyle>
<Style TargetType="DataGridCell">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridCell">
<Border Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" Content="{TemplateBinding Content}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.CellStyle>
<DataGrid.Columns>
<DataGridTextColumn
Binding="{Binding CourseName}"
Foreground="Black"
Header="课程名称" />
<DataGridTextColumn
Binding="{Binding Teacher}"
Foreground="Black"
Header="教师" />
<DataGridTextColumn
Binding="{Binding Score}"
Foreground="Black"
Header="分数" />
<DataGridTextColumn
Binding="{Binding Classroom}"
Foreground="Black"
Header="教室" />
</DataGrid.Columns>
</DataGrid>
</Grid>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
<DataGrid.Columns>
<DataGridTemplateColumn Width="30">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ToggleButton
Width="15"
Height="15"
BorderThickness="0"
Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=DataContext.DetailCommand}"
CommandParameter="{Binding ElementName=myDataGrid}"
FontFamily="{StaticResource fontAwesome}">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="FontFamily" Value="{StaticResource fontAwesome}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border
x:Name="border"
Width="15"
Height="15">
<TextBlock
x:Name="textBlock"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Text="" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="textBlock" Property="TextBlock.Text" Value="" />
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="textBlock" Property="TextBlock.Text" Value="" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn
Binding="{Binding Id}"
Foreground="Black"
Header="Id" />
<DataGridTextColumn
Binding="{Binding Name}"
Foreground="Black"
Header="姓名" />
<DataGridTextColumn
Binding="{Binding Age}"
Foreground="Black"
Header="年龄" />
</DataGrid.Columns>
</DataGrid>
</Border>
</Grid>
</UserControl>
csharp
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using NavTest.Eneities;
using NavTest.Service.Ioc;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Windows.Controls;
using System.Windows.Media;
namespace NavTest.ViewModels
{
public partial class Page5ViewModel : ObservableObject, ISingleton
{
private readonly PLCModels pLCModelsIoc;
public Page5ViewModel(PLCModels pLCModelsIoc)
{
this.pLCModelsIoc = pLCModelsIoc;
this.PLCModels = pLCModelsIoc.pLCModels;
MyBrush = new SolidColorBrush(Colors.Red);
for (int i = 0; i < 50; i++)
{
MyStudents.Add(
new()
{
Id = i,
Age = $"{i + 10}",
Name = $"Name{i + 5}",
MyCourse = new()
{
new Course()
{
CourseName = "语文",
Teacher = "张老师",
Score = i + 60,
Classroom = $"教室{i}"
},
new Course()
{
CourseName = "英语",
Teacher = "李老师",
Score = i + 61,
Classroom = $"教室{i}"
}
,
new Course()
{
CourseName = "数学",
Teacher = "张老师",
Score = i + 60,
Classroom = $"教室{i}"
}
,
new Course()
{
CourseName = "语文",
Teacher = "张老师",
Score = i + 60,
Classroom = $"教室{i}"
}
,
new Course()
{
CourseName = "语文",
Teacher = "张老师",
Score = i + 60,
Classroom = $"教室{i}"
}
}
}
);
}
}
[ObservableProperty]
private ObservableCollection<PLCModel> pLCModels;
[ObservableProperty]
private Brush myBrush;
[ObservableProperty]
private List<Student> myStudents = new();
[ObservableProperty]
private int detailInex;
[RelayCommand]
public void Detail(DataGrid dataGrid)
{
DataGridRow dataGridRow = (DataGridRow)dataGrid.ItemContainerGenerator.ContainerFromIndex(DetailInex);
if (dataGridRow.DetailsVisibility == System.Windows.Visibility.Visible)
{
dataGridRow.DetailsVisibility = System.Windows.Visibility.Collapsed;
}
else
{
dataGridRow.DetailsVisibility = System.Windows.Visibility.Visible;
}
}
}
}
csharp
public class Student
{
public int Id { get; set; }
public string? Name { get; set; }
public string? Description { get; set; }
public string? Age { get; set; }
public List<Course>? MyCourse { get; set; }
}
csharp
public class Course
{
public string? CourseName { get; set; }
public string? Teacher { get; set; }
public int? Score { get; set; }
public string? Classroom { get; set; }
}效果:
