先上图:
代码实现:
<Canvas Grid.Column="1">
<Border Background="#5665F4" BorderBrush="#5665F4"
BorderThickness="0.5" CornerRadius="10,10,10,30"
Width="180" Height="165" TextBlock.Foreground="White"
Canvas.Left="16" Canvas.Top="90">
<Border.Effect>
<DropShadowEffect BlurRadius="40" ShadowDepth="20"
Direction="270" Color="#5665F4" Opacity="0.2"/>
</Border.Effect>
<Grid Margin="0,0,0,20">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Height="0.4" Background="#DDD" VerticalAlignment="Bottom"/>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center"
TextBlock.FontSize="14" TextBlock.FontWeight="Bold">
<TextBlock Text="" FontFamily="{StaticResource Iconfont}"
FontSize="18" Margin="15,0"/>
<TextBlock Text="生产情况" VerticalAlignment="Center"/>
</StackPanel>
<TextBlock Text="累计生产量" Grid.Row="1" VerticalAlignment="Bottom" Margin="15,0"
FontSize="11" Opacity="0.6"/>
<TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Right"
Grid.Row="1" Margin="15,0">
<Run Text="263846" FontSize="18"/>
<Run Text="T" FontSize="15"/>
</TextBlock>
<TextBlock Text="累计生产量" Grid.Row="2" VerticalAlignment="Bottom" Margin="15,0"
FontSize="11" Opacity="0.6"/>
<TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Right"
Grid.Row="2" Margin="15,0">
<Run Text="83" FontSize="18"/>
<Run Text="%" FontSize="15"/>
</TextBlock>
<TextBlock Text="累计生产量" Grid.Row="3" VerticalAlignment="Bottom" Margin="15,0"
FontSize="11" Opacity="0.6"/>
<TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Right"
Grid.Row="3" Margin="15,0">
<Run Text="2" FontSize="18"/>
<Run Text="个" FontSize="15"/>
</TextBlock>
</Grid>
</Border>
<Border Background="#F5F7FB" BorderBrush="#C7C9DB"
BorderThickness="0.5" CornerRadius="10,10,10,30"
Width="170" Height="110" TextBlock.Foreground="#5665F4"
Canvas.Left="210">
<Border.Effect>
<DropShadowEffect BlurRadius="40" ShadowDepth="20" Direction="270" Color="#5665F4" Opacity="0.2"/>
</Border.Effect>
<Grid Margin="0,0,0,20">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Height="0.4" Background="#C7C9DB" VerticalAlignment="Bottom"/>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center"
TextBlock.FontSize="14" TextBlock.FontWeight="Bold">
<TextBlock Text="" FontFamily="{StaticResource Iconfont}"
FontSize="18" Margin="15,0"/>
<TextBlock Text="人员情况" VerticalAlignment="Center"/>
</StackPanel>
<TextBlock Text="生产人员" Grid.Row="1" VerticalAlignment="Bottom" Margin="15,0"
FontSize="11" Opacity="0.6"/>
<TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Right"
Grid.Row="1" Margin="15,0">
<Run Text="245" FontSize="20"/>
<Run Text="人" FontSize="15"/>
</TextBlock>
<TextBlock Text="出勤率" Grid.Row="2" VerticalAlignment="Bottom" Margin="15,0"
FontSize="11" Opacity="0.6"/>
<TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Right"
Grid.Row="2" Margin="15,0">
<Run Text="92" FontSize="20"/>
<Run Text="%" FontSize="15"/>
</TextBlock>
</Grid>
</Border>
<Border Background="#225665F4" BorderBrush="#5665F4"
BorderThickness="0.5" CornerRadius="10,10,10,25"
Width="160" Height="80" TextBlock.Foreground="#FFF"
Canvas.Left="250" Canvas.Top="200">
<Border.Effect>
<DropShadowEffect BlurRadius="40" ShadowDepth="20" Direction="270" Color="#5665F4" Opacity="0.2"/>
</Border.Effect>
<Grid Margin="0,0,0,20">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Height="0.4" Background="#5665F4" VerticalAlignment="Bottom"/>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center"
TextBlock.FontSize="14" TextBlock.FontWeight="Bold">
<TextBlock Text="" FontFamily="{StaticResource Iconfont}"
FontSize="18" Margin="15,0"/>
<TextBlock Text="质量情况" VerticalAlignment="Center"/>
</StackPanel>
<TextBlock Text="通过质检比例" Grid.Row="1" VerticalAlignment="Bottom" Margin="15,0"
FontSize="11" Opacity="0.6"/>
<TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Right"
Grid.Row="1" Margin="15,0">
<Run Text="94" FontSize="20"/>
<Run Text="%" FontSize="15"/>
</TextBlock>
</Grid>
</Border>
</Canvas>
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » wpf 定制 个性圆角信息面板
发表评论 取消回复