Log View Grid in WPF

Question

First I am new to WPF and MVVM so bear with me if this is an easy question

I am creating a log viewer for an application in WPF, And I have this vision of a grid of log titles that you can click on and expand to show the log text as part of the grid, with all other rows shifting down to accomodate this text row.

What is the best way to accomplish this? Is there a control already present? Do I need to create my own custom control?

Your question is a really bad format for Stackoverflow. You need to make an effort to show what you already tried and why it didn't work, or what specific problems you're facing. Still, see my example of a Log Viewer [Here](http://stackoverflow.com/a/16745054/643085). Make sure you upvote it at least. — Federico Berasategui, Feb 17 '14 at 20:31

score 1 · Accepted Answer · answered Feb 17 '14 at 20:35

You should to use the RowsDetailsTemplate for the grid:

<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>

And the template in your parent's dictionary resources (could be in any parent dictionary resources, or also you could write the template directly in the grid):

<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>

I think this is what you need, a grid row details. Hope works.

score 0 · Answer 2 · answered Feb 18 '14 at 00:09

Try using Expander. Sample code below. You can keep on adding Expanders one after the other. Just make sure they are nicely placed in the Grid(Grid1) for a clean 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>

Log View Grid in WPF

2 Answers2