Question

I am trying to create a network diagnostics page that is exactly like the one from wireshark.

I have a DataGrid (For displaying sent/received packets on a table), TreeView (For showing detailed information about the packet with collapse/expand functionality) and a RichTextBox (for showing raw data) in order.

Here is the XAML I currently have:

<UserControl x:Class="DDCUI.CommDiagnosisWPFCtrl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" Height="950" Width="300">
    <DockPanel LastChildFill="True">
        <DataGrid DockPanel.Dock="Top" SelectionMode="Single" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" MaxHeight="300" AutoGenerateColumns="False" Name="DGComm" CanUserResizeColumns="True" IsReadOnly="True" SelectedCellsChanged="DGComm_SelectedCellsChanged">
            <DataGrid.Columns>
                <DataGridTextColumn Header="No." Binding="{Binding Number}" Width="0.1*"/>
                <DataGridTextColumn Header="Time" Binding="{Binding Time}" Width="0.1*" />
                <DataGridTextColumn Header="Protocol" Binding="{Binding Protocol}" Width="0.15*" />
                <DataGridTextColumn Header="Source" Binding="{Binding Source}" Width="0.15*" />
                <DataGridTextColumn Header="Destination" Binding="{Binding Destination}" Width="0.15*" />
                <DataGridTextColumn Header="Data" Binding="{Binding Data}" Width="0.5*" />
            </DataGrid.Columns>
        </DataGrid>
        <RichTextBox DockPanel.Dock="Bottom" MinHeight ="100" Name="RtbHexCode" IsReadOnly="True" />
        <TreeView MinHeight="100" Name="TreeViewDecode" ScrollViewer.VerticalScrollBarVisibility="Auto"/>
    </DockPanel>
</UserControl>

I decided that the dockpanel wasn’t working out for me majorly because I can’t have the users manually adjust their row sizes.

I’m wondering what changes I have to make to XAML to fulfill my design requirements. That is:

• Users must be able to manually resize the height of the indivudual controls
• The height of the Datagrid is fixed and will never get bigger/smaller if the user resizes the main window
• When the height of the main window gets smaller, first the height of the treeview gets smaller. (during this process, a vertical scroll bar is displayed if necessary). When the treeview is no longer visible, then the height of the richtextbox gets smaller.

If my description didn’t make much sense, it’d probably be better to just open up wireshark, start the diagnostics and try resizing the application’s height to see what I mean.

Answer 1

If none of the panels, the Grid being the most versatile, do what you need you can just implement your own (by inheriting from Panel). I don’t know if it is possible to effectively subclass the Grid but that would be the first thing to look into because they already support drag resizing via GridSplitters (you could reuse those on their own though).