Question

首先，我是WPF和MVVM的新手，所以如果这是一个简单的问题请耐心等待

我正在为WPF中的应用程序创建日志查看器。我有一个日志标题网格的视图，您可以单击并展开以显示日志文本作为网格的一部分，所有其他行向下移动容纳这个文本行。

实现这一目标的最佳方法是什么？是否已存在控件？我是否需要创建自己的自定义控件？

Answer 1

您应该使用RowsDetailsTemplate作为网格：

<DataGrid Grid.Row="1" Margin="4,0,4,4" AutoGenerateColumns="False" ItemsSource="{Binding SomeItemsSource}" CanUserAddRows="False" AlternatingRowBackground="#FFCED9FF" RowDetailsTemplate="{StaticResource gridDetilsTemplate}">
                <DataGrid.Columns>
                    <DataGridTextColumn Binding="{Binding SomeValue}" Header="SOME TEXT" IsReadOnly="True"/>
                    ... 
                </DataGrid.Columns>
            </DataGrid>

您父级词典资源中的模板（可以在任何父词典资源中，也可以直接在网格中编写模板）：

<Window.Resources>            
        <DataTemplate x:Key="gridDetilsTemplate">
            <Border BorderBrush="Black" BorderThickness="1,0,1,1" Margin="2,0,2,2" CornerRadius="0,0,3,3" Padding="4,0,0,0">                
                <TextBlock Text="{Binding SomeValue}"/>
            </Border>
        </DataTemplate>

我认为这就是你需要的，一个网格行细节。希望有效。

Answer 2

尝试使用Expander。示例代码如下。您可以继续一个接一个地添加扩展器。只需确保它们很好地放置在Grid（Grid1）中以获得干净的UI。

<GroupBox x:Name="GroupBox1" Header="User Detail" >
                <Grid x:Name="Grid1" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top"
                        DataContext="yourdatacontext">
                    <Grid.Resources>                       
                    </Grid.Resources>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />                      
                    </Grid.RowDefinitions>
<Expander Grid.Column="0" Header="Sample Expander" ToolTip="This is a test" Grid.ColumnSpan="4"
                            Grid.Row="6">
                        <Border CornerRadius="3" BorderBrush="#FF5DADD9" BorderThickness="1">
                            <Grid Background="#FFE5E5E5">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />                                     
                                </Grid.RowDefinitions>

                                <Label Content="Label1:" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Margin="3" VerticalAlignment="Center"/>
                                <TextBox x:Name="tb1" Grid.Column="1"
                                        HorizontalAlignment="Left" Height="23" Margin="3" Grid.Row="0"
                                        Text="{Binding column, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}"
                                        VerticalAlignment="Center" Width="120" />
                                <TextBlock TextWrapping="Wrap" Width="500" Grid.Column="2" Grid.Row="0"
                                        Text="sample text." />

                 </Grid>
          </Border>
   </Expander>
</Grid>
</GroupBox>

WPF中的日志视图网格

2 个答案: