WPF 后台管理UI 2

最新推荐文章于 2024-01-26 13:13:14 发布

ow.z

最新推荐文章于 2024-01-26 13:13:14 发布

阅读量173

点赞数

分类专栏： Wpf 文章标签： wpf ui

本文链接：https://blog.csdn.net/weixin_45876789/article/details/134076874

版权

Wpf 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

整体效果

在这里插入图片描述

设计原型

https://www.freeuid.com/3817.html

图标字体

在这里插入图片描述

https://download.csdn.net/download/weixin_45876789/88478478

MenuModel.cs

namespace UISample2.Model
{
    public class MenuModel
    {
        public string Icon { get; set; }
        public string Menu { get; set; }
        public string Down { get; set; }
    }
}

MainViewModel.cs


using LiveCharts;
using LiveCharts.Wpf;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Threading;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Media;
using UISample2.Model;

namespace UISample2.ViewModel
{
    public class MainViewModel
    {
        public ObservableCollection<MenuModel> MenuModels { get; set; }

        public MainViewModel()
        {
            InitMenuModel();


            //初始化数据
            List<string> titles = new List<string> { "一层", "二层", "三层" };

            List<List<int>> values = new List<List<int>>
            {
                new List<int> { 20, 10, 50 , 10, 50 , 10, 50 , 10, 50 , 10, 50 , 10 },//, 50 , 10,  10, 50,10, 50
                new List<int> { 20, 10, 50 , 10, 50 , 10, 50 , 10, 50 , 10, 50 , 10 },//, 50 , 10,  10, 50,10, 50
                new List<int> { 10, 50, 30 , 50, 30 , 50, 30 , 50, 30 , 50, 30 , 50 }//, 30 , 30 , 50, 30 , 10, 50
            };
            List<string> _dates = new List<string>();

            for (int i = 0; i < titles.Count; i++)
            {
                var fill = new SolidColorBrush
                {
                    Opacity = 1
                };
                LineSeries lineseries = new LineSeries
                {
                    DataLabels = true,
                    Title = titles[i],
                    Foreground = fill,
                    Fill = fill,
                    Values = new ChartValues<int>(values[i])
                };

                LineSeriesCollection.Add(lineseries);
            }

            //动态数据

            Task.Run(() =>
            {
                while (true)
                {
                    Thread.Sleep(1000);

                    Application.Current.Dispatcher.Invoke(() =>
                    {
                        var r = new Random();

                        //更新纵坐标数据
                        LineSeriesCollection[0].Values.Add(r.Next(80, 100));
                        LineSeriesCollection[0].Values.RemoveAt(0);

                        LineSeriesCollection[1].Values.Add(r.Next(60, 120));
                        LineSeriesCollection[1].Values.RemoveAt(0);

                        LineSeriesCollection[2].Values.Add(r.Next(60, 120));
                        LineSeriesCollection[2].Values.RemoveAt(0);
                    });

                }
            });
        }

        public SeriesCollection lineSeriesCollection = new SeriesCollection();

        public SeriesCollection LineSeriesCollection
        {
            get
            {
                return lineSeriesCollection;
            }

            set
            {
                lineSeriesCollection = value;
            }
        }

        public void InitMenuModel()
        {
            MenuModels = new ObservableCollection<MenuModel> {
                new MenuModel(){Icon="\xe600", Menu="Dashboard", Down=""},
                new MenuModel(){Icon="\xe601", Menu="Reviews", Down="\xe607"},
                new MenuModel(){Icon="\xe606", Menu="Customers", Down="\xe607"},
                new MenuModel(){Icon="\xe603", Menu="Invitations", Down="\xe607"},
                new MenuModel(){Icon="\xe605", Menu="Widgets", Down="\xe607"},
                new MenuModel(){Icon="\xe604", Menu="Landing page", Down="\xe607"},
                new MenuModel(){Icon="\xe602", Menu="Configurations", Down="\xe607"},
            };
        }

    }
}

MainWindow.xaml

<Window x:Class="UISample2.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:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
        xmlns:viewmodel="clr-namespace:UISample2.ViewModel" xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
        mc:Ignorable="d"
        Title="MainWindow" Height="954" Width="1440">
    <Window.DataContext>
        <viewmodel:MainViewModel />
    </Window.DataContext>
    <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" />
                            <ContentPresenter Width="{TemplateBinding Width}" 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="False">
                                <Setter Property="Foreground" Value="#a9b7f6"/>
                            </Trigger>

                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Foreground" Value="#ffffff"/>
                                <Setter Property="Background" Value="black" TargetName="border" />
                                <Setter Property="Opacity"  Value="0.1" TargetName="border"/>
                            </Trigger>

                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="black" TargetName="border" />
                                <Setter Property="Opacity"  Value="0.1" TargetName="border"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid Background="#f0f3f8">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <!-- 菜单栏 -->
        <Border Background="#274ae8" CornerRadius="0,0,40,0" />
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="100"/>
                <RowDefinition/>
            </Grid.RowDefinitions>

            <!-- 个人信息 -->
            <DockPanel VerticalAlignment="Center" Margin="30,50,0,0">
                <Border Width="46" Height="46" CornerRadius="12" HorizontalAlignment="Left">
                    <Border.Background>
                        <ImageBrush ImageSource="Image/owen.jpg" />
                    </Border.Background>
                </Border>
                <UniformGrid Rows="2" Margin="10,0,0,0" >
                    <TextBlock Text="ow.z" Foreground="White" FontSize="16" VerticalAlignment="Center"/>
                    <TextBlock Text="ow.z@gmail.com" Foreground="#aab8f8" FontSize="14" VerticalAlignment="Center"/>
                </UniformGrid>
            </DockPanel>

            <!-- 功能菜单 -->
            <ItemsControl Grid.Row="1" ItemsSource="{Binding MenuModels}" Margin="0,20,0,0">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <!-- 单选分组 -->
                        <RadioButton Style="{StaticResource radioButtonStyle}" HorizontalAlignment="Left" Width="250" GroupName="Menu" >
                            <Grid Margin="30" Height="22" VerticalAlignment="Center">
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Icon}" FontFamily="Font/#iconfont"  FontSize="20" VerticalAlignment="Center"/>
                                    <TextBlock Text="{Binding Menu}" Margin="15,0,0,0" FontSize="16" VerticalAlignment="Center"/>
                                </StackPanel>
                                <TextBlock Text="{Binding Down}" FontFamily="Font/#iconfont" FontSize="8" HorizontalAlignment="Right" VerticalAlignment="Center"/>
                            </Grid>
                        </RadioButton>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Grid>

        <!-- 主界面 -->
        <Grid Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="100"/>
                <RowDefinition Height="1.2*"/>
                <RowDefinition Height="0.9*"/>
                <RowDefinition/>
            </Grid.RowDefinitions>

            <!-- 顶部筛选 -->
            <Grid Margin="50,0,50,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="250"/>
                    <ColumnDefinition  />
                </Grid.ColumnDefinitions>
                <!-- Month -->
                <DockPanel LastChildFill="False" >
                    <Border Background="White" Height="40" Width="180" CornerRadius="8" >
                        <DockPanel>
                            <TextBlock Text="&#xe60a;" FontFamily="Font/#iconfont" FontSize="18" Foreground="#97a5bb" Margin="20,10,15,10"  VerticalAlignment="Center" />
                            <TextBlock Text="Month" VerticalAlignment="Center"/>
                            <TextBlock Text="&#xe607;" FontFamily="Font/#iconfont" FontSize="10" Foreground="#97a5bb" Margin="0,0,15,0" VerticalAlignment="Center" HorizontalAlignment="Right" />
                        </DockPanel>
                    </Border>

                    <Border Background="White" Height="40" Width="40" DockPanel.Dock="Right" CornerRadius="8">
                        <TextBlock Text="&#xe610;" FontFamily="Font/#iconfont" FontSize="18" Foreground="#97a5bb" VerticalAlignment="Center" HorizontalAlignment="Center" />
                    </Border>
                </DockPanel>

                <!-- 图标 -->
                <DockPanel Grid.Column="1" LastChildFill="False">
                    <UniformGrid Columns="3" Height="40" Width="150" DockPanel.Dock="Right">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="&#xe60e;" FontFamily="Font/#iconfont" FontSize="18" Foreground="#97a5bb" VerticalAlignment="Center" HorizontalAlignment="Center" />
                            <Border Background="#e02020" Width="6" Height="6" CornerRadius="3" Margin="-10,-5,0,0"/>
                        </StackPanel>
                        <TextBlock Text="&#xe615;" FontFamily="Font/#iconfont" FontSize="18" Foreground="#97a5bb" VerticalAlignment="Center" HorizontalAlignment="Center" />
                        <TextBlock Text="&#xe611;" FontFamily="Font/#iconfont" FontSize="18" Foreground="#97a5bb" VerticalAlignment="Center" HorizontalAlignment="Right" />
                    </UniformGrid>
                </DockPanel>
            </Grid>

            <!-- 图表展示 -->
            <Grid Grid.Row="1" Margin="50,0,50,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="265"/>
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <Border Background="White" CornerRadius="14" Margin="0,0,15,0" />
                <Grid Margin="30,0,45,0">
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition Height ="4*" />
                    </Grid.RowDefinitions>
                    <TextBlock Text="OVERAL STATISTICS" Foreground="#6e6e6e" FontWeight="Bold" VerticalAlignment="Center" />

                    <Grid Grid.Row="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1.5*"/>
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition Height="2*"/>
                        </Grid.RowDefinitions>

                        <StackPanel>
                            <TextBlock Text="5.0" FontSize="42" Foreground="#141414" VerticalAlignment="Center" />
                            <TextBlock Text="Rating" FontSize="18" Foreground="#888c91" VerticalAlignment="Center" />
                        </StackPanel>
                        <StackPanel Grid.Column="1">
                            <TextBlock Text="70" FontSize="42" Foreground="#141414" VerticalAlignment="Center" />
                            <TextBlock Text="Reviews" FontSize="18" Foreground="#888c91" VerticalAlignment="Center" />
                        </StackPanel>

                        <Grid  Grid.Row="2" Grid.ColumnSpan="2">
                            <lvc:PieChart Name="pipChart" LegendLocation="Right" DataClick="PipChart_DataClick" Hoverable="True" DataTooltip="{x:Null}">
                                <lvc:PieChart.Series>
                                    <lvc:PieSeries Title="5/15" Values="5"/>
                                    <lvc:PieSeries Title="4/15" Values="4"/>
                                    <lvc:PieSeries Title="3/15" Values="3"/>
                                    <lvc:PieSeries Title="2/15" Values="2"/>
                                    <lvc:PieSeries Title="1/15" Values="1"/>
                                </lvc:PieChart.Series>
                            </lvc:PieChart>
                        </Grid>
                    </Grid>
                </Grid>

                <Border Grid.Column="1" Background="White" CornerRadius="14" Margin="15,0,0,0"/>
                <Grid  Grid.Column="1">
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition Height="4*"/>
                    </Grid.RowDefinitions>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Average rating" Foreground="#a6a6bd" FontSize="18" VerticalAlignment="Center" Margin="50,0,0,0"/>
                        <TextBlock Text="Average reviews" Foreground="#1777e8" FontSize="18" VerticalAlignment="Center" Margin="50,0,0,0"/>
                    </StackPanel>

                    <lvc:CartesianChart Series="{Binding LineSeriesCollection}"  Grid.Row="2" Margin="30,0,20,30" LegendLocation="Top">
                        <lvc:CartesianChart.AxisY >
                            <lvc:Axis >
                            </lvc:Axis>
                        </lvc:CartesianChart.AxisY>
                        <lvc:CartesianChart.AxisX>
                            <lvc:Axis Labels="{Binding  LineXLabels}">
                                <lvc:Axis.Separator>
                                    <lvc:Separator Step="1" Visibility="Hidden" StrokeThickness="1.5" StrokeDashArray="0" Stroke="#404F56"></lvc:Separator>
                                </lvc:Axis.Separator>
                            </lvc:Axis>
                        </lvc:CartesianChart.AxisX>
                    </lvc:CartesianChart>

                </Grid>
            </Grid>

            <!-- 中间占比 -->
            <Grid Grid.Row="2" Margin="50,30,50,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Border Background="White" CornerRadius="14" Margin="0,0,22.5,0" />
                <Grid Margin="30,30,55,30" >
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition Height="1.5*"/>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>

                    <TextBlock Text="INVITES SENT" VerticalAlignment="Center" Foreground="#888888" FontWeight="Bold"/>

                    <StackPanel Grid.Row="1" Orientation="Horizontal">
                        <Border Background="#6236ff" Width="40" Height="40" CornerRadius="6" VerticalAlignment="Center">
                            <TextBlock Text="&#xe609;" FontFamily="Font/#iconfont" FontSize="18" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Border>
                        <TextBlock Text="2" FontSize="30" Foreground="#6236ff" VerticalAlignment="Center" Margin="10,0,0,0"/>
                    </StackPanel>

                    <StackPanel Grid.Row="2" Orientation="Horizontal">
                        <TextBlock Text="See customers" VerticalAlignment="Bottom" Foreground="#0091ff" />
                        <TextBlock Text="that haven't" VerticalAlignment="Bottom" Foreground="#888888" Margin="5,0,0,0" />
                    </StackPanel>

                    <TextBlock Grid.Row="3" Text="been sent an invite" VerticalAlignment="Center" Foreground="#888888" />
                </Grid>

                <Border Grid.Column="1" Background="White" CornerRadius="14" Margin="7.5,0,15,0" />
                <Grid Margin="35,30,50,30" Grid.Column="1">
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition Height="1.5*"/>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>

                    <TextBlock Text="CLICK RATE" VerticalAlignment="Center" Foreground="#888888" FontWeight="Bold"/>

                    <StackPanel Grid.Row="1" Orientation="Horizontal">
                        <Border Background="#b620e0" Width="40" Height="40" CornerRadius="6" VerticalAlignment="Center">
                            <TextBlock Text="&#xe60f;" FontFamily="Font/#iconfont" FontSize="18" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Border>
                        <TextBlock Text="1.0%" FontSize="30" Foreground="#b620e0" VerticalAlignment="Center" Margin="10,0,0,0"/>
                    </StackPanel>

                    <StackPanel Grid.Row="2" Orientation="Horizontal">
                        <TextBlock Text="See customers" VerticalAlignment="Bottom" Foreground="#0091ff" />
                        <TextBlock Text="that haven't" VerticalAlignment="Bottom" Foreground="#888888" Margin="5,0,0,0" />
                    </StackPanel>

                    <TextBlock Grid.Row="3" Text="clicked the review invite link" VerticalAlignment="Center" Foreground="#888888" />
                </Grid>

                <Border Grid.Column="2" Background="White" CornerRadius="14" Margin="15,0,7.5,0" />
                <Grid Margin="45,30,40,30" Grid.Column="2">
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition Height="1.5*"/>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>

                    <TextBlock Text="REVIEWS" VerticalAlignment="Center" Foreground="#888888" FontWeight="Bold"/>

                    <StackPanel Grid.Row="1" Orientation="Horizontal">
                        <Border Background="#26c8f0" Width="40" Height="40" CornerRadius="6" VerticalAlignment="Center">
                            <TextBlock Text="&#xe60d;" FontFamily="Font/#iconfont" FontSize="18" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Border>
                        <TextBlock Text="40" FontSize="30" Foreground="#26c8f0" VerticalAlignment="Center" Margin="10,0,0,0"/>
                    </StackPanel>

                    <StackPanel Grid.Row="2" Orientation="Horizontal">
                        <TextBlock Text="See all customers" VerticalAlignment="Bottom" Foreground="#0091ff" />
                        <TextBlock Text="that" VerticalAlignment="Bottom" Foreground="#888888" Margin="5,0,0,0" />
                    </StackPanel>

                    <TextBlock Grid.Row="3" Text="leaved the reviews" VerticalAlignment="Center" Foreground="#888888" />
                </Grid>

                <Border Grid.Column="3" Background="White" CornerRadius="14" Margin="22.5,0,0,0" />
                <Grid Margin="50,30,35,30" Grid.Column="3">
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition Height="1.5*"/>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>

                    <TextBlock Text="RESPONSE RATE" VerticalAlignment="Center" Foreground="#888888" FontWeight="Bold"/>

                    <StackPanel Grid.Row="1" Orientation="Horizontal">
                        <Border Background="#20e0a5" Width="40" Height="40" CornerRadius="6" VerticalAlignment="Center">
                            <TextBlock Text="&#xe60c;" FontFamily="Font/#iconfont" FontSize="18" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Border>
                        <TextBlock Text="0.0%" FontSize="30" Foreground="#20e0a5" VerticalAlignment="Center" Margin="10,0,0,0"/>
                    </StackPanel>

                    <StackPanel Grid.Row="2" Orientation="Horizontal">
                        <TextBlock Text="See reviews" VerticalAlignment="Bottom" Foreground="#0091ff" />
                        <TextBlock Text="which haven't" VerticalAlignment="Bottom" Foreground="#888888" Margin="5,0,0,0" />
                    </StackPanel>

                    <TextBlock Grid.Row="3" Text="been responded to" VerticalAlignment="Center" Foreground="#888888" />
                </Grid>

            </Grid>

            <!-- 底部进度 -->
            <Grid Grid.Row="3" Margin="50,30,50,30">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                
                <Border Background="White" CornerRadius="14" Margin="0,0,20,0" />
                <Grid Margin="0,20,0,0">
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition  Height="2*"/>
                    </Grid.RowDefinitions>

                    <StackPanel Orientation="Horizontal" Margin="20,0,40,0">
                        <svgc:SvgViewbox IsHitTestVisible="False" Source="pack://application:,,,/Image/yelp.svg" Width="40" Height="40" />
                        <StackPanel VerticalAlignment="Center" Margin="10,0,0,0">
                            <TextBlock Text="Yelp" FontWeight="Bold" FontSize="18" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="5.0" FontWeight="Bold" VerticalAlignment="Center" FontSize="16"/>
                                <TextBlock Text="&#xe60b;" FontFamily="Font/#iconfont" Foreground="#ffc935" FontSize="16" VerticalAlignment="Center" Margin="10,0,0,0"/>
                                <TextBlock Text="&#xe60b;" FontFamily="Font/#iconfont" Foreground="#ffc935" FontSize="16" VerticalAlignment="Center" Margin="5,0,0,0"/>
                                <TextBlock Text="&#xe60b;" FontFamily="Font/#iconfont" Foreground="#ffc935" FontSize="16" VerticalAlignment="Center" Margin="5,0,0,0"/>
                                <TextBlock Text="&#xe60b;" FontFamily="Font/#iconfont" Foreground="#ffc935" FontSize="16" VerticalAlignment="Center" Margin="5,0,0,0"/>
                                <TextBlock Text="&#xe60b;" FontFamily="Font/#iconfont" Foreground="#ffc935" FontSize="16" VerticalAlignment="Center" Margin="5,0,0,0"/>
                                <TextBlock Text="40 reviews" Foreground="#777c82" FontSize="16" Margin="15,0,0,0"/>
                            </StackPanel>
                        </StackPanel>
                    </StackPanel>

                    <UniformGrid Grid.Row="1" Columns="3" Rows="2" Margin="20,10,40,10">
                        <StackPanel VerticalAlignment="Center" Margin="10,0,10,0">
                            <ProgressBar Maximum="30" Minimum="0" Height="5" Value="18" Foreground="#FFFFC935" BorderBrush="{x:Null}" Background="#FFEEEEEE" BorderThickness="0,0,0.5,0" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="18" Margin="0,10,0,0"/>
                                <TextBlock Text="/ 30" Margin="5,10,0,0" Foreground="#7f8389"/>
                            </StackPanel>
                        </StackPanel>

                        <StackPanel VerticalAlignment="Center" Margin="10,0,10,0">
                            <ProgressBar Maximum="30" Minimum="0" Height="5" Value="4" Foreground="#58d0ff" BorderBrush="{x:Null}" Background="#FFEEEEEE" BorderThickness="0,0,0.5,0" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="4" Margin="0,10,0,0"/>
                                <TextBlock Text="/ 30" Margin="5,10,0,0" Foreground="#7f8389"/>
                            </StackPanel>
                        </StackPanel>

                        <StackPanel VerticalAlignment="Center" Margin="10,0,10,0">
                            <ProgressBar Maximum="30" Minimum="0" Height="5" Value="9" Foreground="#8479ff" BorderBrush="{x:Null}" Background="#FFEEEEEE" BorderThickness="0,0,0.5,0" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="9" Margin="0,10,0,0"/>
                                <TextBlock Text="/ 30" Margin="5,10,0,0" Foreground="#7f8389"/>
                            </StackPanel>
                        </StackPanel>

                        <StackPanel VerticalAlignment="Center" Margin="10,0,10,0">
                            <ProgressBar Maximum="30" Minimum="0" Height="5" Value="5" Foreground="#ff8c23" BorderBrush="{x:Null}" Background="#FFEEEEEE" BorderThickness="0,0,0.5,0" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="5" Margin="0,10,0,0"/>
                                <TextBlock Text="/ 30" Margin="5,10,0,0" Foreground="#7f8389"/>
                            </StackPanel>
                        </StackPanel>


                        <StackPanel VerticalAlignment="Center" Margin="10,0,10,0">
                            <ProgressBar Maximum="30" Minimum="0" Height="5" Value="16" Foreground="#ff6161" BorderBrush="{x:Null}" Background="#FFEEEEEE" BorderThickness="0,0,0.5,0" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="16" Margin="0,10,0,0"/>
                                <TextBlock Text="/ 30" Margin="5,10,0,0" Foreground="#7f8389"/>
                            </StackPanel>
                        </StackPanel>
                    </UniformGrid>
                </Grid>

                <Border Grid.Column="1" Background="White" CornerRadius="14" Margin="10,0,10,0" />
                <Grid Grid.Column="1" Margin="0,20,0,0" >
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition  Height="2*"/>
                    </Grid.RowDefinitions>

                    <StackPanel Orientation="Horizontal" Margin="30,0,30,0">
                        <svgc:SvgViewbox IsHitTestVisible="False" Source="pack://application:,,,/Image/facebook.svg" Width="40" Height="40" />
                        <StackPanel VerticalAlignment="Center" Margin="10,0,0,0">
                            <TextBlock Text="Facebook" FontWeight="Bold" FontSize="18" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="4.0" FontWeight="Bold" VerticalAlignment="Center" FontSize="16"/>
                                <TextBlock Text="&#xe60b;" FontFamily="Font/#iconfont" Foreground="#ffc935" FontSize="16" VerticalAlignment="Center" Margin="10,0,0,0"/>
                                <TextBlock Text="&#xe60b;" FontFamily="Font/#iconfont" Foreground="#ffc935" FontSize="16" VerticalAlignment="Center" Margin="5,0,0,0"/>
                                <TextBlock Text="&#xe60b;" FontFamily="Font/#iconfont" Foreground="#ffc935" FontSize="16" VerticalAlignment="Center" Margin="5,0,0,0"/>
                                <TextBlock Text="&#xe60b;" FontFamily="Font/#iconfont" Foreground="#ffc935" FontSize="16" VerticalAlignment="Center" Margin="5,0,0,0"/>
                                <TextBlock Text="&#xe60b;" FontFamily="Font/#iconfont" Foreground="#e3e3e3" FontSize="16" VerticalAlignment="Center" Margin="5,0,0,0"/>
                                <TextBlock Text="40 reviews" Foreground="#777c82" FontSize="16" Margin="15,0,0,0"/>
                            </StackPanel>
                        </StackPanel>
                    </StackPanel>

                    <UniformGrid Grid.Row="1" Columns="3" Rows="2" Margin="30,10,30,10">
                        <StackPanel VerticalAlignment="Center" Margin="10,0,10,0">
                            <ProgressBar Maximum="30" Minimum="0" Height="5" Value="18" Foreground="#FFFFC935" BorderBrush="{x:Null}" Background="#FFEEEEEE" BorderThickness="0,0,0.5,0" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="18" Margin="0,10,0,0"/>
                                <TextBlock Text="/ 30" Margin="5,10,0,0" Foreground="#7f8389"/>
                            </StackPanel>
                        </StackPanel>

                        <StackPanel VerticalAlignment="Center" Margin="10,0,10,0">
                            <ProgressBar Maximum="30" Minimum="0" Height="5" Value="4" Foreground="#58d0ff" BorderBrush="{x:Null}" Background="#FFEEEEEE" BorderThickness="0,0,0.5,0" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="4" Margin="0,10,0,0"/>
                                <TextBlock Text="/ 30" Margin="5,10,0,0" Foreground="#7f8389"/>
                            </StackPanel>
                        </StackPanel>

                        <StackPanel VerticalAlignment="Center" Margin="10,0,10,0">
                            <ProgressBar Maximum="30" Minimum="0" Height="5" Value="9" Foreground="#8479ff" BorderBrush="{x:Null}" Background="#FFEEEEEE" BorderThickness="0,0,0.5,0" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="9" Margin="0,10,0,0"/>
                                <TextBlock Text="/ 30" Margin="5,10,0,0" Foreground="#7f8389"/>
                            </StackPanel>
                        </StackPanel>

                        <StackPanel VerticalAlignment="Center" Margin="10,0,10,0">
                            <ProgressBar Maximum="30" Minimum="0" Height="5" Value="5" Foreground="#ff8c23" BorderBrush="{x:Null}" Background="#FFEEEEEE" BorderThickness="0,0,0.5,0" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="5" Margin="0,10,0,0"/>
                                <TextBlock Text="/ 30" Margin="5,10,0,0" Foreground="#7f8389"/>
                            </StackPanel>
                        </StackPanel>


                        <StackPanel VerticalAlignment="Center" Margin="10,0,10,0">
                            <ProgressBar Maximum="30" Minimum="0" Height="5" Value="16" Foreground="#ff6161" BorderBrush="{x:Null}" Background="#FFEEEEEE" BorderThickness="0,0,0.5,0" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="16" Margin="0,10,0,0"/>
                                <TextBlock Text="/ 30" Margin="5,10,0,0" Foreground="#7f8389"/>
                            </StackPanel>
                        </StackPanel>
                    </UniformGrid>
                </Grid>

                <Border Grid.Column="2" Background="White" CornerRadius="14" Margin="20,0,0,0" />
                <Grid Grid.Column="2"  Margin="0,20,0,0" >
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition  Height="2*"/>
                    </Grid.RowDefinitions>

                    <StackPanel Orientation="Horizontal" Margin="40,0,20,0">
                        <svgc:SvgViewbox IsHitTestVisible="False" Source="pack://application:,,,/Image/twitter.svg" Width="40" Height="40" />
                        <StackPanel VerticalAlignment="Center" Margin="10,0,0,0">
                            <TextBlock Text="Twitter" FontWeight="Bold" FontSize="18" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="3.0" FontWeight="Bold" VerticalAlignment="Center" FontSize="16"/>
                                <TextBlock Text="&#xe60b;" FontFamily="Font/#iconfont" Foreground="#ffc935" FontSize="16" VerticalAlignment="Center" Margin="10,0,0,0"/>
                                <TextBlock Text="&#xe60b;" FontFamily="Font/#iconfont" Foreground="#ffc935" FontSize="16" VerticalAlignment="Center" Margin="5,0,0,0"/>
                                <TextBlock Text="&#xe60b;" FontFamily="Font/#iconfont" Foreground="#ffc935" FontSize="16" VerticalAlignment="Center" Margin="5,0,0,0"/>
                                <TextBlock Text="&#xe60b;" FontFamily="Font/#iconfont" Foreground="#e3e3e3" FontSize="16" VerticalAlignment="Center" Margin="5,0,0,0"/>
                                <TextBlock Text="&#xe60b;" FontFamily="Font/#iconfont" Foreground="#e3e3e3" FontSize="16" VerticalAlignment="Center" Margin="5,0,0,0"/>
                                <TextBlock Text="40 reviews" Foreground="#777c82" FontSize="16" Margin="15,0,0,0"/>
                            </StackPanel>
                        </StackPanel>
                    </StackPanel>

                    <UniformGrid Grid.Row="1" Columns="3" Rows="2" Margin="40,10,20,10">
                        <StackPanel VerticalAlignment="Center" Margin="10,0,10,0">
                            <ProgressBar Maximum="30" Minimum="0" Height="5" Value="18" Foreground="#FFFFC935" BorderBrush="{x:Null}" Background="#FFEEEEEE" BorderThickness="0,0,0.5,0" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="18" Margin="0,10,0,0"/>
                                <TextBlock Text="/ 30" Margin="5,10,0,0" Foreground="#7f8389"/>
                            </StackPanel>
                        </StackPanel>

                        <StackPanel VerticalAlignment="Center" Margin="10,0,10,0">
                            <ProgressBar Maximum="30" Minimum="0" Height="5" Value="4" Foreground="#58d0ff" BorderBrush="{x:Null}" Background="#FFEEEEEE" BorderThickness="0,0,0.5,0" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="4" Margin="0,10,0,0"/>
                                <TextBlock Text="/ 30" Margin="5,10,0,0" Foreground="#7f8389"/>
                            </StackPanel>
                        </StackPanel>

                        <StackPanel VerticalAlignment="Center" Margin="10,0,10,0">
                            <ProgressBar Maximum="30" Minimum="0" Height="5" Value="9" Foreground="#8479ff" BorderBrush="{x:Null}" Background="#FFEEEEEE" BorderThickness="0,0,0.5,0" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="9" Margin="0,10,0,0"/>
                                <TextBlock Text="/ 30" Margin="5,10,0,0" Foreground="#7f8389"/>
                            </StackPanel>
                        </StackPanel>

                        <StackPanel VerticalAlignment="Center" Margin="10,0,10,0">
                            <ProgressBar Maximum="30" Minimum="0" Height="5" Value="5" Foreground="#ff8c23" BorderBrush="{x:Null}" Background="#FFEEEEEE" BorderThickness="0,0,0.5,0" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="5" Margin="0,10,0,0"/>
                                <TextBlock Text="/ 30" Margin="5,10,0,0" Foreground="#7f8389"/>
                            </StackPanel>
                        </StackPanel>


                        <StackPanel VerticalAlignment="Center" Margin="10,0,10,0">
                            <ProgressBar Maximum="30" Minimum="0" Height="5" Value="16" Foreground="#ff6161" BorderBrush="{x:Null}" Background="#FFEEEEEE" BorderThickness="0,0,0.5,0" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="16" Margin="0,10,0,0"/>
                                <TextBlock Text="/ 30" Margin="5,10,0,0" Foreground="#7f8389"/>
                            </StackPanel>
                        </StackPanel>
                    </UniformGrid>
                </Grid>

            </Grid>

        </Grid>
    </Grid>
</Window>

MainWindow.xaml.cs

using LiveCharts;
using LiveCharts.Wpf;
using System.Linq;
using System.Windows;

namespace UISample2
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void PipChart_DataClick(object sender, ChartPoint chartPoint)
        {
            var chart = (PieChart)chartPoint.ChartView;

            //clear selected slice
            foreach (PieSeries series in chart.Series.Cast<PieSeries>())
            {
                series.PushOut = 0;

                var selectedSeries = (PieSeries)chartPoint.SeriesView;
                selectedSeries.PushOut = 8;
            }
        }
    }
}