WPF 后台管理UI

已于 2023-10-24 11:54:49 修改
阅读量304 收藏 1
点赞数
分类专栏： Wpf 文章标签： 1024程序员节 wpf c# ui
于 2023-10-24 10:23:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45876789/article/details/134006010
版权
后台管理UI界面效果

在这里插入图片描述

一、添加Iconfont图标
1、在项目根目录添加Font文件夹
2、将 iconfont.ttf 复制到 Font
二、添加 Image 头像
1、在项目根目录添加 Image 文件夹
2、将 jpg 示例头像复制到 Image
三、添加用户数据模板
1、在项目根目录添加 Model 文件夹
2、添加 UserModel.cs
namespace UISample1.Model
{
    public class UserModel
    {
        public string Avatar { get; set; }
        public string UserName { get; set; }
        public string Content { get; set; }
        public string SignTime { get; set; }
    }
}
四、添加 ViewModel
1、在项目根目录添加 ViewModel 文件夹
2、添加 MainViewModel.cs
using GalaSoft.MvvmLight;
using System.Collections.ObjectModel;
using UISample1.Model;

namespace UISample1.ViewModel
{
    public class MainViewModel : ViewModelBase
    {
        public MainViewModel() { InitUserModel(); }

        public ObservableCollection<UserModel> UserModels { get; set; }

        public void InitUserModel()
        {
            UserModels = new ObservableCollection<UserModel>
            {
                new UserModel() { Avatar = "Image/Image1.jpg", UserName = "James Bloor", Content = "What's up", SignTime = "32 min" },
                new UserModel() { Avatar = "Image/Image2.jpg", UserName = "Fionn Whitehead", Content = "Nice one", SignTime = "2 days" },
                new UserModel() { Avatar = "Image/Image3.jpg", UserName = "Damien Bonnard", Content = "Go on in comi", SignTime = "1 weeks" },
                new UserModel() { Avatar = "Image/Image4.jpg", UserName = "Aneurin Barnard", Content = "I am coming", SignTime = "2 weeks" },
                new UserModel() { Avatar = "Image/Image5.jpg", UserName = "James Bloor", Content = "What's up", SignTime = "3 weeks" },
                new UserModel() { Avatar = "Image/Image6.jpg", UserName = "Fionn Whitehead", Content = "Nice one", SignTime = "4 weeks" },
                new UserModel() { Avatar = "Image/Image7.jpg", UserName = "Damien Bonnard", Content = "Go on in comi", SignTime = "1 month" },
                new UserModel() { Avatar = "Image/Image8.jpg", UserName = "Aneurin Barnard", Content = "I am coming", SignTime = "3 months" }
            };
        }
    }
}
五、修改 MainWindow.xaml

MainWindow.xaml

<Window x:Class="UISample1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:viewmodel="clr-namespace:UISample1.ViewModel"
        mc:Ignorable="d"
        Title="MainWindow" Height="900" Width="1200">
    <Window.Resources>
        <Style x:Key="radioButtonStyle" TargetType="RadioButton">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="Foreground" Value="#808c93"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RadioButton">
                        <Grid Background="Transparent">
                            <Border x:Name="border" Padding="12"/>
                            <ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Foreground" Value="#6ce8bb"/>
                                <Setter Property="BorderThickness" Value="0,0,0,3" TargetName="border"/>
                                <Setter Property="BorderBrush" Value="#6ce8bb" TargetName="border"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="buttonStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Border x:Name="borderButton" CornerRadius="10" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
                            <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Window.DataContext>
        <viewmodel:MainViewModel/>
    </Window.DataContext>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="75"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <!-- 标题和工具栏 -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="4*"/>
            </Grid.ColumnDefinitions>

            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                <Border CornerRadius="30" Height="30" Width="30" Background="#5ae5b3"/>
                <Border CornerRadius="30" Height="30" Width="30" Background="#ff7800" Margin="-5,0,0,0"/>
                <TextBlock Text="HYPERS" FontWeight="Bold" FontSize="18" VerticalAlignment="Center" Foreground="#424343" Margin="10,0,0,0"/>
            </StackPanel>

            <UniformGrid Columns="5" Grid.Column="1">
                <RadioButton Style="{StaticResource radioButtonStyle}">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="&#xe601;" FontSize="18" FontFamily="Font/#iconfont"/>
                        <TextBlock Text="Dashboard" Margin="10,0,0,0" VerticalAlignment="Center" />
                    </StackPanel>
                </RadioButton>

                <RadioButton Style="{StaticResource radioButtonStyle}">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="&#xe64f;" FontSize="18" FontFamily="Font/#iconfont"/>
                        <TextBlock Text="Apps" Margin="10,0,0,0" VerticalAlignment="Center" />
                    </StackPanel>
                </RadioButton>

                <RadioButton Style="{StaticResource radioButtonStyle}">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="&#xe645;" FontSize="18" FontFamily="Font/#iconfont"/>
                        <TextBlock Text="Pages" Margin="10,0,0,0" VerticalAlignment="Center" />
                    </StackPanel>
                </RadioButton>

                <RadioButton Style="{StaticResource radioButtonStyle}">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="&#xe615;" FontSize="18" FontFamily="Font/#iconfont"/>
                        <TextBlock Text="UI Kit" Margin="10,0,0,0" VerticalAlignment="Center" />
                    </StackPanel>
                </RadioButton>

                <RadioButton Style="{StaticResource radioButtonStyle}">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="&#xe656;" FontSize="18" FontFamily="Font/#iconfont"/>
                        <TextBlock Text="Forms" Margin="10,0,0,0" VerticalAlignment="Center" />
                    </StackPanel>
                </RadioButton>
            </UniformGrid>
        </Grid>

        <!-- 头像区域 -->
        <StackPanel Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
            <Image Source="Image/owen.jpg" Width="40" Height="40" Stretch="Fill">
                <Image.Clip>
                    <EllipseGeometry Center="20,20" RadiusX="20" RadiusY="20"/>
                </Image.Clip>
            </Image>
            <StackPanel VerticalAlignment="Center" Margin="10,0,0,0">
                <TextBlock Text="ow.z" FontSize="18"/>
                <TextBlock Text="Admin" Foreground="#a6abad"/>
            </StackPanel>
        </StackPanel>

        <!-- 用户列表 -->
        <Grid Grid.Row="1" Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
                <RowDefinition/>
                <RowDefinition Height="300"/>
            </Grid.RowDefinitions>

            <!-- Chat -->
            <TextBlock Text="Chat" VerticalAlignment="Center" Foreground="#64747c" FontSize="22" Margin="10"/>
            <Button Content="SEE ALL" HorizontalAlignment="Right" Margin="0,0,15,0" Height="22" Padding="12,2,12,2" Style="{StaticResource buttonStyle}" BorderThickness="1" BorderBrush="#64747c"/>

            <!-- User List -->
            <ItemsControl ItemsSource="{Binding UserModels}" Grid.Row="1">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid Height="40" Margin="0,10,0,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition Width="2*"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>

                            <Border Width="10" Height="10" Background="#5ae5b3" Panel.ZIndex="1" CornerRadius="5" VerticalAlignment="Bottom" Margin="0,0,-20,0"/>
                            <Image Source="{Binding Avatar}" Width="40" Height="40" VerticalAlignment="Center">
                                <Image.Clip>
                                    <EllipseGeometry Center="20,20" RadiusX="20" RadiusY="20"/>
                                </Image.Clip>
                            </Image>

                            <StackPanel Grid.Column="1" VerticalAlignment="Center">
                                <TextBlock Text="{Binding UserName}" Foreground="#7a878f"/>
                                <TextBlock Text="{Binding Content}" Foreground="#d5d9db"/>
                            </StackPanel>
                            <TextBlock Grid.Column="2" VerticalAlignment="Center" Text="{Binding SignTime}" Foreground="#d5d9db"/>
                        </Grid>


                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
            <Image Grid.Row="2" Source="Image/Image.jpg" />
        </Grid>

        <!-- 界面内容 -->
        <Grid Background="#f5f5f8" Grid.Row="1">
            <!-- 拆为三行 -->
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <!-- Message Data -->
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="50"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="2*"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="Message Data" Margin="20,0,0,0" Foreground="#64747c" FontSize="22" VerticalAlignment="Center" />
                    <UniformGrid Columns="3" Grid.Column="1">
                        <Button Content="DAY" Height="22" Margin="10" Padding="12,2,12,2" Style="{StaticResource buttonStyle}" BorderThickness="1" BorderBrush="#64747c"/>
                        <Button Content="MONTH" Height="22" Margin="10" Padding="12,2,12,2" Style="{StaticResource buttonStyle}" BorderThickness="1" BorderBrush="#64747c"/>
                        <Button Content="YEAR" Height="22" Margin="10" Padding="12,2,12,2" Style="{StaticResource buttonStyle}" BorderThickness="1" BorderBrush="#64747c"/>
                    </UniformGrid>
                </Grid>

                <UniformGrid Columns="3" Grid.Row="1">
                    <Grid>
                        <Border Background="#ff6f00" Margin="50,20,50,20">
                            <Border.Effect>
                                <DropShadowEffect Color="#ff6f00" ShadowDepth="20" BlurRadius="50" Opacity="0.8" Direction="270"/>
                            </Border.Effect>
                        </Border>

                        <Border CornerRadius="10" Margin="20" Background="#ff6f00">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>

                                <Border BorderThickness="1" Height="1" BorderBrush="#ebebeb" VerticalAlignment="Center" Grid.RowSpan="2"/>

                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition/>
                                        <ColumnDefinition Width="3*"/>
                                    </Grid.ColumnDefinitions>
                                    <Border Background="#ffffff" Opacity="0.2" Width="40" Height="40" CornerRadius="20"/>
                                    <TextBlock Text="&#xe667;" FontFamily="Font/#iconfont" FontSize="26" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" />

                                    <TextBlock Grid.Column="1" Text="Started sending at" FontSize="18" VerticalAlignment="Center" Foreground="White"/>
                                </Grid>
                                <StackPanel Grid.Row="1" VerticalAlignment="Center" Margin="20,0,0,0">
                                    <TextBlock Text="December 05th'19" FontSize="22" Foreground="White"/>
                                    <TextBlock Text="11:14:08 am UTC - 08:00" FontSize="15" Foreground="White"/>
                                </StackPanel>
                            </Grid>
                        </Border>
                    </Grid>
                    <Grid>
                        <Border Background="#ffc000" Margin="50,20,50,20">
                            <Border.Effect>
                                <DropShadowEffect Color="#ffc000" ShadowDepth="20" BlurRadius="50" Opacity="0.8" Direction="270"/>
                            </Border.Effect>
                        </Border>

                        <Border CornerRadius="10" Margin="20" Background="#ffc000">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>

                                <Border BorderThickness="1" Height="1" BorderBrush="#ebebeb" VerticalAlignment="Center" Grid.RowSpan="2"/>

                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition/>
                                        <ColumnDefinition Width="3*"/>
                                    </Grid.ColumnDefinitions>
                                    <Border Background="#ffffff" Opacity="0.2" Width="40" Height="40" CornerRadius="20"/>
                                    <TextBlock Text="&#xe603;" FontFamily="Font/#iconfont" FontSize="26" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" />

                                    <TextBlock Grid.Column="1" Text="Completed" FontSize="18" VerticalAlignment="Center" Foreground="White"/>
                                </Grid>
                                <StackPanel Grid.Row="1" VerticalAlignment="Center" Margin="20,0,0,0">
                                    <TextBlock Text="In 51.28" FontSize="22" Foreground="White"/>
                                    <TextBlock Text="seconds" FontSize="15" Foreground="White"/>
                                </StackPanel>
                            </Grid>
                        </Border>
                    </Grid>
                    <Grid>
                        <Border Background="#5ae5b3" Margin="50,20,50,20">
                            <Border.Effect>
                                <DropShadowEffect Color="#5ae5b3" ShadowDepth="20" BlurRadius="50" Opacity="0.8" Direction="270"/>
                            </Border.Effect>
                        </Border>

                        <Border CornerRadius="10" Margin="20" Background="#5ae5b3">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>

                                <Border BorderThickness="1" Height="1" BorderBrush="#ebebeb" VerticalAlignment="Center" Grid.RowSpan="2"/>

                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition/>
                                        <ColumnDefinition Width="3*"/>
                                    </Grid.ColumnDefinitions>
                                    <Border Background="#ffffff" Opacity="0.2" Width="40" Height="40" CornerRadius="20"/>
                                    <TextBlock Text="&#xe646;" FontFamily="Font/#iconfont" FontSize="26" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" />

                                    <TextBlock Grid.Column="1" Text="Total Messages" FontSize="18" VerticalAlignment="Center" Foreground="White"/>
                                </Grid>
                                <StackPanel Grid.Row="1" VerticalAlignment="Center" Margin="20,0,0,0">
                                    <TextBlock Text="5421624" FontSize="22" Foreground="White"/>
                                    <TextBlock Text="" FontSize="15" Foreground="White"/>
                                </StackPanel>
                            </Grid>
                        </Border>
                    </Grid>
                </UniformGrid>
            </Grid>

            <!-- 中间内容 -->
            <Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Border Background="White" CornerRadius="10" Margin="20,10,15,10">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition Height="4*"/>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Grid VerticalAlignment="Center" Margin="10,15,10,0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="8*"/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Text="GENDER" FontSize="12" Foreground="#64747c" />
                                <TextBlock Grid.Column="1" Text="&#xe60b;" FontFamily="Font/#iconfont" FontSize="22" HorizontalAlignment="Right" Foreground="#bababa" />
                            </Grid>

                            <Ellipse Grid.Row="1" Width="100" Height="100" StrokeThickness="5" Stroke="#707070"/>

                            <UniformGrid Columns="3" Grid.Row="2">
                                <TextBlock Text="55%" FontSize="20" Foreground="#5b5b5b" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                <Border BorderThickness="1" BorderBrush="#e4e4e4" Width="2" HorizontalAlignment="Center" Margin="0,8,0,8"/>
                                <TextBlock Text="45%" FontSize="20" Foreground="#5b5b5b" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </UniformGrid>

                            <UniformGrid Columns="2" Grid.Row="3">
                                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="10,0,0,0">
                                    <Border Width="10" Height="10" Background="#5ae5b3" />
                                    <TextBlock Text="MEN" FontSize="12" Foreground="#a6a6a6" Margin="5,0,0,0" />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="10,0,0,0">
                                    <Border Width="10" Height="10" Background="#ff7800" />
                                    <TextBlock Text="WOMEN" FontSize="12" Foreground="#a6a6a6" Margin="5,0,0,0" />
                                </StackPanel>
                            </UniformGrid>

                        </Grid>
                    </Border>
                    <Border Grid.Column="1" Background="White" CornerRadius="10" Margin="15,10,20,10">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition Height="4*"/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Grid VerticalAlignment="Center" Margin="10,15,10,0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="8*"/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Text="PRODUCTS IN STOCK" FontSize="12" Foreground="#64747c" />
                                <TextBlock Grid.Column="1" Text="&#xe60b;" FontFamily="Font/#iconfont" FontSize="22" HorizontalAlignment="Right" Foreground="#bababa" />
                            </Grid>
                            <StackPanel Grid.Row="1" Orientation="Horizontal" Margin="10,0,10,0">
                                <TextBlock Text="4 543" Foreground="#6c6c6c" VerticalAlignment="Center"/>
                                <TextBlock Text="&#xe8f5;" Foreground="#28aa0c" FontFamily="Font/#iconfont" FontSize="22"/>
                            </StackPanel>

                            <Path Grid.Row="2" Stroke="#707070" StrokeThickness="4" >
                                <Path.Data>
                                    <PathGeometry>
                                        <PathFigure StartPoint="10,150">
                                            <BezierSegment Point1="20,10" Point2="110,140" Point3="170,00"/>
                                        </PathFigure>
                                    </PathGeometry>
                                </Path.Data>
                            </Path>
                            <UniformGrid Columns="7" Grid.Row="3" VerticalAlignment="Center" Margin="10,0,10,0">
                                <TextBlock Text="M" HorizontalAlignment="Center" Foreground="#8c8c8c"/>
                                <TextBlock Text="T" HorizontalAlignment="Center" Foreground="#8c8c8c"/>
                                <TextBlock Text="W" HorizontalAlignment="Center" Foreground="#8c8c8c"/>
                                <TextBlock Text="T" HorizontalAlignment="Center" Foreground="#8c8c8c"/>
                                <TextBlock Text="F" HorizontalAlignment="Center" Foreground="#8c8c8c"/>
                                <TextBlock Text="S" HorizontalAlignment="Center" Foreground="#8c8c8c"/>
                                <TextBlock Text="S" HorizontalAlignment="Center" Foreground="#8c8c8c"/>
                            </UniformGrid>
                        </Grid>
                    </Border>

                </Grid>

                <UniformGrid Grid.Column="1" Columns="2" Grid.Row="2">
                    <Border Background="White" CornerRadius="10" Margin="10,10,15,10">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="Customers" FontSize="12" Foreground="#64747c" VerticalAlignment="Center" Margin="10,0,0,0"/>
                            <Border Background="#d4f8eb" Width="30" Height="30" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,10,0"/>
                            <TextBlock Grid.Column="1" Text="&#xe650;" FontFamily="Font/#iconfont" FontSize="22" HorizontalAlignment="Right" Foreground="#5ae5b3" VerticalAlignment="Center" Margin="0,0,15,0" />
                            <TextBlock Grid.Row="1" Text="36,254" Margin="10,0,0,0" FontSize="20" Foreground="#6e7c84" VerticalAlignment="Center" />
                            <StackPanel Grid.Row="2" Orientation="Horizontal">
                                <TextBlock Text="&#xe8f5;" Foreground="#5ae5b3" FontFamily="Font/#iconfont" FontSize="22"/>
                                <TextBlock Text="5.27%" Foreground="#8aedca" VerticalAlignment="Center" FontWeight="Bold"/>
                                <TextBlock Text="Since last month" Foreground="#d2d7d9" VerticalAlignment="Center" Margin="10,0,0,0"/>
                            </StackPanel>
                        </Grid>
                    </Border>
                    <Border Background="White" CornerRadius="10" Margin="5,10,20,10">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="Orders" FontSize="12" Foreground="#64747c" VerticalAlignment="Center" Margin="10,0,0,0"/>
                            <Border Background="#d4f8eb" Width="30" Height="30" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,10,0"/>
                            <TextBlock Grid.Column="1" Text="&#xe73d;" FontFamily="Font/#iconfont" FontSize="22" HorizontalAlignment="Right" Foreground="#5ae5b3" VerticalAlignment="Center" Margin="0,0,15,0" />
                            <TextBlock Grid.Row="1" Text="5,543" Margin="10,0,0,0" FontSize="20" Foreground="#6e7c84" VerticalAlignment="Center" />
                            <StackPanel Grid.Row="2" Orientation="Horizontal">
                                <TextBlock Text="&#xe8f6;" Foreground="#ff4747" FontFamily="Font/#iconfont" FontSize="22"/>
                                <TextBlock Text="1.08%" Foreground="#ff4747" VerticalAlignment="Center" FontWeight="Bold"/>
                                <TextBlock Text="Since last month" Foreground="#d2d7d9" VerticalAlignment="Center" Margin="10,0,0,0"/>
                            </StackPanel>
                        </Grid>
                    </Border>
                    <Border Background="White" CornerRadius="10" Margin="10,10,15,10">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="Revenue" FontSize="12" Foreground="#64747c" VerticalAlignment="Center" Margin="10,0,0,0"/>
                            <Border Background="#d4f8eb" Width="30" Height="30" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,10,0"/>
                            <TextBlock Grid.Column="1" Text="&#xe6f1;" FontFamily="Font/#iconfont" FontSize="22" HorizontalAlignment="Right" Foreground="#5ae5b3" VerticalAlignment="Center" Margin="0,0,15,0" />
                            <TextBlock Grid.Row="1" Text="$6,254" Margin="10,0,0,0" FontSize="20" Foreground="#6e7c84" VerticalAlignment="Center" />
                            <StackPanel Grid.Row="2" Orientation="Horizontal">
                                <TextBlock Text="&#xe8f6;" Foreground="#ff4747" FontFamily="Font/#iconfont" FontSize="22"/>
                                <TextBlock Text="7.00%" Foreground="#ff4747" VerticalAlignment="Center" FontWeight="Bold"/>
                                <TextBlock Text="Since last month" Foreground="#d2d7d9" VerticalAlignment="Center" Margin="10,0,0,0"/>
                            </StackPanel>
                        </Grid>
                    </Border>
                    <Border Background="White" CornerRadius="10" Margin="5,10,20,10">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock Text="Growth" FontSize="12" Foreground="#64747c" VerticalAlignment="Center" Margin="10,0,0,0"/>
                            <Border Background="#d4f8eb" Width="30" Height="30" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,10,0"/>
                            <TextBlock Grid.Column="1" Text="&#xe64d;" FontFamily="Font/#iconfont" FontSize="22" HorizontalAlignment="Right" Foreground="#5ae5b3" VerticalAlignment="Center" Margin="0,0,15,0" />
                            <TextBlock Grid.Row="1" Text="+ 30.56" Margin="10,0,0,0" FontSize="20" Foreground="#6e7c84" VerticalAlignment="Center" />
                            <StackPanel Grid.Row="2" Orientation="Horizontal">
                                <TextBlock Text="&#xe8f5;" Foreground="#5ae5b3" FontFamily="Font/#iconfont" FontSize="22"/>
                                <TextBlock Text="4.87%" Foreground="#8aedca" VerticalAlignment="Center" FontWeight="Bold"/>
                                <TextBlock Text="Since last month" Foreground="#d2d7d9" VerticalAlignment="Center" Margin="10,0,0,0"/>
                            </StackPanel>
                        </Grid>
                    </Border>

                </UniformGrid>
            </Grid>

            <!-- Sales Report -->
            <Grid Grid.Row="2">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition Height="4*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="Sales Report" Margin="20,0,0,0" Foreground="#64747c" FontSize="22" VerticalAlignment="Center" />
                <TextBlock Grid.Column="1" Text="Transactions" Margin="20,0,0,0" Foreground="#64747c" FontSize="22" VerticalAlignment="Center" />
                <Button Grid.Column="1" Content="SEE ALL" Height="22" Width="100" HorizontalAlignment="Right" Margin="0,0,20,0" Padding="12,2,12,2" Style="{StaticResource buttonStyle}" BorderThickness="1" BorderBrush="#64747c"/>

                <Border Grid.Row="1" Background="White" CornerRadius="10" Margin="20,10,20,20">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>

                        <Grid>
                            <Ellipse Grid.Row="1" Width="120" Height="120" StrokeThickness="6" Stroke="#707070"/>
                            <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                                <TextBlock Text="55%" FontSize="20" HorizontalAlignment="Center" Foreground="#707f87"/>
                                <TextBlock Text="Mobile Sales" Foreground="#707f87"/>
                            </StackPanel>
                        </Grid>

                        <Grid Grid.Column="1" Margin="0,20,0,20">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="20"/>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>

                            <Border Width="10" Height="10" CornerRadius="5" Background="#5ae5b3"/>
                            <TextBlock Grid.Column="1" Text="Mobile" Foreground="#939da3" FontSize="12" Grid.ColumnSpan="3" VerticalAlignment="Center"/>
                            <TextBlock Grid.Row="1" Grid.Column="1" Text="$3213" Foreground="#63737b" FontSize="18" Grid.ColumnSpan="3" />

                            <Border Grid.Row="2" Width="10" Height="10" CornerRadius="5" Background="#ff7800"/>
                            <TextBlock Grid.Row="2" Grid.Column="1" Text="Desktop" VerticalAlignment="Center" Foreground="#939da3"/>
                            <TextBlock Grid.Row="2" Grid.Column="2" Text="$3213" VerticalAlignment="Center" Foreground="#939da3"/>
                            <TextBlock Grid.Row="2" Grid.Column="3" Text="30%" VerticalAlignment="Center" Foreground="#939da3"/>

                            <Border Grid.Row="3" Width="10" Height="10" CornerRadius="5" Background="#ffc000"/>
                            <TextBlock Grid.Row="3" Grid.Column="1" Text="Tablet" VerticalAlignment="Center" Foreground="#939da3"/>
                            <TextBlock Grid.Row="3" Grid.Column="2" Text="$3213" VerticalAlignment="Center" Foreground="#939da3"/>
                            <TextBlock Grid.Row="3" Grid.Column="3" Text="10%" VerticalAlignment="Center" Foreground="#939da3"/>

                            <Border Grid.Row="4" Width="10" Height="10" CornerRadius="5" Background="#bfc6c9"/>
                            <TextBlock Grid.Row="4" Grid.Column="1" Text="Call" VerticalAlignment="Center" Foreground="#939da3"/>
                            <TextBlock Grid.Row="4" Grid.Column="2" Text="$3213" VerticalAlignment="Center" Foreground="#939da3"/>
                            <TextBlock Grid.Row="4" Grid.Column="3" Text="2%" VerticalAlignment="Center" Foreground="#939da3"/>
                        </Grid>

                    </Grid>
                </Border>

                <Border Grid.Row="1" Grid.Column="1" Background="White" CornerRadius="10" Margin="10,10,20,20">
                    <Grid Grid.Column="1" Margin="20">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50"/>
                            <ColumnDefinition Width="2*"/>
                            <ColumnDefinition Width="1.2*"/>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="20"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>

                        <TextBlock Text="Id" Foreground="#63737b" FontSize="14" VerticalAlignment="Center"/>
                        <TextBlock Grid.Row="1" Text="2231" Foreground="#63737b" FontSize="14" VerticalAlignment="Center"/>
                        <TextBlock Grid.Row="2" Text="2230" Foreground="#63737b" FontSize="14" VerticalAlignment="Center"/>
                        <TextBlock Grid.Row="3" Text="2229" Foreground="#63737b" FontSize="14" VerticalAlignment="Center"/>
                        <TextBlock Grid.Row="4" Text="2228" Foreground="#63737b" FontSize="14" VerticalAlignment="Center"/>


                        <TextBlock Grid.Column="1" Text="Name" Foreground="#63737b" FontSize="14" VerticalAlignment="Center"/>
                        <TextBlock Grid.Column="1" Grid.Row="1" Text="James Bloor" Foreground="#63737b" FontSize="14" VerticalAlignment="Center"/>
                        <TextBlock Grid.Column="1" Grid.Row="2" Text="Fionn Whitehead" Foreground="#63737b" FontSize="14" VerticalAlignment="Center"/>
                        <TextBlock Grid.Column="1" Grid.Row="3" Text="Damien Bonnard" Foreground="#63737b" FontSize="14" VerticalAlignment="Center"/>
                        <TextBlock Grid.Column="1" Grid.Row="4" Text="Aneurin Barnard" Foreground="#63737b" FontSize="14" VerticalAlignment="Center"/>

                        <TextBlock Grid.Column="2" Text="Date" Foreground="#63737b" FontSize="14" VerticalAlignment="Center"/>
                        <TextBlock Grid.Column="2" Grid.Row="1" Text="07.12.2019" Foreground="#63737b" FontSize="14" VerticalAlignment="Center"/>
                        <TextBlock Grid.Column="2" Grid.Row="2" Text="07.12.2019" Foreground="#63737b" FontSize="14" VerticalAlignment="Center"/>
                        <TextBlock Grid.Column="2" Grid.Row="3" Text="07.12.2019" Foreground="#63737b" FontSize="14" VerticalAlignment="Center"/>
                        <TextBlock Grid.Column="2" Grid.Row="4" Text="07.12.2019" Foreground="#63737b" FontSize="14" VerticalAlignment="Center"/>

                        <TextBlock Grid.Column="3" Text="Amount" Foreground="#63737b" FontSize="14" VerticalAlignment="Center"/>
                        <TextBlock Grid.Column="3" Grid.Row="1" Text="$32" Foreground="#63737b" FontSize="14" VerticalAlignment="Center"/>
                        <TextBlock Grid.Column="3" Grid.Row="2" Text="$322" Foreground="#63737b" FontSize="14" VerticalAlignment="Center"/>
                        <TextBlock Grid.Column="3" Grid.Row="3" Text="$22" Foreground="#63737b" FontSize="14" VerticalAlignment="Center"/>
                        <TextBlock Grid.Column="3" Grid.Row="4" Text="$45" Foreground="#63737b" FontSize="14" VerticalAlignment="Center"/>

                        <TextBlock Grid.Column="4" Grid.Row="1" Text="..." Foreground="#63737b" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        <TextBlock Grid.Column="4" Grid.Row="2" Text="..." Foreground="#63737b" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        <TextBlock Grid.Column="4" Grid.Row="3" Text="..." Foreground="#63737b" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        <TextBlock Grid.Column="4" Grid.Row="4" Text="..." Foreground="#63737b" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center"/>

                    </Grid>
                </Border>

            </Grid>
        </Grid>
    </Grid>
</Window>
六、图标头像源码

Iconfont-Sample1.zip

Image.zip

UISample1.zip

ow.z
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一种WPF在后台线程更新UI界面的简便方法
weixin_30273175的博客
11-22 938
WPF框架规定只有UI线程（主线程）可以更新界面，所有其他后台线程无法直接更新界面。幸好，WPF提供的SynchronizationContext类以及C#的Lambda表达式提供了一种方便的解决方法。以下是代码： public static SynchronizationContext s_SC = Synchronization.Current; //主窗口类的静态成员 在App类中...
WPF后台线程刷新UI
weixin_42975610的博客
02-22 1642
后台线程刷新前台界面 本篇介绍利用Dispatcher实现从一个非 UI 线程中更新一个由UI线程创建的对象 1.Dispatcher简介 微软在WPF中引入了Dispatcher，它是用于管理线程工作项队列，类似于Win32中的消息队列，所有WPF应用程序启动时都会加载两个重要的线程：一个用于呈现用户界面，另一个用于管理用户界面。呈现线程是一个在后台运行的隐藏线程，通常我们面对的线程是UI线程。WPF要求将其大多数对象与UI线程进行关联，意味着要使用一个WPF对象，只能在创建它的线程上使用，在其它线程上使
一款非常漂亮的WPF管理系统
dotNET跨平台
07-01 69
我们致力于探索、分享和推荐最新的实用技术栈、开源项目、框架和实用工具。每天都有新鲜的开源资讯等待你的发现！WPFManager项目介绍该项目是一款WPF开发的管理系统，数据库采用的MS Sqlserver，项目采用插件式方式开发，在开发时可以更好的业务分离，提高多人协作开发效率。❝并且也是一个不错的WPF入门学习的项目！项目功能介绍Client：程序入口，拥有登录、主页、主题设置窗口，主要功能是发...
《深入浅出WPF》学习笔记四.提高效率,code snippets的使用
最新发布
yannsann的博客
08-04 338
《深入浅出WPF》学习笔记四.提高效率,code snippets的使用
使用WPF调用Python进行图像灰度处理
dotnet研习社
08-03 403
在本文中，我们将通过WPF应用程序调用Python脚本进行图像灰度处理。我们将使用Python的OpenCV库来处理图像，并将其转换为灰度图像，然后通过WPF界面来启动Python进程并展示结果。在本文中，我们展示了如何通过WPF应用程序调用Python脚本进行图像灰度处理。通过使用Python的OpenCV库进行图像处理，并通过启动Python进程来执行Python脚本和展示结果，我们实现了一个跨语言的图像处理应用。这一技术可以应用于各种需要结合C#和Python优势的图像处理项目中。
C#初级——List 容器
wacanda的博客
07-31 416
在C#中，容器通常指的是用于存储和组织数据的集合类。本文介绍的容器是内部使用数组来存储元素，当添加元素超出当前数组容量时，会自动调整大小（扩容）。
通过进程协作显示图像-C#
weixin_45114627的博客
07-30 810
如果一个软件比较复杂或者某些情况下需要拆解，可以考试将软件分解成两个或多个进程，但常规的消息传递又不能完全够用，使用消息+共享内存，实现图像传递，当然性能这个方面我并没有测试，仅是一种解决思路吧。
C# 浅谈异步编程 Thread、ThreadPool
a876106354的博客
07-30 737
从 .NET Framework 4 开始，使用多线程的推荐方法是使用任务并行库 (TPL) 和并行 LINQ (PLINQ)。任务并行库（TPL）说的是 System.Threading 和 System.Threading.Tasks 空间中的一组公共类型和 API。较为常见的就是Thread、ThreadPool、Task等。
【C#】ThreadPool的使用
wangnaisheng的专栏
07-30 500
【C#】ThreadPool的使用
C# winform 串口读取字节流，MB级别字节流
曾经的我也很优秀，现在的我一无所有。
07-31 616
要一次性读取兆级别的数据（例如几百 KB 到几 MB），你需要确保你的串口硬件能够支持这样的传输速率，并且你的软件能够高效地处理大量的数据。如果硬件限制了数据传输速度，那么即使软件能够处理更大的缓冲区，也可能无法达到预期的性能。确保你的串口配置正确，能够支持较大的数据传输。例如，如果使用的是 USB 转串口适配器，可能需要较高的波特率（例如 115200 或更高）。事件处理程序中，你可以使用循环来读取所有可用的数据，直到没有更多数据可读为止。例如，你可以设置一个固定的较大缓冲区，或者动态调整缓冲区大小。
C#编写多导联扫描式的波形图Demo
猪猪侠
07-31 439
C# 扫描波形图
C# 使用 NLog 输出日志到文件夹
build2024
08-04 163
通过设置 ·maxArchiveDays·，可以实现自动管理日志文件的归档和清理，避免日志文件过多导致存储空间的浪费。=“5242880”: 文件归档大小尺寸，如果单文凭超过 5242880，则重新创建一个新的文件。或者创建一个共用的写日志静态类,需要输出日志的代码逻辑处，通过调用当前静态类即可。: 这些设置确保文件可以在多个进程中安全写入，同时不保持文件句柄打开。: 日志文件归档使用滚动编号，避免创建大量的备份文件。: 这表示每天生成一个新的日志文件。的文件夹，并在其中创建。属性：日志内容输出的模板。
C#实战 - C#实现发送邮件的三种方法
逍遥Sean的博客
07-31 474
当使用 C# 编程语言发送邮件时，可以利用不同的方法来实现。本文将介绍三种常用的方法：使用SMTP客户端库、使用.NET Framework内置类和使用第三方库。我们将详细讨论每种方法的优缺点以及如何实现。
C# Where关键字
vtheshow的博客
07-31 464
C#的where关键字用途
面向对象程序设计之sort排序
嫌人闲事
07-31 383
敲过排序算法的都会的，Sort排序与compareTo的改写。
C#知识|文件与目录操作：对象的创建、保存、读取
做有价值的事，积累有价值的笔记！
07-30 609
哈喽，你好啊，我是雷工！面向对象编程的特点就是一切皆对象，操作的也是对象，本节学习文件与目录操作中，对象的保存；以下为学习笔记。
C# ADC数据波形显示
qq_41721746的博客
07-31 245
【代码】C# ADC数据波形显示。
[Kimi笔记]C#入门级注意点
m0_74331272的博客
08-04 222
利用C#的新特性，如属性初始化器、表达式-bodied成员、模式匹配等，来提高代码的简洁性和性能。泛型允许创建类型安全的数据结构，如 List<T> ，其中 T 是类型参数。编写清晰的API文档和用户指南，使用户和开发者能够理解如何使用你的代码。根据问题的特点选择合适的设计模式，如单例模式、工厂模式、观察者模式等。委托是类型安全的函数指针，事件是使用委托实现的，用于订阅和发布消息。避免使用C#的保留字，如 if 、 else 、 while 等。保持一致的编码风格，如大括号的位置、缩进、命名约定等。
[kimi笔记]为什么csc.exe不可以双击运行
m0_74331272的博客
08-04 67
csc.exe 是 C# 编译器的可执行文件，它是 .NET Framework 的一部分，用于编译 C# 源代码文件（ .cs 文件）生成可执行文件（ .exe 文件）或其他类型的程序集。3. 环境配置：为了使 csc.exe 正常工作，可能需要配置环境变量，如设置 PATH 环境变量以包含 csc.exe 所在的目录，这样用户可以在命令行中直接调用它而不需要指定完整路径。2. 参数依赖性： csc.exe 需要特定的命令行参数来指定源代码文件、引用的程序集、输出文件等。
wpf 免费后台管理ui框架
05-01
WPF（Windows Presentation Foundation）是一个免费的后台管理UI框架，它可以为开发人员提供丰富的用户界面（UI）设计和构建工具，同时还提供了强大的数据绑定功能和可重用的控件，使得开发人员可以快速创建高质量的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值