patternModerate
Alternative to a Grid in a StackPanel form for an easier way of inserting new rows
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
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
For example, I am inserting a new element before the current
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
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
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 `
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.