通过TreeView和DataGrid完成一个数据筛选条件的折叠隐藏效果

最新推荐文章于 2024-06-23 18:01:24 发布

~忘记了时间~

最新推荐文章于 2024-06-23 18:01:24 发布

阅读量347

点赞数

分类专栏： WPF开发和晋级文章标签： wpf c#

本文链接：https://blog.csdn.net/qq_34581845/article/details/106057010

版权

WPF开发和晋级专栏收录该内容

8 篇文章 2 订阅

订阅专栏

界面效果

初始界面效果

由于界面是临时拷贝的之前代码，请将就看看吧：
在这里插入图片描述

展开筛选条件效果

在这里插入图片描述展示下界面使用LiveChars的折线图

前台代码如下（LiveChars部分可以自行拷贝）：

    <Grid>
        <TreeView >
            <TreeViewItem Background="GhostWhite" x:Name="btnExpend" Header="筛选：" FontSize="16" IsExpanded="False">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="3*"></RowDefinition>
                        <RowDefinition Height="3*"></RowDefinition>
                        <RowDefinition Height="3*"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid Grid.Row="0" Name="whereonecon">
                        <Label Height="30" Width="50" Margin="40,0,0,0" HorizontalAlignment="Left" Block.TextAlignment="Center" FontSize="14">叶片：</Label>
                        <RadioButton Click="Order_Change" Tag="0" GroupName="blade1"  Margin="100,0,0,0" Width="70" HorizontalAlignment="Left">叶片 1</RadioButton>
                        <RadioButton Click="Order_Change" Tag="0" GroupName="blade2"  Margin="200,0,0,0" Width="70" HorizontalAlignment="Left">叶片 2</RadioButton>
                        <RadioButton Click="Order_Change" Tag="0" GroupName="blade3"  Margin="300,0,0,0" Width="70" HorizontalAlignment="Left">叶片 3</RadioButton>
                    </Grid>
                    <Grid Grid.Row="1" Name="orderbycon">
                        <Label Height="30" Width="50" Margin="40,0,0,0" HorizontalAlignment="Left" Block.TextAlignment="Center"  FontSize="14">排序：</Label>
                        <RadioButton Click="Order_Change" Tag="0" Name="ChannelNo" GroupName="orderby1"  Margin="100,0,0,0" Width="80" HorizontalAlignment="Left" Grid.ColumnSpan="2">叶片号 ↑</RadioButton>
                        <RadioButton Click="Order_Change" Tag="0" Name="Peak_kA" GroupName="orderby2"  Margin="200,0,0,0" Width="80" HorizontalAlignment="Left" Grid.Column="1">峰值电流 ↑</RadioButton>
                        <RadioButton Click="Order_Change" Tag="0" Name="Qs_C" GroupName="orderby3" Margin="300,0,0,0" Width="80" HorizontalAlignment="Left" Grid.Column="1">电荷量 ↑</RadioButton>
                        <RadioButton Click="Order_Change" Tag="0" Name="WR" GroupName="orderby4"  Margin="400,0,0,0" Width="80" HorizontalAlignment="Left" Grid.Column="1">单位能量 ↑</RadioButton>
                        <RadioButton Click="Order_Change" Tag="0" Name="Date" GroupName="orderby5" Margin="500,0,0,0" Width="80" HorizontalAlignment="Left" Grid.Column="1">日期时间 ↑</RadioButton>
                    </Grid>
                    <Grid Grid.Row="2" Name="wheretwocon" Margin="0,5">
                        <Label Height="30" Width="50" Margin="40,0,0,0" HorizontalAlignment="Left" Block.TextAlignment="Center" FontSize="14">时段：</Label>
                        <RadioButton Click="Order_Change" Tag="1-1" GroupName="datatime"  Margin="100,0,0,0" Width="70" HorizontalAlignment="Left" Grid.ColumnSpan="3">本周</RadioButton>
                        <RadioButton Click="Order_Change" Tag="2-2" GroupName="datatime"  Margin="200,0,0,0" Width="70" HorizontalAlignment="Left" Grid.Column="2">本月</RadioButton>
                        <DatePicker Name="Starttime" SelectedDateChanged="Confirm_Time"  Width="130" Height="30"  Margin="380,0,0,0" HorizontalAlignment="Left"/>
                        <Label Margin="512,-5,0,0" Width="25" HorizontalAlignment="Left">至</Label>
                        <DatePicker Name="Endtime" SelectedDateChanged="Confirm_Time" Width="130"  Height="30"  Margin="540,0,0,0" HorizontalAlignment="Left"/>
                    </Grid>
                </Grid>
            </TreeViewItem>
            <DataGrid x:Name="DATA_GRID" Width="700" ItemsSource="{Binding}" Style="{StaticResource DataGridStyle}"  RowStyle="{StaticResource DataGridRowStyle}"  ColumnHeaderStyle="{StaticResource DataGridHeaderStyle}"  CellStyle="{StaticResource MonitorCenterGridCell}"  AutoGenerateColumns="False">
                <DataGrid.Columns>
                    <DataGridTemplateColumn Width="Auto">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Button 
                                    Tag="0"
                                    Template="{StaticResource BeginwindowButton}"
                                    Foreground="White"
                                    HorizontalAlignment="Right"
                                    Content="&#xf103;" 
                                    ToolTip="关联数据"
                                    Margin="-10,0,0,0"/>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                    <DataGridTextColumn Header="姓名" Width="300" Binding="{Binding name}"/>
                    <DataGridTextColumn Header="年龄" Width="300" Binding="{Binding age}"/>
                    <DataGridComboBoxColumn Header="性别" Width="auto" SelectedItemBinding="{Binding sexual}" ItemsSource="{Binding Source={StaticResource SexualEnum}}"/>
                </DataGrid.Columns>
                <DataGrid.RowDetailsTemplate>
                    <DataTemplate>
                        <Grid>
                            <lvc:CartesianChart Height="300" Series="{Binding seriesCollection}" Zoom="X">
                                <lvc:CartesianChart.Resources>
                                    <Style TargetType="lvc:DefaultTooltip">
                                        <Setter Property="Background" Value="DarkOrange"></Setter>
                                        <Setter Property="Foreground" Value="White"></Setter>
                                        <Setter Property="ShowTitle" Value="False"></Setter>
                                        <Setter Property="ShowSeries" Value="False"></Setter>
                                        <Setter Property="VerticalContentAlignment" Value="Center"></Setter>
                                        <Setter Property="CornerRadius" Value="5"></Setter>
                                        <Setter Property="Width" Value="70"></Setter>
                                    </Style>
                                </lvc:CartesianChart.Resources>
                                <lvc:CartesianChart.AxisX>
                                    <lvc:Axis Name="X"/>
                                </lvc:CartesianChart.AxisX>
                                <lvc:CartesianChart.AxisY>
                                    <lvc:Axis Name="Y"/>
                                </lvc:CartesianChart.AxisY>
                            </lvc:CartesianChart>
                        </Grid>
                    </DataTemplate>
                </DataGrid.RowDetailsTemplate>
            </DataGrid>
        </TreeView>
    </Grid>