動態生成WPF中的UI組件

Question

好吧，這是一個棘手的情況。我在我的WPF項目，VoltageChannelView.xaml和VoltageView.Xaml，在我VoltageView.xaml我劃分了網格成3排2個XAML文件如下：

VoltageView：

<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中根據每個按鈕點擊生成VoltageChannelView「n」次的內容並將其顯示在我的VoltageView中。

Answer 1

是的。您可以創建一個VoltageChanelView集合，然後爲其創建一個數據模板。我認爲這種方式讓你更容易展示它。

首先，我並不真正瞭解你想要用所有網格行來完成什麼等等。但也許使用一個列表視圖，而不是一個網格分成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