在WPF中動態生成UI組件

Question

好吧，這是一個棘手的情況。 我的WPF項目中有2個xaml文件，即VoltageChannelView.xaml和VoltageView.Xaml，在我的VoltageView.xaml中，將網格分為3行，如下所示：

電壓查看

<Grid Style="{DynamicResource styleBackground}" >
    <Grid.RowDefinitions>
        <RowDefinition Height="70" />
        <RowDefinition />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>

    <Grid Grid.Row="0" >            
    </Grid>

    <Grid Name="ContentGrid" Grid.Row="1" Height="Auto" Width="Auto">
        <Grid.RowDefinitions>
            <RowDefinition Name="Label11" />
            <RowDefinition Name="Label22" />
            <RowDefinition Name="Label33" />
            <RowDefinition Name="Label44" />
            <RowDefinition Name="Label55" />
            <RowDefinition Name="Label66" />
            <RowDefinition Name="Label77" />
            <RowDefinition Name="Label88" />
            <RowDefinition Name="Label99" />
        </Grid.RowDefinitions>
    </Grid>        

    <Grid Grid.Row="2" >
        <Button Content="Bavaria 2" FontSize="13" Height="25" HorizontalAlignment="Left" Margin="30,0,0,0" Name="RefreshBtn" VerticalAlignment="Center" Width="105" />
        <Button Content="Redhook" FontSize="13" Height="25" HorizontalAlignment="Center" Margin="0,0,0,0" Name="Refresh1Btn" VerticalAlignment="Center" Width="105" />
        <Button Content="Bavaria 1" FontSize="13" Height="25" HorizontalAlignment="Right" Margin="0,0,30,0" Name="Refresh2Btn" VerticalAlignment="Center" Width="105" />
    </Grid>
</Grid>

現在您可以注意到Grid.Row =“ 1” ，其中我已將網格划分為9行。

VoltageChannelView ：

<CheckBox Content="On" Grid.Column="3" Height="Auto" HorizontalAlignment="Center" Margin="0" Name="On" VerticalAlignment="Center" />
<Button Content="Set" Grid.Column="1" Height="23" HorizontalAlignment="Center" Margin="85,0,0,0" Name="Set" VerticalAlignment="Center" Width="75" />
<TextBox Grid.Column="1" Height="23" HorizontalAlignment="Center" Margin="0,0,80,0" Name="textBox1" VerticalAlignment="Center" Width="70" />
<Label Content="VDD__Main" Grid.Column="0" Height="15" HorizontalAlignment="Center" Margin="0,0,70,0" Name="VoltageLabel" VerticalAlignment="Center" />
<Label Content="0.0 V" Grid.Column="2" Height="15" HorizontalAlignment="Center" Margin="0" Name="CurrentLabel" VerticalAlignment="Center" />

現在，我有3個按鈕，在我的Grid.Row =“2”，我的要求是，當我點擊“巴伐利亞2”按鈕，我想VoltageChannelView的內容放置在我VoltageView Grid.Row =“1”。 這是竅門，它應該動態地生成全部內容5次。 即，在Grid.Row =“ 1”中存在的9行中，VoltageChannelView的內容應出現在前5行中，每行各顯示一個。

在單擊“ Bavaria1”時，它將生成8次內容，依此類推。 基本上，在WPF中是否有可能基於每次單擊按鈕生成“ ChannelChannelView”的內容“ n”次，並將其顯示在我的VoltageView中？

Answer 1

是的。 您可以創建一個VoltageChanelView集合，然后為其創建一個數據模板。 我認為這樣您可以更輕松地顯示它。

首先，我真的不太了解您要使用所有這些網格行等來完成什么。 但也許使用listview而不是將網格划分為9行會使其更簡單。

實現此類

namespace TestWpf
{
    class VoltageChangeModel : INotifyPropertyChanged
    {
        private int _Voltage = 0;
        private string _ChanelName = "";
        private Brush color = Brushes.Blue;

        public Brush Color
        {
            set
            {

                if (value != color)
                {
                    onPropertyChanged("Color");
                    color = value;
                }
            }
            get
            {
                return color;
            }

        }
        public int Voltage
        {
            set
            {

                if (value != _Voltage)
                {
                    onPropertyChanged("Voltage");
                    _Voltage = value;
                }
            }
            get
            {
                return _Voltage;
            }
        }
        public String ChanelName
        {
            set
            {
                if (value != _ChanelName)
                {
                    onPropertyChanged("ChanelName");
                    _ChanelName = value;
                }
            }

            get
            {
                return _ChanelName;
            }
        }
        public VoltageChangeModel(int Voltage, string ChanelName, Brush Color)
        {
            this.ChanelName = ChanelName;
            this.Voltage = Voltage;
            this.Color = Color;
        }
        public override string ToString()
        {
            return _ChanelName;
        }




        public void onPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }
}

next this clas.... 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Collections.ObjectModel;

namespace TestWpf
{
    class ChanellList : ObservableCollection<VoltageChangeModel>
    {

    }
}
 in the mainWindow this code  after <window ,,,,,,,,,,,>


    <Grid>
        <ListBox x:Name="myViewChannelList" HorizontalAlignment="Left" Height="161" ItemsSource="{Binding}" Margin="82,38,0,0" VerticalAlignment="Top" Width="187">
            <ListBox.ItemTemplate>
                <DataTemplate >
                    <StackPanel Background="{Binding Path=Color}">
                    <Label Content="{Binding Path=Voltage}" ></Label>
                    <Label Content="{Binding Path=ChanelName}"></Label>

                    </StackPanel>
                </DataTemplate>

            </ListBox.ItemTemplate>

        </ListBox>

    </Grid>
</Window>



and then in code behind set the data context.

using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace TestWpf
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            ChanellList myChanels = new ChanellList();
            myChanels.Add(new VoltageChangeModel(30,"Channel 1 " , Brushes.Blue ));
            myChanels.Add(new VoltageChangeModel(30, "Channel 1 ", Brushes.Red));
            myViewChannelList.DataContext = myChanels;
        }
    }
}

您可以在此處下載資源http://mihairadulescu.com/download/TestWpf.rar