At the begining I'll show some code:
private ObservableCollection<otwarteBezStolika> otwarteBezStolika = new ObservableCollection<otwarteBezStolika>();
public ObservableCollection<otwarteBezStolika> listunia
{
get { return otwarteBezStolika; }
set { otwarteBezStolika = value; }
}
}
public class otwarteBezStolika
{
public string number { get; set; }
public string date { get; set; }
public int orderID { get; set; }
public decimal price { get; set; }
public decimal priceR { get; set; }
public string opisRach { get; set; }
public string sum { get; set; }
}
And now in xaml:
<Window.Resources>
<DataTemplate x:Key="dataTempl">
<Border BorderBrush="Coral" BorderThickness="1" Width="170">
<Button Name="goToPOS" Tag="{Binding orderID}" Click="goToPOS_Click" Style="{StaticResource TabCloseButtonStyle}" Margin="1">
<StackPanel>
<Label Content="{Binding number}" HorizontalAlignment="Center" FontSize="15" FontWeight="ExtraBold" HorizontalContentAlignment="Center"></Label>
<Border BorderBrush="Turquoise" BorderThickness="1" Width="170"></Border>
<Label Content="{Binding date}" FontSize="12" HorizontalAlignment="Center"></Label>
<TextBlock Text="{Binding opisRach}" FontStyle="Italic" FontSize="12" Foreground="Black" TextAlignment="Center" TextWrapping="Wrap" Margin="0,0,0,2"></TextBlock>
<Border BorderBrush="WhiteSmoke" BorderThickness="1" Width="170"></Border>
<Label Content="{Binding sum}" FontSize="19" HorizontalAlignment="Center"></Label>
</StackPanel>
</Button>
</Border>
</DataTemplate>
<DataTemplate x:Key="mainTemplate">
<StackPanel>
<ItemsControl x:Name="imageContent" ItemsSource="{Binding listunia}" ItemTemplate="{StaticResource dataTempl}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</StackPanel>
</DataTemplate>
</Window.Resources>
Grid:
<Grid Grid.Row="0">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ItemsControl Name="templ" ItemsSource="{Binding ElementName=UI, Path=listunia }" ItemTemplate="{StaticResource mainTemplate}" />
</ScrollViewer>
</Grid>
Problem is that I cannot see any item (I'm filling items using sqldatareader, and adding them to list - by the way, does DataTable will also work? So instead while(rdr.Read()) i could ouse SqlDataAdapter sda and sda.fill(Datatable))
Second problem is that, it does work when I put "dataTempl" inside scrollviewer ,like :
<Grid Grid.Row="0">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ItemsControl Name="templ" ItemsSource="{Binding ElementName=UI, Path=listunia }" ItemTemplate="{StaticResource dataTempl}" />
</ScrollViewer>
</Grid>
but items are show vertically, but I need to see them from left to right horizontal.
Thanks for answers!
Try doing this.. you dont need maintemplate.
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ItemsControl Name="templ" ItemsSource="{Binding ElementName=UI, Path=listunia }" ItemTemplate="{StaticResource dataTempl}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
OR you can simply use:
<ListBox Name="templ" ItemsSource="{Binding ElementName=UI, Path=listunia }" ItemTemplate="{StaticResource dataTempl}">
</ListBox>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ItemsControl Name="kaloo" DisplayMemberPath="Name" ss:DragDrop.IsDragSource="True" ss:DragDrop.IsDropTarget="True" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ScrollViewer>
Related
I am trying to set the alignment of the contents in the ListBox below. I have wrapped the ListBox inside a ScrollViewer to make it scroll horizontally.
Each element of the Listbox is a Stackpanel and I am trying to align each one to the Top and to set the width to auto for each.
Right now, the stackpanels are centered vertically and the width of each one is the same and is represented by the width of the largest panel.
I have put HorizontalContentAlignment="Left" and VerticalContentAlignment="Top", as I have read in similar posts but it does not change anything.
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" >
<ListBox ItemsSource="{Binding Termene}" SelectedItem="{Binding SelectedTermenCondica}" HorizontalContentAlignment="Left" VerticalContentAlignment="Top">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate >
<DataTemplate >
<StackPanel Margin="2" >
<StackPanel.Resources>
<CollectionViewSource Source="{Binding Dosare}" x:Key="dosareView" IsLiveSortingRequested="True" >
<CollectionViewSource.SortDescriptions>
<scm:SortDescription PropertyName="Ora" />
</CollectionViewSource.SortDescriptions>
</CollectionViewSource>
<Style x:Key="NoFocusColumStyle" TargetType="{x:Type DataGridCell}">
<Setter Property="IsHitTestVisible" Value="False"/>
</Style>
</StackPanel.Resources>
<TextBlock Text="{Binding NumeComplet, StringFormat='Complet {0}'}" HorizontalAlignment="Center" FontWeight="Bold" VerticalAlignment="Top"></TextBlock>
<TextBlock Text="{Binding TermenCB, StringFormat='Termen: {0}'}" HorizontalAlignment="Center" FontWeight="Bold" VerticalAlignment="Top"></TextBlock>
<DataGrid IsSynchronizedWithCurrentItem="True" CellStyle="{StaticResource NoFocusColumStyle}" IsReadOnly="True" ItemsSource="{Binding Source={StaticResource dosareView}}" Style="{StaticResource DGRapaorte}" AutoGenerateColumns="False" >
<DataGrid.Columns>
<DataGridTextColumn Header="Nr. dosar" Binding="{Binding NumarDosar}"/>
<DataGridTextColumn CanUserSort="True" SortDirection="Ascending" SortMemberPath="Ora" Header="Ora" Binding="{Binding Ora, StringFormat={}{0:HH:mm}}" />
<DataGridTextColumn Header="Obiect" Binding="{Binding Obiect}"/>
</DataGrid.Columns>
</DataGrid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
Later edit:
I have added some data (three items in Termene to show you how it looks. I have blurred them out, but you can see the issue.
Here is how it looks right now:
Scrolled further:
Now, here is how I would like it to look like:
As you can see, the height and width of every item is set with the width and height of the largest item.
Replace the Uniformgrid part with this:
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
Source: https://stackoverflow.com/a/3565590/4394435
This example worked for me:
<Window x:Class="WpfMVVM.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfMVVM"
mc:Ignorable="d"
Title="MainWindow" Height="500" Width="500">
<ListBox ItemsSource="{Binding Items}" VerticalContentAlignment="Top">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="2">
<TextBlock Text="test" HorizontalAlignment="Center" FontWeight="Bold" />
<TextBlock Text="blub" HorizontalAlignment="Center" FontWeight="Bold" />
<DataGrid IsSynchronizedWithCurrentItem="True" IsReadOnly="True"
ItemsSource="{Binding DataGridItems}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="Nr. dosar" Binding="{Binding Text}" />
</DataGrid.Columns>
</DataGrid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Window>
with this viewModel
public class DataViewModel
{
public DataViewModel()
{
}
public List<Item> Items { get; set; } = new List<Item>()
{
new Item(){DataGridItems = new List<DataGridItem>(){new DataGridItem() { Text = "a"} }},
new Item(){DataGridItems = new List<DataGridItem>(){new DataGridItem() { Text = "aaaaaaaaaaa"} }},
new Item(){DataGridItems = new List<DataGridItem>(){new DataGridItem() { Text = "aaaaaaaaaaaaaaaaaa"} }},
new Item(){DataGridItems = new List<DataGridItem>()
{
new DataGridItem() { Text = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"},
new DataGridItem() { Text = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"},
new DataGridItem() { Text = "aaa"},
new DataGridItem() { Text = "aaaaaaaaaa"}
}}
};
}
public class Item
{
public List<DataGridItem> DataGridItems { get; set; }
}
public class DataGridItem
{
public string Text { get; set; }
}
I have a ItemControl and inside I have a comboBox, what I'm trying to achieve is to have a different dataContext for the comboBox itemsSource
This is my itemControl:
<ItemsControl ItemsSource="{Binding Types}" Margin="0,25,0,0" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<DockPanel Margin="8">
<Border CornerRadius="6" BorderBrush="Gray" Background="LightGray" BorderThickness="2" DockPanel.Dock="Top">
<StackPanel >
<StackPanel Orientation="Horizontal" Margin="10">
<TextBlock Text="Name:" FontSize="15" FontWeight="SemiBold"/>
<TextBox Text="{Binding Name}" Width="70" Margin="10,0,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="10">
<TextBlock Text="Type:" FontSize="15" FontWeight="SemiBold"/>
<ComboBox ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}},Path=DataContext.EmployeeStatus}"
SelectedValue="{Binding Type}" Width="70" Margin="10,0,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="10">
<TextBlock Text="Units:" FontSize="15" FontWeight="SemiBold"/>
<TextBox Text="{Binding Units}" Width="70" Margin="10,0,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="10">
<TextBlock Text="Range:" FontSize="15" FontWeight="SemiBold"/>
<TextBox Text="{Binding Range}" Width="70" Margin="10,0,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="10">
<TextBlock Text="Scale:" FontSize="15" FontWeight="SemiBold"/>
<TextBox Text="{Binding Scale}" Width="70" Margin="10,0,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="10">
<TextBlock Text="Reason:" FontSize="15" FontWeight="SemiBold"/>
<TextBox Text="{Binding Reason}" Width="70" Margin="10,0,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="10">
<TextBlock Text="Description:" FontSize="15" FontWeight="SemiBold" />
<TextBox Text="{Binding Description}" Width="70" Margin="10,0,0,0"/>
</StackPanel>
</StackPanel>
</Border>
</DockPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I saw something similar but couldn't make the connection to my problem
WPF ComboBox bind itemssource to different datacontext in MVVM
Solution 1: Each ComboBox has different items
You must create appropriate type with ComboBox items source.
Example:
public class MyType
{
public string Name { get; set; }
public List<string> Types { get; set; }
public string Type { get; set; }
//...
}
Now you can binding ComboBox items source to different source:
<ItemsControl ItemsSource="{Binding Types}" Margin="0,25,0,0" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<DockPanel Margin="8">
<Border CornerRadius="6" BorderBrush="Gray" Background="LightGray" BorderThickness="2" DockPanel.Dock="Top">
<StackPanel >
<StackPanel Orientation="Horizontal" Margin="10">
<TextBlock Text="Name:" FontSize="15" FontWeight="SemiBold"/>
<TextBox Text="{Binding Name}" Width="70" Margin="10,0,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="10">
<TextBlock Text="Type:" FontSize="15" FontWeight="SemiBold"/>
<ComboBox ItemsSource="{Binding Path=Types}"
SelectedValue="{Binding Type}" Width="70" Margin="10,0,0,0"/>
</StackPanel>
...
</ItemsControl>
Here you can find example solution.
Solution 2: All ComboBox have the same items
public class MyType
{
public string Name { get; set; }
public string Type { get; set; }
}
class MyViewModel
{
private List<MyType> _types;
public List<MyType> Types
{
get { return _types; }
set { _types = value; }
}
public List<string> TypesItemsSource { get; set; }
}
XAML code:
<ItemsControl ItemsSource="{Binding Types}" Margin="0,25,0,0" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<DockPanel Margin="8">
<Border CornerRadius="6" BorderBrush="Gray" Background="LightGray" BorderThickness="2" DockPanel.Dock="Top">
<StackPanel >
<StackPanel Orientation="Horizontal" Margin="10">
<TextBlock Text="Name:" FontSize="15" FontWeight="SemiBold"/>
<TextBox Text="{Binding Name}" Width="70" Margin="10,0,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="10">
<TextBlock Text="Type:" FontSize="15" FontWeight="SemiBold"/>
<ComboBox ItemsSource="{Binding Path=DataContext.TypesItemsSource, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}"
SelectedValue="{Binding Type}" Width="70" Margin="10,0,0,0"/>
</StackPanel>
...
</ItemsControl>
Here you can find example solution.
i use "marker interfaces" to find the right datacontext
public interface IDataContextMarker{} //just an empty interface
so within the view where your viewmodel is bound to implement this interface
public class MyView : IDataContextMarker {}
and now you can use the interface with relativesource binding instead of controls or ancestorlevel, that makes thing easier for some cases :)
<ComboBox ItemsSource="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:IDataContextMarker}}, Path=DataContext.EmployeeStatus}"
How can i bind multiple levels of data in same time like List of chapters and under each chapter list of pages.
The class structure and xaml i used is shown here
public class ContentsPage
{
public string cname{ get; set; }
public string label { get; set; }
}
public class Chapter
{
public string name { get; set; }
public string id { get; set; }
public List<ContentsPage> pages { get; set; }
}
public class Model
{
public List<Chapter> chapters { get; set; }
}
<ItemsControl x:Name="TopLevelListBox" ItemsSource="{Binding}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander ExpandDirection="Down" Width="175">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=name}" Margin="0,0,5,0"/>
</StackPanel>
</Expander.Header>
<ListBox x:Name="SubListBox" ItemsSource="{Binding Path=enrichments}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=cname}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Expander>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
For binding i used the code
Model data = new Model(); //load data
TopLevelListBox.DataContext = data.chapters;
Only my expander headers are filled with result. What i need to do fill the pages inside the expander ? Any ideas or samples link for doing the same
Your ItemsControl Item template should change a bit. Instead of setting the ListBox as Content of Expander, set it as Content Template.
<Expander ExpandDirection="Down"
Width="175" Content="{Binding}">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=name}"
Margin="0,0,5,0" />
</StackPanel>
</Expander.Header>
<Expander.ContentTemplate>
<DataTemplate>
<ListBox x:Name="SubListBox"
ItemsSource="{Binding Path=enrichments}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=cname}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
And make sure you have sub items to show in ListBox.
I'm trying to bind data into nested StackPanels in WPF using the following code - to no avail. Can anybody spot where I'm going wrong?
<Page.Resources>
<DataTemplate x:Key="MinuteTimeSlotTemplate">
<TextBlock Text="{Binding Path=TourName}" Background="Blue" />
</DataTemplate>
<DataTemplate x:Key="HourlyTimeSlotTemplate">
<StackPanel>
<Border Height="120" BorderThickness="0,0,0,1" BorderBrush="#DDD" x:Name="parentRow">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="123"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="0,0,10,0" MouseUp="StackPanel_MouseUp_1">
<TextBlock Foreground="#4585B9" FontWeight="Bold" FontFamily="Trebuchet MS" FontSize="20" HorizontalAlignment="Right">
<Run Text="{Binding Path=Time}"/></TextBlock>
<TextBlock FontFamily="Trebuchet MS" Foreground="#808080" HorizontalAlignment="Right"><Run Text="View Bookings"/></TextBlock>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="1" Margin="10,0,10,0" x:Name="stk">
<ItemsControl ItemTemplate="{StaticResource MinuteTimeSlotTemplate}" ItemsSource="{Binding Path=HourlySlots}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</StackPanel>
</Grid>
</Border>
</StackPanel>
</DataTemplate>
</Page.Resources>
<helpers:AnimatedScrollViewer x:Name="scrlHours" Grid.Column="1" PanningMode="Both" PanningDeceleration="5" PanningRatio="2">
<ItemsControl x:Name="TimeSlotList" ItemTemplate="{StaticResource HourlyTimeSlotTemplate}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</helpers:AnimatedScrollViewer>
I set the parent StackPanels ItemsSource in code:
public HourlyCalendar() {
InitializeComponent();
TimeSlotList.ItemsSource = new Models.TimeSlots(DateTime.Today).HourlySlots;
}
And here's my model:
public class TimeSlots {
public TimeSlots(DateTime? day) {
this.HourlySlots = DataManager.GetCalendarDayTimeSlots(day);
}
public IEnumerable<TimeSlot> HourlySlots { get; set; }
}
The parent StackPanel binds as expected, but I cannot figure out how to bind the child StackPanel...
Turns out it was rather simple:
<helpers:AnimatedScrollViewer x:Name="scrlHours" Grid.Column="1" PanningMode="Both" PanningDeceleration="5" PanningRatio="2">
<ItemsControl x:Name="TimeSlots">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Height="120" BorderThickness="0,0,0,1" BorderBrush="#DDD" x:Name="parentRow">
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="0,0,10,0" Width="123" MouseUp="StackPanel_MouseUp_1"> <!--Height="{Binding Height, ElementName=parentRow}"-->
<TextBlock Foreground="#4585B9" FontWeight="Bold" FontFamily="Trebuchet MS" FontSize="20" HorizontalAlignment="Right">
<Run Text="{Binding Path=Time}"/></TextBlock>
<TextBlock FontFamily="Trebuchet MS" Foreground="#808080" HorizontalAlignment="Right"><Run Text="View Bookings"/></TextBlock>
</StackPanel>
<ListView ItemsSource="{Binding Bookings}" ScrollViewer.CanContentScroll="False">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding TourName}"></TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListView>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</helpers:AnimatedScrollViewer>
I am working on list boxes in WPF. I want to show the list boxes in horizontal direction. My code is
<Grid>
<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto">
<ItemsControl x:Name="list" >
<ItemsControl.ItemTemplate>
<HierarchicalDataTemplate>
<Border Padding="5,0,0,2">
<WrapPanel Orientation="Horizontal">
<ListBox Name="mylistBox" Width="200" Height="200">
<Label Content="{Binding name}"/>
<Label Content="{Binding phone}"/>
<Label Content="{Binding email}"/>
<TextBox Name="NameTxt" Width="20" Height="20" Text="{Binding Path=Contact1.name}"></TextBox>
</ListBox>
</WrapPanel>
</Border>
</HierarchicalDataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
and my program looks like in the picture (Vertical)
Can anyone tell me how I can change the view?
thanks in advance.
<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto">
<ItemsControl x:Name="list" ItemsSource="{Binding Items}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<HierarchicalDataTemplate>
<Border Padding="5,0,0,2">
<ListBox Name="mylistBox"
Width="200"
Height="200">
<Label Content="{Binding name}" />
<Label Content="{Binding phone}" />
<Label Content="{Binding email}" />
<TextBox Name="NameTxt"
Width="20"
Height="20"
Text="{Binding Path=Contact1.name}" />
</ListBox>
</Border>
</HierarchicalDataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
Your itemscontrol doesn't provide a custom ItemsPanel, then a StackPanel is used as a default with vertical Orientation.
Try add:
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
You can either use a WrapPanel or a StackPanel depending on your requirements.
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
The documentation for IsItemsHost has an example of a horizontal list box.
Try a WrapPannel, which will lay the items out horizontally until there is no more room, and then move to the next line.
You also could use a UniformGrid, which will lay the items out in a set number of rows or columns.
The way we get the items to arange using these other panels in a ListView, ListBox, or any form of ItemsControl is by changing the ItemsPanel property. By setting the ItemsPanel you can change it from the default StackPanel that is used by ItemsControls. With the WrapPanel we also should set the widths as shown here.
<ListView>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType=ListView}}"
MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType=ListView}}" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
...
</ListView>
I post this answer because of informational purposes as an alternative way of doing things:
Entities/Classes:
public class Person
{
public string Name { get; set; }
public string Phone { get; set; }
public string Email { get; set; }
public Contact Contact1 { get; set; }
}
public class Contact
{
public string Name { get; set; }
}
Code Behind:
Persons = new List<Person>( );
for ( int i = 0; i < 15; i++ )
{
Persons.Add( new Person( )
{
Name = String.Format( "Name {0}" , i ) ,
Phone = String.Format( "Phone 0000000-00{0}" , i ) ,
Email = String.Format( "Emailaddress{0}#test.test" , i ) ,
Contact1 = new Contact { Name = String.Format("Contact name = {0}", i) }
} );
}
list.DataContext = Persons;
Xaml proposal 1:
<ListBox x:Name="list" ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Label Content="{Binding Path=Name}"/>
<Label Content="{Binding Path=Phone}"/>
<Label Content="{Binding Path=Email}"/>
<TextBox Height="20" DataContext="{Binding Path=Contact1}" Text="{Binding Path=Name}" Width="110"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
Xaml proposal 2:
<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Visible">
<ItemsControl x:Name="list" ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ListBox>
<Label Content="{Binding Path=Name}"/>
<Label Content="{Binding Path=Phone}"/>
<Label Content="{Binding Path=Email}"/>
<TextBox Height="20" DataContext="{Binding Path=Contact1}" Text="{Binding Path=Name}" Width="110"/>
</ListBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>