先上效果图:后面是实现和样式代码
<GroupBox Header="项目列表" Grid.Row="1" Margin="10,20,0,0">
<ItemsControl Margin="0,45,0,0">
<ItemsControl.ItemsSource>
<x:Array Type="sys:String">
<sys:String>项目1</sys:String>
<sys:String>项目2</sys:String>
<sys:String>项目3</sys:String>
<sys:String>项目4</sys:String>
<sys:String>项目5</sys:String>
<sys:String>项目6</sys:String>
</x:Array>
</ItemsControl.ItemsSource>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<!--第一种情况-->
<Grid Margin="5" Name="state1" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Background="#F1F4FF" Grid.RowSpan="4" CornerRadius="5"/>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left"
Margin="10,0">
<Border Width="18" Height="18" CornerRadius="5" Background="#5966F3">
<TextBlock Text="1" VerticalAlignment="Center" HorizontalAlignment="Center"
Foreground="White"/>
</Border>
<TextBlock Text="{Binding}" VerticalAlignment="Center" Margin="10,0"/>
</StackPanel>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Right"
Margin="10,0" FontSize="10">
<Run Text="进度83%" Foreground="#999"/>
<Run Text="还剩52天" Foreground="#5966F3" FontWeight="Thin"/>
</TextBlock>
<ProgressBar Height="3" Foreground="#5966F3" Background="#CDD1E2" Grid.Row="1"
Margin="10,3" Value="45"/>
<TextBlock Text="20230927" Foreground="#DDD" HorizontalAlignment="Left"
Grid.Row="2" FontSize="10" Margin="10,0"/>
<TextBlock Text="20230927" Foreground="#DDD" HorizontalAlignment="Right"
Grid.Row="2" FontSize="10" Margin="10,0"/>
<Grid Grid.Row="3" Margin="10,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<lvc:Gauge Margin="10" Width="40" Height="40"
Uses360Mode="True" LabelsVisibility="Collapsed"
From="0" To="100" Value="81" Foreground="#5665F8">
<lvc:Gauge.GaugeRenderTransform>
<RotateTransform Angle="90"/>
</lvc:Gauge.GaugeRenderTransform>
</lvc:Gauge>
<StackPanel Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left">
<TextBlock Text="项目进度" Foreground="#999" FontSize="11" Margin="0,3"/>
<TextBlock Text="81%" FontSize="14" Margin="0,3"/>
</StackPanel>
<StackPanel Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Right">
<TextBlock Text="下一项任务" Foreground="#999" FontSize="11" HorizontalAlignment="Right" Margin="0,3"/>
<TextBlock Text="各部门进行协调" FontSize="12" Margin="0,3"/>
</StackPanel>
</Grid>
</Grid>
<Grid Margin="5" Name="state2" Height="30">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left"
Margin="10,0">
<Border Width="18" Height="18" CornerRadius="5" Background="#5966F3">
<TextBlock Text="1" VerticalAlignment="Center" HorizontalAlignment="Center"
Foreground="White"/>
</Border>
<TextBlock Text="{Binding}" VerticalAlignment="Center" Margin="10,0"/>
</StackPanel>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Right"
Margin="10,0" FontSize="10">
<Run Text="进度83%" Foreground="#999"/>
<Run Text="还剩52天" Foreground="#5966F3" FontWeight="Thin"/>
</TextBlock>
</Grid>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding}" Value="项目2">
<Setter TargetName="state1" Property="Visibility" Value="Visible"/>
<Setter TargetName="state2" Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</GroupBox>
<Application x:Class="ZGR.Databoard.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ZGR.Databoard"
StartupUri="MainWindow.xaml">
<Application.Resources>
<!-- 定义字体-->
<FontFamily x:Key="Iconfont">Assets/Fonts/iconfont.ttf#iconfont</FontFamily>
<Style TargetType="GroupBox" x:Key="GroupBoxStyle">
<Setter Property="Margin" Value="10"></Setter>
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="GroupBox" >
<Border BorderBrush="#ddd" BorderThickness="1" CornerRadius="5" Background="#DDFBFAFD" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="45"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock FontWeight="Bold" Foreground="#11135A" FontSize="14" Margin="20,0" HorizontalAlignment="Left" VerticalAlignment="Center" Text="{TemplateBinding Header}">
<TextBlock.Effect>
<DropShadowEffect Direction="270" ShadowDepth="8" BlurRadius="20" Color="#5766F6" Opacity="0.3"></DropShadowEffect>
</TextBlock.Effect>
<Border Height="2" Background="#DDD" VerticalAlignment="Bottom" ></Border>
</TextBlock>
<ContentPresenter Grid.RowSpan="2"></ContentPresenter>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>