wpf 自定义控件-groupbox

cs 复制代码
<Application x:Class="ZGR.Databoard.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:ZGR.Databoard"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <!--  定义字体-->
        <FontFamily x:Key="Iconfont">Assets/Fonts/iconfont.ttf#iconfont</FontFamily>

        <Style TargetType="GroupBox" x:Key="GroupBoxStyle">
            <Setter Property="Margin" Value="10"></Setter>
            <Setter Property="Template" >
                <Setter.Value>
                    <ControlTemplate TargetType="GroupBox" >
                        <Border BorderBrush="#ddd" BorderThickness="1" CornerRadius="5" Background="#DDFBFAFD" >
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="45"></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                </Grid.RowDefinitions>
                                <TextBlock  FontWeight="Bold" Foreground="#11135A" FontSize="14"  Margin="20,0" HorizontalAlignment="Left" VerticalAlignment="Center" Text="{TemplateBinding Header}">
                                    <TextBlock.Effect>
                                        <DropShadowEffect  Direction="270" ShadowDepth="8" BlurRadius="20"  Color="#5766F6" Opacity="0.3"></DropShadowEffect>
                                    </TextBlock.Effect>
                                 <Border Height="2" Background="#DDD" VerticalAlignment="Bottom" ></Border>
                                </TextBlock>
                                <ContentPresenter Grid.RowSpan="2"></ContentPresenter>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


    </Application.Resources>
</Application>
cs 复制代码
     <GroupBox Header="各生产线生产量趋势">
         <Grid>
             <Grid.RowDefinitions>
                 <RowDefinition Height="45"/>
                 <RowDefinition Height="auto"/>
                 <RowDefinition/>
             </Grid.RowDefinitions>

             <Border CornerRadius="5" Background="#EAEAF7" 
                 VerticalAlignment="Center" HorizontalAlignment="Right"
                 Margin="15,0">
                 <Border.Resources>
                     <Style TargetType="RadioButton">
                         <Setter Property="Width" Value="40"/>
                         <Setter Property="Height" Value="25"/>
                         <Setter Property="Background" Value="Transparent"/>
                         <Setter Property="FontSize" Value="11"/>
                         <Setter Property="Template">
                             <Setter.Value>
                                 <ControlTemplate TargetType="RadioButton">
                                     <Border Background="{TemplateBinding Background}"
                                         CornerRadius="5">
                                         <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                     </Border>
                                 </ControlTemplate>
                             </Setter.Value>
                         </Setter>
                         <Style.Triggers>
                             <Trigger Property="IsChecked" Value="True">
                                 <Setter Property="Background" Value="#5665F4"/>
                                 <Setter Property="Foreground" Value="White"/>
                             </Trigger>
                         </Style.Triggers>
                     </Style>
                 </Border.Resources>
                 <Grid>
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition/>
                         <ColumnDefinition Width="auto"/>
                         <ColumnDefinition/>
                         <ColumnDefinition Width="auto"/>
                         <ColumnDefinition/>
                         <ColumnDefinition Width="auto"/>
                         <ColumnDefinition/>
                     </Grid.ColumnDefinitions>
                     <Border Background="#DDD" Width="1" Grid.Column="1" Margin="0,5"/>
                     <Border Background="#DDD" Width="1" Grid.Column="3" Margin="0,5"/>
                     <Border Background="#DDD" Width="1" Grid.Column="5" Margin="0,5"/>

                     <RadioButton Content="天" IsChecked="True"/>
                     <RadioButton Content="周" Grid.Column="2"/>
                     <RadioButton Content="月" Grid.Column="4"/>
                     <RadioButton Content="季度" Grid.Column="6"/>
                 </Grid>
             </Border>

             <StackPanel Orientation="Horizontal" VerticalAlignment="Center" 
                     HorizontalAlignment="Left" Grid.Row="1"
                     Margin="20,10" TextBlock.Foreground="#888">
                 <Border Width="10" Height="4" Background="#5966F1"/>
                 <TextBlock Text="生产线1" Margin="10,0,30,0"/>

                 <Border Width="10" Height="4" Background="#01BAC0"/>
                 <TextBlock Text="生产线2" Margin="10,0,30,0"/>

                 <Border Width="10" Height="4" Background="#FF7371"/>
                 <TextBlock Text="生产线3" Margin="10,0,30,0"/>

                 <Border Width="10" Height="4" Background="#FFC90C"/>
                 <TextBlock Text="生产线4" Margin="10,0,30,0"/>
             </StackPanel>


             <lvc:CartesianChart Grid.Row="2" Margin="20,10">
                 <!--调整序列-->
                 <lvc:CartesianChart.Series>
                     <lvc:LineSeries Values="22,28,38,35,30,21,32,40,39,35"
                                 LineSmoothness="0" PointGeometrySize="0"
                                 Stroke="#5966F1" Title="生产线1">
                         <lvc:LineSeries.Fill>
                             <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                 <GradientStop Color="#095770F0" Offset="0.5"/>
                                 <GradientStop Color="Transparent" Offset="1"/>
                             </LinearGradientBrush>
                         </lvc:LineSeries.Fill>
                     </lvc:LineSeries>

                     <lvc:LineSeries Values="13,14,21,15,21,15,22,20,25,33" 
                                 LineSmoothness="0" PointGeometrySize="0"
                                 Stroke="#03B9B7" Title="生产线2">
                         <lvc:LineSeries.Fill>
                             <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                 <GradientStop Color="#0903B9B7" Offset="0.5"/>
                                 <GradientStop Color="Transparent" Offset="1"/>
                             </LinearGradientBrush>
                         </lvc:LineSeries.Fill>
                     </lvc:LineSeries>

                     <lvc:LineSeries Values="8,9,10,9.5,9,9.5,12,8,13,7" 
                                 LineSmoothness="0" PointGeometrySize="0"
                                 Stroke="#FF7778" Title="生产线3">
                         <lvc:LineSeries.Fill>
                             <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                 <GradientStop Color="#09FF7778" Offset="0.5"/>
                                 <GradientStop Color="Transparent" Offset="1"/>
                             </LinearGradientBrush>
                         </lvc:LineSeries.Fill>
                     </lvc:LineSeries>

                     <lvc:LineSeries Values="4,2,5,4.5,5,4.5,6,7,2,4" 
                                 LineSmoothness="0" PointGeometrySize="0"
                                 Stroke="#FFCA06" Title="生产线3">
                         <lvc:LineSeries.Fill>
                             <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                 <GradientStop Color="#09FFCA06" Offset="0.5"/>
                                 <GradientStop Color="Transparent" Offset="1"/>
                             </LinearGradientBrush>
                         </lvc:LineSeries.Fill>
                     </lvc:LineSeries>
                 </lvc:CartesianChart.Series>

                 <!--调整X轴-->
                 <lvc:CartesianChart.AxisX>
                     <lvc:Axis Labels="09.01,09.02,09.03,09.04,09.05,09.06,09.07,09.08,09.09,09.10">
                         <lvc:Axis.Separator>
                             <lvc:Separator Step="1" StrokeThickness="0"/>
                         </lvc:Axis.Separator>
                     </lvc:Axis>
                 </lvc:CartesianChart.AxisX>

                 <!--调整Y轴-->
                 <lvc:CartesianChart.AxisY>
                     <lvc:Axis MinValue="0" MaxValue="50" 
                           LabelFormatter="{Binding YLableFormater}">
                         <lvc:Axis.Separator>
                             <lvc:Separator Step="10" Stroke="#DDD" StrokeThickness="0.5"/>
                         </lvc:Axis.Separator>
                     </lvc:Axis>
                 </lvc:CartesianChart.AxisY>

             </lvc:CartesianChart>

         </Grid>

     </GroupBox>
相关推荐
laowangpython6 天前
Photoshop 2025 下载安装全攻略
其他·ui·photoshop
风华圆舞6 天前
Flutter + 鸿蒙 Intents Kit:页面直达能力的完整接入方案
flutter·ui·华为·harmonyos
鲲穹AI超级员工6 天前
多款实用配色工具汇总,适配设计、UI 创作等多元场景
ui·色彩设计
UXbot6 天前
帮助企业低门槛开展AI应用开发的平台推荐
前端·低代码·ui·交互·产品经理·原型模式·web app
Chris _data6 天前
WPF 学习第三天 — Modbus RTU 串口通信
hadoop·学习·wpf
烂白菜6 天前
智码美形:华为云码道 × UI-UX-Pro-Max 高品质界面智能生成实践
ui·华为云·ux
像风一样的男人@6 天前
python --实现代理服务器
git·ui
风华圆舞6 天前
鸿蒙 Flutter 页面怎么感知防窥状态并调整 UI 可见性
flutter·ui·harmonyos
UXbot7 天前
如何选择适合公司项目的UI设计工具?企业选型指南
前端·低代码·ui·团队开发·原型模式·设计规范·web app
UXbot7 天前
原型设计工具如何帮助新人快速进入产品行业?
前端·低代码·ui·交互·团队开发·原型模式·web app