wpf 定制个性圆角信息面板

先上图：
代码实现：
cs 复制代码
    <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="&#xe61d;" 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="&#xe62d;" 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="&#xe604;" 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 定制 个性圆角信息面板

wpf 定制个性圆角信息面板
