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>