One stack panel for each record inside table
For each record (Name, Age, City, E-mail) in the table.
I need to have one stack panel
(see in image below stack-panel
with sky blue color).
And add such list of stack panel
i开发者_运维百科n to dock panel
(see image below dock-panel
with Light Gray color).
How could it be implementing in WPF?
Does user control
can help me?
Then how could I add usercontrols inside dockpanel
as much records congaing in table?
Is there any other better and standard way?
i needs to going with MVVM, so giving your answer by considering this point.....
Thanks……You can use an ItemsControl
with a UniformGrid
as the ItemsPanel
<ItemsControl ItemsSource="{Binding Records}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid IsItemsHost="True" Columns="2" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<StackPanel>
...
</StackPanel>
</ItemsControl.ItemTemplate>
</ItemsControl>
BTW, I don't think a StackPanel
is the best choice for the item template... typically you would use a Grid
for this kind of thing. And of course you can create a UserControl
that wraps this Grid
and use it in the ItemTemplate
<Window x:Class="WpfApplication7.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<ScrollViewer>
<ItemsControl ItemsSource="{Binding Persons}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid IsItemsHost="True"
Columns="2" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" Margin="2" BorderThickness="2"
Background="LightBlue">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Text="Name" Margin="5"></TextBlock>
<TextBlock Grid.Row="1" Text="Age" Margin="5"></TextBlock>
<TextBlock Grid.Row="2" Text="City" Margin="5"></TextBlock>
<TextBlock Grid.Row="3" Text="Email" Margin="5"></TextBlock>
<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Name}" Margin="5"></TextBox>
<TextBox Grid.Row="1"
Grid.Column="1"
Text="{Binding Age}" Margin="5"></TextBox>
<TextBox Grid.Row="2"
Grid.Column="1"
Text="{Binding City}" Margin="5"></TextBox>
<TextBox Grid.Row="3"
Grid.Column="1"
Text="{Binding Email}" Margin="5"></TextBox>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
in the c# code
public partial class Window1 : Window,INotifyPropertyChanged
{
public Window1()
{
Persons = new ObservableCollection<Person>();
InitializeComponent();
Persons.Add(new Person() { Name = "John 1", Age = 25, City = "New Delhi", Email = "abc@abc.com" });
Persons.Add(new Person() { Name = "John 2", Age = 25, City = "New Delhi", Email = "abc@abc.com" });
Persons.Add(new Person() { Name = "John 3", Age = 25, City = "New Delhi", Email = "abc@abc.com" });
Persons.Add(new Person() { Name = "John 4 ", Age = 25, City = "New Delhi", Email = "abc@abc.com" });
DataContext = this ;
}
private ObservableCollection<Person> persons;
public ObservableCollection<Person> Persons {
get
{
return persons;
}
set
{
persons = value;
NotifyPropertyChanged("Persons");
}
}
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(String info)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
#endregion
}
public class Person
{
public string Name { get; set; }
public string City { get; set; }
public int Age { get; set; }
public string Email { get; set; }
}
Update : Added Scrollviewer
精彩评论