wpf 定制 个性圆角信息面板

先上图:

代码实现:

    <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>

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值