HiveBrain v1.2.0
Get Started
← Back to all entries
patternModerate

Alternative to a Grid in a StackPanel form for an easier way of inserting new rows

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
rowsstackpanelalternativegridnewwayforinsertingformeasier

Problem

In my real life example I am at a layout stage and before I actually move any further I would like to review my current approach. I am still learning about UI, XAML on WPF technology and I guess I haven't gotten my head around all the possible approaches yet.

I have built this very simple SSCCE to better demonstrate what I mean:

XAML


    
        
            
            
            
            
        
        
            
            
        

        First Name
        Last Name
        Address
        Phone

        
        
        
        
    


Here is what it looks like:

Assume I will be having a list of 50+ "rows" in a form that will be either populated by a User or deserialized from an XML. At some point I may be asked to insert an extra row in between the current elements.

I can already see a potential problem of having to adjust the Grid.Row attribute's value at the point of inserting a new item until the last one.

For example, I am inserting a new element before the current Grid.Row 3 which would require me to manually shift all the attached properties of Grid.Row on all the remaining rows (say 50 - 3 ). At this point it just does not sound like I have had a well designed window/xaml from the start.

How can I overcome the problem of adding extra rows to this grid? Maybe I should start over with a different Content Control?

I am not looking for a complete solution just some insights and tips as I'm having so much fun actually digging and implementing based on tips rather than copy-pasting others code.

My alternative suggestion:

I have imported the xmlns:sys="clr-namespace:System;assembly=mscorlib" and was thinking of using a List and then filling each ListBoxItem with Labels and Textbox as well as other controls like Grid etc but I don't think I can use more than 1 control inside the ` therefore I am not sure this is a good approach.

What I do like about it is the syntax of inserting:

``


Solution

WPF readability

To keep your xaml looking clean, I reccommend using self closing tags



vs



Explicitly set properties instead of using the > content area which will easily allow for dynamic name addressable data.

Edit: Example of dynamic row content

Here I created a super simple xaml file, which could be just one line, but I added a button at the bottom to display the data.


    
        
        
    
    
    


Here in this implementation where my ` is, is where all the dynamic data will get poured into.

public partial class MainWindow : Window
{
    private Dictionary _formData;
    private List> _formLayout;

    public MainWindow()
    {
        InitializeComponent();

        //Initialize this collection for easy access to data later
        _formLayout = new List>();

        //Load this information from a file 
        List> layoutFromFile = QuickXMLReader.Read("config.cfg").First()
            .Select(item => Tuple.Create(item["Header"], item["DataName"])).ToList();

        //Create entries for this data 
        _formData = new Dictionary();
        foreach (var val in layoutFromFile)
            if (!_formData.ContainsKey(val.Item2))
                _formData.Add(val.Item2, string.Empty); //use serialized data if it exists

        //Add content to Grid
        grid.ColumnDefinitions.Insert(0, new ColumnDefinition());
        grid.ColumnDefinitions.Insert(0, new ColumnDefinition() { Width = GridLength.Auto });
        for (int i = 0; i  string.Format("{0} = \"{1}\"", item.Key, item.Value))));
    }
}


Because you don't have my
QuickXMLReader, you can replace that code with this. You can really generate this information anyway you'd like.

//Load this information from a file 
List> layoutFromFile = new List>() { 
    Tuple.Create("First Name", "fName"),
    Tuple.Create("Last Name", "lName"),
    Tuple.Create("Address", "address"),
    Tuple.Create("Phone", "phone")};


That would replace my xml file with these entries


  
  
  
  


This code, dynamically generates all the rows as you can see in the screenshot below

When you press the button it shows the submitted data collected in the back in the
_formData` dictionary.

Code Snippets

<RowDefinition />
<RowDefinition></RowDefinition>
<Label Grid.Row="0" Grid.Column="0" Content="First Name" />

vs

<Label Grid.Row="0" Grid.Column="0">First Name</Label>
<Grid.RowDefinitions>
    <RowDefinition />
    <RowDefinition />
    <RowDefinition Height="Auto" />
    <RowDefinition />
</Grid.RowDefinitions>
<row Header="First Name" ContentType="TextBox" PropertyInDataToLinkTo="fName" />

Context

StackExchange Code Review Q#51499, answer score: 11

Revisions (0)

No revisions yet.