先上图:
下面是代码:
cs
<!--第一个卡片-->
<GroupBox Header="各生产线人数">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="45"/>
<RowDefinition/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<lvc:PieChart Grid.Row="1" InnerRadius="35" Width="115"
StartingRotationAngle="0">
<lvc:PieChart.Series>
<lvc:PieSeries Values="12" Fill="#FFCA0A" Title="生产线1"
LabelPosition="OutsideSlice"
DataLabels="True" Foreground="#999" FontWeight="Thin"/>
<lvc:PieSeries Values="43" Fill="#5665F4" Title="生产线2" LabelPosition="OutsideSlice"
DataLabels="True" Foreground="#999" FontWeight="Thin"/>
<lvc:PieSeries Values="31" Fill="#00BDBD" Title="生产线3" LabelPosition="OutsideSlice"
DataLabels="True" Foreground="#999" FontWeight="Thin"/>
<lvc:PieSeries Values="14" Fill="#FF7473" Title="生产线4" LabelPosition="OutsideSlice"
DataLabels="True" Foreground="#999" FontWeight="Thin"/>
</lvc:PieChart.Series>
</lvc:PieChart>
<UniformGrid Grid.Row="2" Margin="15,10" TextBlock.FontSize="10">
<StackPanel Orientation="Horizontal" Height="20">
<Ellipse Width="8" Height="8" Fill="#5665F4"/>
<TextBlock Text="生产线1" Foreground="#999" VerticalAlignment="Center" Margin="3,0"/>
<TextBlock Text="110 人" VerticalAlignment="Center" Width="32" TextAlignment="Right"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Height="20">
<Ellipse Width="8" Height="8" Fill="#00BDBD"/>
<TextBlock Text="生产线2" Foreground="#999" VerticalAlignment="Center" Margin="3,0"/>
<TextBlock Text="78 人" VerticalAlignment="Center" Width="32" TextAlignment="Right"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Height="20">
<Ellipse Width="8" Height="8" Fill="#FF7473"/>
<TextBlock Text="生产线3" Foreground="#999" VerticalAlignment="Center" Margin="3,0"/>
<TextBlock Text="35 人" VerticalAlignment="Center" Width="32" TextAlignment="Right"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Height="20">
<Ellipse Width="8" Height="8" Fill="#FFCA0A"/>
<TextBlock Text="生产线4" Foreground="#999" VerticalAlignment="Center" Margin="3,0"/>
<TextBlock Text="31 人" VerticalAlignment="Center" Width="32" TextAlignment="Right"/>
</StackPanel>
</UniformGrid>
</Grid>
</GroupBox>
<!--第二个卡片-->
<GroupBox Header="质检情况" Grid.Column="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="45"/>
<RowDefinition/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<lvc:AngularGauge Value="34" FromValue="0" ToValue="100" Wedge="270"
TicksForeground="White" Foreground="#999"
FontSize="12" FontWeight="Normal"
SectionsInnerRadius=".85"
LabelsStep="20" TicksStep="5"
Margin="30" LabelsEffect="{x:Null}"
Grid.Row="1" Name="ag">
<lvc:AngularGauge.Sections>
<lvc:AngularSection FromValue="0"
ToValue="{Binding ElementName=ag,Path=Value}"
Fill="#647FF5"/>
<lvc:AngularSection FromValue="{Binding ElementName=ag,Path=Value}"
ToValue="100" Fill="#ECEEF5"/>
</lvc:AngularGauge.Sections>
</lvc:AngularGauge>
<UniformGrid Grid.Row="2" Margin="15,0">
<StackPanel Orientation="Horizontal">
<TextBlock Text="已质检" Foreground="#8A8BBF" FontSize="11"/>
<TextBlock Text="80%" Margin="10,0" FontWeight="Bold"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="质检通过率" Foreground="#8A8BBF" FontSize="11"/>
<TextBlock Text="94%" Margin="10,0" FontWeight="Bold"/>
</StackPanel>
</UniformGrid>
</Grid>
</GroupBox>