如何制作动态C＃控件

Question

I am working on a project and need some help with bindings...

I have a list of products, that can belong to a distribution center. I would like to create a dynamic form, ie, one that can decide for itself what content it should display, based on the availability of information.

Basically, The distribution currently have 3 products that it can report on, but that number is variable. It should display 3 entries right now, but should there be more (or less) it should be able to handle it.

For instance, I would like to bind the DistributionCenter's Name property to a type of header label, and the different product names, along with the quantity of each one, should be displayed as two labels (the dynamic part).

I hope I make sense. Here is the model code, the GUI is not implemented yet, as I do need help with that part.

namespace Stock
{
    public partial class MainWindow : Window
    {
        public class Product
        {
            // accessors
            public string Code { get; set; }
            public string Name { get; set; }
            public int Quantity { get; set; }
            private int Threshold { get; set; }

            // constructor
            public Product(string code, string name, int quantity, int threshold)
            {
                this.Code = code;
                this.Name = name;
                this.Quantity = quantity;
                this.Threshold = threshold;
            }
        }
        public class DistributionCentre
        {
            // accessors
            public string Name { get; set; }
            public List<Product> p = new List<Product>();

            // constructor
            public DistributionCentre(string name, Product product)
            {
                this.p.Add(product);
            }
        }

        public class StockEngine
        {
            public StockEngine()
            {
                // register a few products
                Product p1 = new Product("1001", "Product1", 10, 5);
                Product p2 = new Product("1002", "Product2", 6, 5);
                Product p3 = new Product("1003", "Product3", 8, 5);

                // assign these products to a DC
                DistributionCentre ClinicA = new DistributionCentre("DC1", p1);
            }
        }

        public MainWindow()
        {            
            StockEngine control = new StockEngine();
            InitializeComponent();
        }
    }

Edit: I have additionally created the following control, and would like to bind the controls to the relevant members of the C# classes. Any help on this will much be appreciated.

<UserControl x:Class="Stock.ReportingCard"
         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" 
         d:DesignHeight="37" d:DesignWidth="300">
<Grid Height="35">
    <Label Content="Product" Height="25" HorizontalAlignment="Left" Name="Product" VerticalAlignment="Top" Width="67" Margin="5,5,0,0" />
    <Label Content="Quantity" Height="30" HorizontalAlignment="Left" Margin="78,5,0,0" Name="Quantity" VerticalAlignment="Top" Width="59" />
    <Button Content="Plus" Height="24" HorizontalAlignment="Left" Margin="171,6,0,0" Name="PlusButton" VerticalAlignment="Top" Width="44" />
    <Button Content="Minus" Height="24" HorizontalAlignment="Left" Margin="233,6,0,0" Name="MinusButton" VerticalAlignment="Top" Width="44" />
</Grid>

Answer 1

Hello @Harriet to be honest I see a lot of issues in the provided code but I'm not going to address most of them as it's also a little bit subjective, also I feel like your question is too broad and somewhat misleading but I will address the part of it that got me interested and give you some pointers and example how to fix that part.

For simplicity I'll not go with the whole structure that you provided also note that for the bindings to work as expected (eg you change something in your view model -> your UI updates and vice versa), you need to implement INotifyPropertyChanged or use some MVVM framework like MVVM Light , Prism etc... that does that for you (with a lot more stuff)

So the issue that we'll fix is the one of having different (Dynamic) Controls for the different types of products (Not sure if you even had that in mind, but that's my understanding of dynamic control)

We'll be using one of the two approaches that I like for solving this kind of issue from MSDN, slightly modified example version of: DataTemplateSelector

(The other one that I've used and like here: WPF Based Dynamic DataTemplateSelector )

public class ProductsDataTemplateSelector : DataTemplateSelector
{
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        FrameworkElement element = container as FrameworkElement;

        if (element != null && item != null && item is Product)
        {
            Product productitem = item as Product;

            if (productitem.Code == "1001" || productitem.Code == "1003")
            {
                return element.FindResource("1001ProductTemplate") as DataTemplate;
            }
            else if (productitem.Code == "1002")
            {
                return element.FindResource("1002ProductTemplate") as DataTemplate;
            }
            else
            {
                return element.FindResource("UnknownProductTemplate") as DataTemplate;
            }
        }

        return null;
    }
}

This is the XAML to illustrate 3 different types of dynamic controls and a ListView containing all the products that we defined in the code behind

    <DataTemplate x:Key="1001ProductTemplate">
        <Grid Height="35" Background="Red">
            <Label Content="{Binding Path=Name}" Height="25" HorizontalAlignment="Left" Name="Product" VerticalAlignment="Top" Width="67" Margin="5,5,0,0" />
            <Label Content="{Binding Path=Quantity}" Height="30" HorizontalAlignment="Left" Margin="78,5,0,0" Name="Quantity" VerticalAlignment="Top" Width="59" />
            <Button Content="Plus" Height="24" HorizontalAlignment="Left" Margin="171,6,0,0" Name="PlusButton" VerticalAlignment="Top" Width="44" />
            <Button Content="Minus" Height="24" HorizontalAlignment="Left" Margin="233,6,0,0" Name="MinusButton" VerticalAlignment="Top" Width="44" />
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="1002ProductTemplate">
        <Grid Height="35" Background="Green">
            <Label Content="{Binding Path=Name}" Height="25" HorizontalAlignment="Left" Name="Product" VerticalAlignment="Top" Width="67" Margin="5,5,0,0" />
            <Label Content="{Binding Path=Quantity}" Height="30" HorizontalAlignment="Left" Margin="78,5,0,0" Name="Quantity" VerticalAlignment="Top" Width="59" />
            <Button Content="Minus" Height="24" HorizontalAlignment="Left" Margin="233,6,0,0" Name="MinusButton" VerticalAlignment="Top" Width="44" />
            <Button Content="Plus" Height="24" HorizontalAlignment="Left" Margin="171,6,0,0" Name="PlusButton" VerticalAlignment="Top" Width="44" />
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="UnknownProductTemplate">
        <Grid Height="35" Background="Blue">
            <Label Content="{Binding Path=Name}" Height="25" HorizontalAlignment="Left" Name="Product" VerticalAlignment="Top" Width="67" Margin="5,5,0,0" />
            <Label Content="{Binding Path=Quantity}" Height="30" HorizontalAlignment="Left" Margin="78,5,0,0" Name="Quantity" VerticalAlignment="Top" Width="59" />
        </Grid>
    </DataTemplate>

</Window.Resources>

<Grid>
    <ListView ItemTemplateSelector="{StaticResource ResourceKey=productDTSelector}"
              x:Name="ListView">

    </ListView>
</Grid>

We'll use just a simple list of products in the code behind

public MainWindow()
{
    InitializeComponent();
    //StockEngine control = new StockEngine();

    var products = new List<Product>();

    Product p1 = new Product("1001", "Product1", 10, 5);
    Product p2 = new Product("1002", "Product2", 6, 5);
    Product p3 = new Product("1003", "Product3", 8, 5);
    Product p4 = new Product("999", "Some Prod", 8, 5);
    Product p5 = new Product("1002", "Product4", 10, 10);

    products.Add(p1);
    products.Add(p2);
    products.Add(p3);
    products.Add(p4);
    products.Add(p5);

    ListView.ItemsSource = products;
}

So what all this code does is: Have a ListView with source - your products, the template selector is responsible for returning the correct template for each product in the collection (depending on their code). Different templates are illustrated with different structure or style of the controls (I've used your example control and just added some simple bindings to the product's properties)

Please if anyone finds this answer to be off-topic and not helpful let me know and I'll put it down.