qhmes/yy-admin-master/YY.Admin/Views/DashboardView.xaml

<UserControl x:Class="YY.Admin.Views.DashboardView"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:hc="https://handyorg.github.io/handycontrol"
             xmlns:ext="clr-namespace:YY.Admin.Core.Extension;assembly=YY.Admin.Core"
             xmlns:ctls="clr-namespace:YY.Admin.Core.Controls;assembly=YY.Admin.Core"
             xmlns:prism="http://prismlibrary.com/"
             xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"
             xmlns:cuslvc="clr-namespace:YY.Admin.Core.LiveCharts2;assembly=YY.Admin.Core"
             prism:ViewModelLocator.AutoWireViewModel="True">

    <hc:ScrollViewer IsInertiaEnabled="True">
        <StackPanel Style="{StaticResource BaseViewStyle}">
            <ItemsControl ItemsSource="{Binding StatisticCards}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ctls:GridPanel MinWidth="180" Gap="20"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Border 
                            Background="{DynamicResource ThirdlyRegionBrush}"
                            CornerRadius="8"
                            Padding="24"
                            Effect="{StaticResource EffectShadow1}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>

                                <StackPanel Grid.Column="0">
                                    <TextBlock 
                                        Text="{Binding Title}"
                                        FontSize="14"
                                        Foreground="{DynamicResource PrimaryTextBrush}"
                                        Margin="0,0,0,8"/>
                                    <TextBlock 
                                        Text="{Binding Value}"
                                        FontSize="28"
                                        FontWeight="Bold"
                                        Margin="0,0,0,4"/>
                                    <TextBlock 
                                        Text="{Binding Trend}"
                                        FontSize="12"
                                        Foreground="#52c41a"/>
                                </StackPanel>

                                <Border 
                                    Grid.Column="1"
                                    Background="{Binding Color}"
                                    Width="48"
                                    Height="48"
                                    CornerRadius="24"
                                    Opacity="0.1"/>
                                <TextBlock Grid.Column="1"
                                    Text="&#xE7EE;"
                                    FontFamily="Segoe MDL2 Assets"
                                    FontSize="24"
                                    Foreground="{Binding Color}"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"/>
                            </Grid>
                        </Border>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

            <!-- 图表区域 -->
            <Grid Margin="0,20,0,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="20"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <!-- 访问趋势图 -->
                <Border 
                    Grid.Column="0"
                    Background="{DynamicResource ThirdlyRegionBrush}"
                    CornerRadius="8"
                    Padding="24"
                    Effect="{StaticResource EffectShadow1}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock 
                            Text="访问趋势"
                            FontSize="16"
                            FontWeight="Bold"
                            Margin="0,0,0,16"/>
                        <Border Grid.Row="1" CornerRadius="4">
                            <lvc:CartesianChart Background="Transparent">
                                <lvc:CartesianChart.XAxes>
                                    <lvc:AxesCollection>
                                        <lvc:XamlAxis>
                                            <lvc:XamlAxis.LabelsPaint>
                                                <Binding Path="SkinType" Converter="{StaticResource BrushToSolidColorPaintConverter}">
                                                    <Binding.ConverterParameter>
                                                        <cuslvc:CusSolidColorPaint CusColor="PrimaryTextColor"/>  
                                                    </Binding.ConverterParameter>
                                                </Binding>
                                            </lvc:XamlAxis.LabelsPaint>
                                        </lvc:XamlAxis>
                                    </lvc:AxesCollection>
                                </lvc:CartesianChart.XAxes>

                                <lvc:CartesianChart.YAxes>
                                    <lvc:AxesCollection>
                                        <lvc:XamlAxis>
                                            <lvc:XamlAxis.LabelsPaint>
                                                <Binding Path="SkinType" Converter="{StaticResource BrushToSolidColorPaintConverter}">
                                                    <Binding.ConverterParameter>
                                                        <cuslvc:CusSolidColorPaint CusColor="PrimaryTextColor"/>
                                                    </Binding.ConverterParameter>
                                                </Binding>
                                            </lvc:XamlAxis.LabelsPaint>
                                            <lvc:XamlAxis.SeparatorsPaint>
                                                <Binding Path="SkinType" Converter="{StaticResource BrushToSolidColorPaintConverter}">
                                                    <Binding.ConverterParameter>
                                                        <cuslvc:CusSolidColorPaint CusColor="ThirdlyBorderBrush"/>      
                                                    </Binding.ConverterParameter>
                                                </Binding>
                                            </lvc:XamlAxis.SeparatorsPaint>
                                        </lvc:XamlAxis>
                                    </lvc:AxesCollection>
                                </lvc:CartesianChart.YAxes>

                                <lvc:CartesianChart.Series>
                                    <lvc:SeriesCollection>
                                        <lvc:XamlColumnSeries
                                            Values="{Binding Values1}"
                                            Padding="2"
                                            PointMeasuredCommand="{Binding PointMeasuredCommand}"
                                            />
                                        <lvc:XamlColumnSeries
                                            Values="{Binding Values2}"
                                            Padding="0"
                                            PointMeasuredCommand="{Binding PointMeasuredCommand}"/>
                                    </lvc:SeriesCollection>
                                </lvc:CartesianChart.Series>
                            </lvc:CartesianChart>
                        </Border>
                    </Grid>
                </Border>

                <!-- 最近活动 -->
                <Border 
                    Grid.Column="2"
                    Background="{DynamicResource ThirdlyRegionBrush}"
                    CornerRadius="8"
                    Padding="24"
                    Effect="{StaticResource EffectShadow1}">
                    <StackPanel>
                        <TextBlock 
                            Text="最近活动"
                            FontSize="16"
                            FontWeight="Bold"
                            Margin="0,0,0,16"/>

                        <ItemsControl ItemsSource="{Binding RecentActivities}">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Border BorderBrush="{DynamicResource ThirdlyBorderBrush}"
                                        BorderThickness="0,0,0,1"
                                        Padding="0,12">
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto"/>
                                                <ColumnDefinition Width="*"/>
                                            </Grid.ColumnDefinitions>

                                            <Border 
                                                Grid.Column="0"
                                                Background="#1890ff"
                                                Width="32"
                                                Height="32"
                                                CornerRadius="16"
                                                Margin="0,0,12,0">
                                                <TextBlock 
                                                    Text="&#xE7EF;"
                                                    FontFamily="Segoe MDL2 Assets"
                                                    FontSize="12"
                                                    Foreground="White"
                                                    HorizontalAlignment="Center"
                                                    VerticalAlignment="Center"/>
                                            </Border>

                                            <StackPanel Grid.Column="1">
                                                <TextBlock 
                                                    Text="{Binding Title}"
                                                    FontWeight="Bold"
                                                    FontSize="14"
                                                    Margin="0,0,0,4"/>
                                                <TextBlock 
                                                    Text="{Binding Description}"
                                                    FontSize="12"
                                                    Foreground="{DynamicResource SecondaryTextBrush}"
                                                    TextWrapping="Wrap"
                                                    Margin="0,0,0,4"/>
                                                <TextBlock 
                                                    Text="{Binding Time, StringFormat='{}{0:MM-dd HH:mm}'}"
                                                    FontSize="11"
                                                    Foreground="{DynamicResource ThirdlyTextBrush}"/>
                                            </StackPanel>
                                        </Grid>
                                    </Border>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </StackPanel>
                </Border>
            </Grid>

            <!-- 快捷操作 -->
            <Border 
                Background="{DynamicResource ThirdlyRegionBrush}"
                CornerRadius="8"
                Padding="24"
                Margin="0,20,0,0"
                Effect="{StaticResource EffectShadow1}">
                <StackPanel>
                    <TextBlock 
                        Text="快捷操作"
                        FontSize="16"
                        FontWeight="Bold"
                        Margin="0,0,0,16"/>

                    <UniformGrid Rows="1" Columns="4">
                        <Button 
                            Style="{StaticResource ButtonCustom}"
                            Padding="0,8">
                            <StackPanel>
                                <Grid>
                                    <Border
                                        Background="#52c41a"
                                        Width="48"
                                        Height="48"
                                        CornerRadius="24"
                                        Opacity="0.1"/>
                                    <TextBlock 
                                        Text="&#xE8B7;"
                                        FontFamily="Segoe MDL2 Assets"
                                        FontSize="24"
                                        Foreground="#52c41a"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"/>            
                                </Grid>

                                <TextBlock 
                                    Text="添加用户"
                                    FontSize="14"
                                    Margin="0,5,0,0"
                                    HorizontalAlignment="Center"/>
                            </StackPanel>
                        </Button>

                        <Button 
                            Style="{StaticResource ButtonCustom}"
                            Padding="0,8">
                            <StackPanel>
                                <Grid>
                                    <Border
                                        Background="#faad14"
                                        Width="48"
                                        Height="48"
                                        CornerRadius="24"
                                        Opacity="0.1"/>
                                    <TextBlock 
                                        Text="&#xE8A5;"
                                        FontFamily="Segoe MDL2 Assets"
                                        FontSize="24"
                                        Foreground="#faad14"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"/>    
                                </Grid>
                                <TextBlock 
                                    Text="系统设置"
                                    FontSize="14"
                                    Margin="0,5,0,0"
                                    HorizontalAlignment="Center"/>
                            </StackPanel>
                        </Button>
                        
                        <Button 
                            Style="{StaticResource ButtonCustom}"
                            Padding="0,8">
                            <StackPanel>
                                <Grid>
                                    <Border
                                        Background="#1890ff"
                                        Width="48"
                                        Height="48"
                                        CornerRadius="24"
                                        Opacity="0.1"/>
                                    <TextBlock 
                                        Text="&#xE8BC;"
                                        FontFamily="Segoe MDL2 Assets"
                                        FontSize="24"
                                        Foreground="#1890ff"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"/>    
                                </Grid>
                                <TextBlock 
                                    Text="数据备份"
                                    FontSize="14"
                                    Margin="0,5,0,0"
                                    HorizontalAlignment="Center"/>
                            </StackPanel>
                        </Button>
                        
                        <Button 
                            Style="{StaticResource ButtonCustom}"
                            Padding="0,8">
                            <StackPanel>
                                <Grid>
                                    <Border
                                        Background="#1890ff"
                                        Width="48"
                                        Height="48"
                                        CornerRadius="24"
                                        Opacity="0.1"/>
                                    <TextBlock 
                                        Text="&#xE946;"
                                        FontFamily="Segoe MDL2 Assets"
                                        FontSize="24"
                                        Foreground="#1890ff"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"/>    
                                </Grid>
                                <TextBlock 
                                    Text="查看日志"
                                    FontSize="14"
                                    Margin="0,5,0,0"
                                    HorizontalAlignment="Center"/>
                            </StackPanel>
                        </Button>
                    </UniformGrid>
                </StackPanel>
            </Border>

            <!-- 加载指示器 -->
            <!--<Border Visibility="{Binding IsLoading, Converter={StaticResource Boolean2VisibilityConverter}}"
                Background="White"
                CornerRadius="8"
                Padding="24"
                Margin="0,16,0,0">
                <StackPanel HorizontalAlignment="Center">
                    <hc:LoadingCircle Width="50" Height="50"/>
                    <TextBlock Text="数据加载中..." 
                            HorizontalAlignment="Center"
                            Margin="0,10,0,0"
                            Foreground="#666"/>
                </StackPanel>
            </Border>-->
        </StackPanel>
    </hc:ScrollViewer>
</UserControl>