在 UWP 应用程序中通过键盘交互修改行的可见性

Question

Here is my scenario. My table has fixed number of columns, say 2, and initially, it has only one visible row, but when the focus is on the last column of row 1 and the user press 'tab', row 2 will be made visible.

My problem is that I can't dynamically select the row I want to make visible because I have to specify its x:Name during compilation.

Below is my current work.

.xaml file

<StackPanel Orientation="Vertical">
    <StackPanel Orientation="Horizontal" x:Name="SP1">
        <TextBox Text="1-1"/>
        <TextBox Text="1-2" KeyDown="showNextLine"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal" x:Name="SP2" Visibility="Collapsed">
        <TextBox Text="2-1"/>
        <TextBox Text="2-2"/>
    </StackPanel>
    <!--the remaining rows...-->
</StackPanel>

.cs file

private int lastRowIndex = 1;

private void showNextLine(object sender, KeyRoutedEventArgs e)
{
    lastRowIndex++;
    string nextLineName = "SP" + lastRowIndex.ToString();
    nextLineName.Visibility = Visibility.Visible; // which causes error because nextLineName is string instead of StackPanel
}

Besides, my current implementation is to create 50 rows and make the last 49 invisible initially, and I am open to any method to group all the TextBox more systematically or flexibly.

Thanks for reading.

Answer 1

You could give the parent StackPanel an x:Name or keep a reference to it if you create it dynamically:

<StackPanel x:Name="root" Orientation="Vertical">
    <StackPanel Orientation="Horizontal" x:Name="SP1">
        <TextBox Text="1-1"/>
        <TextBox Text="1-2" KeyDown="showNextLine"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal" x:Name="SP2" Visibility="Collapsed">
        <TextBox Text="2-1"/>
        <TextBox Text="2-2"/>
    </StackPanel>
    <!--the remaining rows...-->
</StackPanel>

...and then get a reference to a child StackPanel using the Children property and some basic LINQ:

private void showNextLine(object sender, KeyRoutedEventArgs e)
{
    lastRowIndex++;
    string nextLineName = "SP" + lastRowIndex.ToString();
    StackPanel child = root.Children.OfType<StackPanel>().FirstOrDefault(x => x.Name == nextLineName);
    if (child != null)
        child.Visibility = Visibility.Visible;
}

How could I create a StackPanel dynamically?

Like this:

var sp = new StackPanel { Name = "SP3", Orientation = Orientation.Horizontal, Visibility = Visibility.Collapsed };
sp.Children.Add(new TextBlock { Text = "3-1" });
var txt = new TextBlock() { Text = "3-2" };
txt.KeyDown += showNextLine;
sp.Children.Add(txt);
root.Children.Add(sp);

Answer 2

I can't think of an easy way to do the first part of this (since you have 50 stack panels), but if you put all of them in a dictionary , then you could update them using just the key.

Here's the dictionary part done manually:

Dictionary<int, StackPanel> myStackPanels = new Dictionary<int, StackPanel>();
myStackPanels.Add(1, SP1);
myStackPanels.Add(2, SP2);

Then, here's what ShowNextLine would look like:

private void showNextLine(object sender, KeyRoutedEventArgs e)
{
    lastRowIndex++;
    // Modify the StackPanel whose key is lastRowIndex;
    myStackPanels[lastRowIndex] = Visibility.Visible;
}