Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Create New Panels on Button Click? [closed]

Tags:

c#

.net

wpf

My WPF application Interface demands something really different. Actually there are dynamic buttons in my application. Now i want that as i click on Button it's Panel should create and open to add something in it's textbox to save in database! On the same way Format TextBox should update with opened Panels as this image below is showing you all.

How to differentiate between panels textboxes to save text in their textboxes in database?

enter image description here

EDIT:

I am not using MVVM!

like image 710
user2835256 Avatar asked Jan 19 '26 21:01

user2835256


1 Answers

I hope you are just asking for a general approach to the problem, as I can't be bothered to code all that stuff.
So here it goes:

  1. create a user-control for your Panels. Since they all the same, use a property to store value for which button the panel is created.
  2. create an ObservableCollection of your Panel controls, you will store your newly added panels here.
  3. create a ItemsControl to show your panels and assign your ObservableCollection as ItemsSource of that panel. This way if you add something to the collection, it will show on your GUI
  4. attach an event to your buttons, in this event you would (instantiate a new panel) -> (set ID of the panel to "button1", "button2", "button3" or however you want to distinguish) -> (add the panel to the ObservableCollection)
  5. When you finish and want to get all the panels etc, you can simply loop through your ObservableCollection and select pannels/values there. You can also use linq to filter panels by button ID etc.

Any more questions, just ask :)

--EDIT--
1. As I have said, create a user control that will be your panel. This way you can instantiate it in the code (xaml.cs file) on a button-click event, just as you would instantiate object of any other class.
2. When you are creating your panel user-control, let's call it MyPanel, add a property in the code behind and call it whatever you want (ParentButton maybe?). Now you could add a constructor that would take the button ID as parameter, or you could simply use standard constructor and then assign the button ID to that property before adding the panel to the collection.

--EDIT--
Here is a link to my struggles with ObservableCollection. There you can find a quick and simple way to attach collections to Lists and handling changes.
Microsoft tutorial on INotifyPropertyChanged, you would implement that interface in your panel (probably)
Microsoft tutorial on ObservableCollections.
Microsoft tutorial on how to bind data to lists etc.
Now remember: they use simple objects in their tutorials, but you can use user-control in the same way.
Again, it is a lot of reading, but you gotta do it yourself... Good luck :)

--EDIT--
Actually, you don't even have to create a user control, just create an object with data you want to hold, like that:

class MyPanel: INotifyPropertyChanged
{
    private string _id;
    private string _text;

    public string Id
    {
        get { return _id; }
        set
        {
            if (value != _id)
            {
                _id = value;
                NotifyPropertyChanged();
            }
        }
    }
    public string Text
    {
        get { return _text; }
        set
        {
            if (value != _text)
            {
                _text= value;
                NotifyPropertyChanged();
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Then add a control to your app window, where you want to show your panels:

<ItemsControl Name="lstPanels" ScrollViewer.VerticalScrollBarVisibility="Auto">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel orientation="vertical">
                        <TextBlock Text="{Binding Id}">
                        <TextBox Text="{Binding Text, Mode=TwoWay}" />
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

Then add an observable collection:

private ObservableCollection<MyPanel> panels = new ObservableCollection<MyPanel>();

And in constructor attach it to your ItemControl:

lstPanels.ItemsSource = panels;

Then add a function to add a new panel:

private void addPanel(string buttonId)
{
    MyPanel p = new MyPanel { Id = buttonId; };
    panels.add(p);
}

Then on your button1/button2/button3 click call that function with appropriate id:

addPanel("button1");
addPanel("button2");

When you want to finish and loop through panels, use standard foreach or for loop on panels :)

like image 167
Daniel Gruszczyk Avatar answered Jan 22 '26 10:01

Daniel Gruszczyk



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!