如何制作動態C＃控件

Question

我正在做一個項目，需要一些有關綁定的幫助...

我有一個產品列表，可以屬於一個配送中心。 我想創建一個動態表格，即可以根據信息的可用性自行決定應顯示的內容。

基本上，該發行版目前可以報告3種產品，但是該數字是可變的。 它現在應該顯示3個條目，但是應該能夠處理更多（或更少）條目。

例如，我想將DistributionCenter的Name屬性綁定到一種標題標簽，並且不同的產品名稱以及每個產品的數量應顯示為兩個標簽（動態部分）。

我希望我有道理。 這是模型代碼，尚未實現GUI，因為我確實需要該部分的幫助。

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();
        }
    }

編輯：我另外創建了以下控件，並希望將控件綁定到C＃類的相關成員。 在這方面的任何幫助將不勝感激。

<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

您好@Harriet，老實說，我在所提供的代碼中看到了很多問題，但由於其中有些主觀性，所以我將不解決大多數問題，我也覺得您的問題過於籠統，有些誤導，但我會解決引起我興趣的部分，並提供一些指導和示例，說明如何修復該部分。

為簡單起見，我不會使用您提供的整個結構，還要注意，要使綁定按預期工作（例如，更改視圖模型中的某些內容-> UI更新，反之亦然），則需要實現INotifyPropertyChanged或使用一些MVVM框架，例如MVVM Light ， Prism等...為您做到了（還有更多東西）

因此，我們要解決的問題是對不同類型的產品使用不同的（動態）控件（不確定您是否牢記這一點，但這是我對動態控件的理解）

我們將使用我喜歡的兩種方法之一來解決MSDN上的此類問題，對以下示例版本進行了稍微修改： DataTemplateSelector

（我在這里使用並喜歡的另一個： 基於WPF的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;
    }
}

這是XAML，用於說明3種不同類型的動態控件和一個ListView，其中包含我們在后面的代碼中定義的所有產品

    <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>

我們將在后面的代碼中僅使用產品的簡單列表

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;
}

因此，這些代碼的全部作用是：有一個帶有源的ListView-您的產品，模板選擇器負責為集合中的每個產品返回正確的模板（取決於它們的代碼）。 展示了具有不同結構或樣式的控件的不同模板（我已經使用了示例控件，只是向產品屬性添加了一些簡單的綁定）

如果有人發現此答案是題外話，對您沒有幫助，請告訴我，我會予以保留。