XAML ~ Need help with the Binding syntax for collection of objects - silverlight

I am trying to bind a List of objects to an ItemsControl. The object has only two properties: Movie (a string) and Actors (an array of string). I can get the binding to work fine for the Movie. But I can't figure out the binding for the Actors array.
<ItemsControl x:Name="MovieList">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Width="100">
<Border Margin="2">
<TextBlock Text="{Binding Movie, Mode=OneWay}" />
</Border>
<ListBox ItemsSource="{Binding Actors, Mode=OneWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<controlsToolkit:WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
Any suggestions?

<ListBox ItemsSource="{Binding Actors, Mode=OneWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
this is wrong...you have to tell it what you want to bind to in the actors collection.
{Binding Path=ActorName} for example...since you only have it one way you could use displaymemberpath instead and just go: DisplayMemberPath="ActorName"

Related

WPF Wrappanel in Listbox

I want to display several images in a vertical scrolling list, but these images are subdivided into several groups that must be distiguishable by the user. To achive this, I use a ListView which items contain a WrapPanel, which contains the single images:
<ListView Name="ListGroups" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Label Content="{Binding Groupname}" />
<ListBox ItemsSource="{Binding Images}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Source="{Binding Thumb}" />
<Label Content="{Binding Res}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
What I get is:
Current result - wrong
but what I want to achive is:
Thats what I want
That is to say I dont want any horizontal Scollbars at all, and the groups clearly must be separated. On the other hand, when sizing the window, the images within one group must wrap to fill all available space.
Just also disable the horizontal ScrollBar of the inner ListBox, and set Stretch="None" on the Image element.
<ListView ... ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<Label Content="{Binding Groupname}"/>
<ListBox ItemsSource="{Binding Images}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding Thumb}" Stretch="None"/>
<Label Content="{Binding Res}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

WPF - Binding a list of a string to a column in Data Grid

I have a datagrid with three columns.
<DataGrid IemSource={Binding SomeData}>
<DataGrid.Columns>
<DataGridTemplateColumn>
</DataGridTemplateColumn>
<DataGridTemplateColumn>
</DataGridTemplateColumn>
<DataGridTemplateColumn>
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<ItemsControl ItemSource="{Binding SomeList}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="SomeTopic"/>
<ComboBox ItemSource="{Binding }"/>
</StackPanel>
</ItemsControl>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
SomeData is a object collection of ClassA. Class A contains two string fields and I have binded them to the first 2 columns.
The class contains a List of string variables of which the name is SomeList. I have binded it to the 3rd column. I need to attach it to the combobox in the header of column 3. But this code does not give me what I want.
can someone help ?
Your problem seems to be that you add the StackPanel as item to the ItemsControl instead of using it in a DataTemplate.
Instead of
<ItemsControl ItemSource="{Binding SomeList}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="SomeTopic"/>
<ComboBox ItemSource="{Binding }"/>
</StackPanel>
</ItemsControl>
it should look like this:
<ItemsControl ItemSource="{Binding SomeList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="SomeTopic"/>
<ComboBox ItemSource="{Binding }"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Auto adjusting datatemplate inside the parent size

say its a listview bound to a collection
i fix the listview width to 100
the itemtemplate is some thing like below
<DataTemplate> <Border>
<TextBlock Foreground="{Binding Path=Color}"
Text="{Binding Path=Name}"
TextTrimming="CharacterEllipsis"/>
</Border> </DataTemplate>
i want to be able to
maximum allowed is 3 how do i make the text box trim to a uniformresize itself to a proper size giving space to other textboxes
i don't wanto have c# code written is it possible to achieve using only XAML ?
try this
<ListView Width="100">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Width="100" Columns="3"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Border>
<TextBlock Foreground="{Binding Path=Color}" Text="{Binding Path=Name}" TextTrimming="CharacterEllipsis"/>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You can change ItemsPanel to UniformGrid which will split available space evenly between your items. Here's an ItemsControl example
<ItemsControl ItemsSource="{Binding Path=Items}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border>
<TextBlock
Foreground="{Binding Path=Color}"
Text="{Binding Path=Name}"
TextTrimming="CharacterEllipsis"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

MVVM WPF Creating Child Elements

I have a Customer object which has a List of Orders. Now, using MVVM pattern I am displaying a list of customers which is part of the CustomerOrderViewModel and "CustomerOrderView". The customers are shown using a listbox as implemented below:
<ListBox BorderThickness="0" Grid.Column="0" Grid.Row="0" ItemsSource="{Binding Path=Customers}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<view:CustomerView />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Now I also need to display the orders but I need to display it outside the ListBox. Like this:
<StackPanel Grid.Column="1" Grid.Row="0" Margin="10">
<ItemsControl ItemsSource="{Binding Path=Orders}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
This does not work because There is no property on CustomerOrderViewModel for Orders. The Orders is a collection on the Customer object. How can I achieve it?
Here is the updated example:
<ListBox BorderThickness="0" Grid.Column="0" Grid.Row="0" ItemsSource="{Binding Path=Customers}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<view:CustomerView />
<StackPanel Margin="20">
<ItemsControl ItemsSource="{Binding Path=Orders}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<view:OrderView />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I don't want to display the orders for all the customers. I just want to display the order of the currently selected customer.
You could use a master-detail binding.
I would suggest you to add an additional List to your window and bind its DataContext to the currently selected customer in your ListBox. It will be something like that:
<ListBox BorderThickness="0" Grid.Column="0" Grid.Row="0"
ItemsSource="{Binding Path=Customers}"
x:Name="CustomerList">
<ListBox.ItemTemplate>
<DataTemplate>
<view:CustomerView />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox Grid.Column="1" Grid.Row="0" DataContext="{Binding ElementName=CustomersList, Path=SelectedItem}">
<ListBox.ItemTemplate>
<DataTemplate>
<view:Order DataContext="{Binding Path=Orders}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

DataBind string to DataTemplated checkbox

I want to create a ListBox filled with checkboxes in WPF, and I want to databind the "Content" value with a simple string value. However when I try <CheckBox Margin="5" Content="{Binding}" /> the app crashes.
This is what I have. ( I'm sure I am missing something simple )
<ListBox Grid.Row="1" IsSynchronizedWithCurrentItem="True" x:Name="drpReasons">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" >
</WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Resources>
<DataTemplate DataType="{x:Type System:String}">
<CheckBox Margin="5" Content="{Binding}" />
</DataTemplate>
</ListBox.Resources>
</ListBox>
You created an infinitely recursive DataTemplate. By setting the DataTemplate for String, and then setting the Content of CheckBox to a String, the CheckBox will use the DataTemplate itself, so you'll have CheckBoxes within CheckBoxes and so on.
You can fix it by putting a TextBlock inside the CheckBox explicitly:
<ListBox x:Name="drpReasons" Grid.Row="1" IsSynchronizedWithCurrentItem="True">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal">
</WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Resources>
<DataTemplate DataType="{x:Type sys:String}">
<CheckBox Margin="5">
<TextBlock Text="{Binding}"/>
</CheckBox>
</DataTemplate>
</ListBox.Resources>
</ListBox>

Resources