如何在XAML中创建可扩展(下拉)表?

时间:2019-04-06 17:24:24

标签: c# wpf xaml grid

我正在一个显示表格的项目中。我正在使用网格显示表格。现在,我想在每行旁边添加“ +”按钮。单击“ +”按钮将在该行下显示一个子表。这是没有实现该功能的代码的一部分:

<Grid Name="ContentName" Grid.Row="1" Background="#FFFBFBFB" Margin="10,10,10,10" ScrollViewer.CanContentScroll="True" ScrollViewer.HorizontalScrollBarVisibility="Auto">

                <Grid.Effect>
                    <DropShadowEffect BlurRadius="20" Color="#FF858585" RenderingBias="Quality" ShadowDepth="1"/>
                </Grid.Effect>
                    <Grid Name ="Tables" Margin="30">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="80"/>
                            <RowDefinition Height="60"/>
                            <RowDefinition Height="60"/>
                            <RowDefinition Height="60"/>
                            <RowDefinition Height="60"/>
                            <RowDefinition Height="60"/>

                            <RowDefinition Height="60"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="170"></ColumnDefinition>
                            <ColumnDefinition Width="120"></ColumnDefinition>
                            <ColumnDefinition Width="60"></ColumnDefinition>
                            <ColumnDefinition Width="100"></ColumnDefinition>
                            <ColumnDefinition Width="100"></ColumnDefinition>
                            <ColumnDefinition Width="100"></ColumnDefinition>
                            <ColumnDefinition Width="100"></ColumnDefinition>
                            <ColumnDefinition Width="100"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Border Grid.Row="0" Grid.Column="0" BorderBrush="Black" BorderThickness="1,1,1,1" />
                        <TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center">
                        Expand each section to answer <LineBreak/>
                        each Risk Attribute Statement <LineBreak/>
                        [i.e. activity, service or product]
                        </TextBlock>
                        <Border Grid.Row="0" Grid.Column="1" BorderBrush="Black" BorderThickness="0,1,1,1" />
                        <TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center">
                            Category Inherent <LineBreak/>
                            Risk
                        </TextBlock>
                        <Border Grid.Row="0" Grid.Column="2"  Background="Coral"/>
                        <TextBlock Grid.Row="0" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center">
                        Select <LineBreak/>
                        Risk <LineBreak/>
                        Level
                        </TextBlock>
                        <Border Grid.Row="0" Grid.Column="3"  Background="#FFDCE6F1" />
                        <TextBlock Grid.Row="0" Grid.Column="3" HorizontalAlignment="Center" VerticalAlignment="Center">
                        Least(1)
                        </TextBlock>
                        <Border Grid.Row="0" Grid.Column="4"  Background="#FFB8CCE4" />
                        <TextBlock Grid.Row="0" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center">
                        Minimal(2)
                        </TextBlock>
                        <Border Grid.Row="0" Grid.Column="5"  Background="#FF95B3D7" />
                        <TextBlock Grid.Row="0" Grid.Column="5" HorizontalAlignment="Center" VerticalAlignment="Center">
                        Moderate(3)
                        </TextBlock>
                        <Border Grid.Row="0" Grid.Column="6"  Background="#FF366092" />
                        <TextBlock Grid.Row="0" Grid.Column="6" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White">
                        Significant(4)
                        </TextBlock>
                        <Border Grid.Row="0" Grid.Column="7"  Background="#FF244062" />
                        <TextBlock Grid.Row="0" Grid.Column="7" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White">
                        Most(5)
                        </TextBlock>

                        <Border Grid.Row="1" Grid.Column="0" BorderBrush="Black" BorderThickness="1,0,1,1" />
                        <TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0">
                        Category 1:
                        Technologies and <LineBreak/>
                        Connection Types
                        </TextBlock>
                        <Border Grid.Row="2" Grid.Column="0" BorderBrush="Black" BorderThickness="1,0,1,1" />
                        <TextBlock Grid.Row="2" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0">
                        Category 2:
                        Delivery Channels
                        </TextBlock>
                        <Border Grid.Row="3" Grid.Column="0" BorderBrush="Black" BorderThickness="1,0,1,1" />
                        <TextBlock Grid.Row="3" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin ="10,0,0,0">
                        Category 3: <LineBreak/>
                        Online/Mobile Products <LineBreak/>
                        and Technology Services
                        </TextBlock>
                        <Border Grid.Row="4" Grid.Column="0" BorderBrush="Black" BorderThickness="1,0,1,1" />
                        <TextBlock Grid.Row="4" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0">
                        Category 4: <LineBreak/>
                        Organizational Characteristics
                        </TextBlock>
                        <Border Grid.Row="5" Grid.Column="0" BorderBrush="Black" BorderThickness="1,0,1,1" />
                        <TextBlock Grid.Row="5" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0">
                        Category 5: External Threats
                        </TextBlock>

                        <Border Grid.Row="1" Grid.Column="1" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="2" Grid.Column="1" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="3" Grid.Column="1" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="4" Grid.Column="1" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="5" Grid.Column="1" BorderBrush="Black" BorderThickness="0,0,1,1" />

                        <Border Grid.Row="1" Grid.Column="2" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="2" Grid.Column="2" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="3" Grid.Column="2" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="4" Grid.Column="2" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="5" Grid.Column="2" BorderBrush="Black" BorderThickness="0,0,1,1" />

                        <Border Grid.Row="1" Grid.Column="3" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="2" Grid.Column="3" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="3" Grid.Column="3" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="4" Grid.Column="3" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="5" Grid.Column="3" BorderBrush="Black" BorderThickness="0,0,1,1" />

                        <Border Grid.Row="1" Grid.Column="4" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="2" Grid.Column="4" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="3" Grid.Column="4" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="4" Grid.Column="4" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="5" Grid.Column="4" BorderBrush="Black" BorderThickness="0,0,1,1" />

                        <Border Grid.Row="1" Grid.Column="5" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="2" Grid.Column="5" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="3" Grid.Column="5" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="4" Grid.Column="5" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="5" Grid.Column="5" BorderBrush="Black" BorderThickness="0,0,1,1" />

                        <Border Grid.Row="1" Grid.Column="6" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="2" Grid.Column="6" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="3" Grid.Column="6" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="4" Grid.Column="6" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="5" Grid.Column="6" BorderBrush="Black" BorderThickness="0,0,1,1" />

                        <Border Grid.Row="1" Grid.Column="7" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="2" Grid.Column="7" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="3" Grid.Column="7" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="4" Grid.Column="7" BorderBrush="Black" BorderThickness="0,0,1,1" />
                        <Border Grid.Row="5" Grid.Column="7" BorderBrush="Black" BorderThickness="0,0,1,1" />

                    <Expander Grid.Row="6" Grid.Column="0" Header="More Options">
                        <StackPanel Margin="10,4,0,0">
                            <ScrollBar Orientation="Vertical"
                                Minimum="1" Maximum="100"
                                       Value="10"
                            />
                            <CheckBox Margin="4" Content="Option 1" />
                            <CheckBox Margin="4" Content="Option 2" />
                            <CheckBox Margin="4" Content="Option 3" />
                        </StackPanel>
                    </Expander>

                </Grid>
                </Grid>

输出为: Screenshot

如何实现此功能?有显示表格的更好方法吗?

1 个答案:

答案 0 :(得分:0)

此代码看起来效果很差。尝试使用DataGrid而不是grid。此链接可能有用-DataGrid