I am pretty new in the usage of the DataBinding concept in Windows Phone. I am trying to bind a Pivot page with a list of items, as well as a ListBox in each PivotItem with another list (of criterias). I have a Page with the following XAML:
<phone:Pivot Name="ItemsPivot" Title="MY APPLICATION">
<phone:Pivot.ItemTemplate>
<DataTemplate>
<StackPanel Margin="12,17,0,28">
<ListBox Name="CriteriasListBox" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" >
<TextBlock Text="{Binding Name}"/>
<tk:Rating />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
I then try to specify the ItemSource of each binded control in the C# code like this:
...
ItemsPivot.ItemsSource = ItemList;
CriteriasListBox.ItemsSource = CriteriaList; // <-- CriteriasListBox not accessible !!
...
But there is an error stating that "the name 'CriteriasListBox' does not exist in the current context"... As I mention, I am pretty new with this technology.
Can I have some advice, solution or resources on how do make this nested binding work?
Thank you !
Do like this,
<UserControl.Resources>
<DataTemplate x:Key="MyPivotItemTemplate">
<controls:PivotItem Header="first" >
<ListBox x:Name="CriteriasListBox" Margin="0,0,12,0" ItemsSource="{Binding CriteriaList}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132">
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PivotItem>
</DataTemplate>
</UserControl.Resources>
Then in your pivot
<Pivot ItemsTemplate="{StaticResource MyPivotItemTemplate}" Items="{Binding ItemList}"
One of the ways if you have different criteria list for different items is to add criteria list property to your PivotItemViewModel. Your c# code will look like this
ItemsPivot.ItemsSource = ItemList;
where every item in ItemList contains CriteriaList. Your xaml code will look like
<phone:Pivot Name="ItemsPivot" Title="MY APPLICATION">
<phone:Pivot.ItemTemplate>
<DataTemplate>
<StackPanel Margin="12,17,0,28">
<TextBlock Name="PivotTextBlock" Text="{Binding Name}"/>
<ListBox ItemsSource="{Binding Criterions}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" >
<TextBlock Name="ListTextBlock" Text="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
Binding for PivotTextBlock retrieves Name property from the PivotItemViewModel. Binding for ListTextBlock retrieves Name property from Criteria.
If criteria list the only in your application here is a good start
Here is another good way I found...
http://www.codeproject.com/Articles/47229/A-LINQ-Tutorial-WPF-Data-Binding-with-LINQ-to-SQL
Here is a code snippet:
<DataTemplate DataType="{x:Type LINQDemo:Category}">
<Border Name="border" BorderBrush="ForestGreen"
BorderThickness="1" Padding="5" Margin="5">
<StackPanel>
<TextBlock Text="{Binding Path=Name}"
FontWeight="Bold" FontSize="14"/>
<ListView ItemsSource="{Binding Path=Books}"
HorizontalContentAlignment="Stretch" BorderThickness="0" >
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock>
<Hyperlink Click="LoadIndividualBook"
CommandParameter="{Binding}"
ToolTip="Display book details">
<TextBlock Text="{Binding Path=Title}"/></Hyperlink>
...
Related
I have the following usercontrol to define my general control-layout:
<UserControl>
<DockPanel LastChildFill="False">
<ListView DockPanel.Dock="Left"
ItemsSource="{Binding FoundResults}"
SelectedItem="{Binding SelectedItem}"
ItemTemplate="{DynamicResource FoundResultsStyle}"/>
<ContentControl DockPanel.Dock="Top"
Name="WinSock"
Content="{Binding ElementName=BaseWindowUserControl, Path=SpecificView}" />
<StatusBar DockPanel.Dock="Bottom">
<StatusBarItem Content="{Binding StatusBarText, Mode=OneWay}" />
</StatusBar>
</DockPanel>
</UserControl>
Every window should have a ListView on the left side as you can see.
I need a way to define the ItemTemplate in the concrete userControl.
Person-Usercontrol:
<UserControl.Resources>
<DataTemplate x:Key="FoundResultsStyle" DataType="{x:Type Pocos:Person}">
<StackPanel>
<TextBlock Text="{Binding Lastname}"/>
<TextBlock Text="{Binding Firstname}"/>
</StackPanel>
</DataTemplate>
</UserControl.Resources>
The ListView doesn't use my Template which I have defined in my 'concrete' usercontrol. Is there a way to achieve this?
Thank you in advance!
Can you do something like this, so that the DataType, as it changes, will select the correct template?
<UserControl>
<UserControl.Resources>
<DataTemplate DataType="{x:Type Pocos:Person}">
...
</DataTemplate>
<DataTemplate DataType"{x:Type Pocos:Dog}">
...
</DataTemplate>
</UserControl.Resources>
<DockPanel LastChildFill="False">
<ListView
DockPanel.Dock="Left"
ItemsSource="{Binding FoundResults}"
SelectedItem="{Binding SelectedItem}"/>
<ContentControl
DockPanel.Dock="Top"
Name="WinSock"
Content="{Binding ElementName=BaseWindowUserControl, Path=SpecificView}" />
<StatusBar DockPanel.Dock="Bottom">
<StatusBarItem Content="{Binding StatusBarText, Mode=OneWay}" />
</StatusBar>
</DockPanel>
</UserControl>
Like this
Basically, I want a list in which I can select the entries to display more details for that entry.How can I do that ??
You should make use of ListBox,
<ListBox Grid.Row="0" ItemsSource="{Binding Settings}"
SelectionMode="Single" SelectedItem="{Binding CurrentSelectedSetting, Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding SettingName}"></TextBlock>
<TextBlock Width="5"></TextBlock>
</StackPanel>
<TextBlock Text="{Binding Description}" TextWrapping="Wrap"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I have the following XAML code:
<StackPanel Background="White" Margin="267,207,0,44" Grid.ColumnSpan="2">
<ScrollViewer Margin="30,30,0,30" Height="444">
<ItemsControl Name="ListCountries">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,10,0" Width="100">
<TextBlock Text="{Binding Key}" Foreground="Red" />
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,10,0,0">
<TextBlock TextWrapping="Wrap" Text="{Binding title}" Foreground="Black" />
<TextBlock TextWrapping="Wrap" Text="{Binding desc}" Foreground="Gray" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</StackPanel>
I set the itemSource of the itemsControl named ListCountries, with a IEnumerable> and it prints a list of titles, followed by a list of objects of the OtherClass.
My problem is that , the columns that are filled sometimes are bigger than the height of the Stackpanel that they are inserted to, i want to be able to split my inner list of into columns.
as you can see in the image, Belgium country gets splited into 2 columns
right now all my countries are single column with vertical scroll.
You should use a GridView for this. Here's some code slightly modified from a Grid app in Visual Studio
<GridView
x:Name="itemGridView"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
SelectionMode="None"
Height="600">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="200">
<TextBlock Text="{Binding Description}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
Here's a screenshot of what this looks like, with sample data
I have a ListView with an nested ItemTemplate for presenting orders.
Each order is presented within a Expander. These Expanders have a ContentTemplate for presenting all positions within each order. And these order positions are also in a Expander.
The ListView gets its data from an ObservableCollection (AvailableOrders) which contains all orders. These order object have a ObservableCollection "Items" holding all positions for this order.
But I'm not able to get the bindings work properly. How should I properly set the binding for the "inner expander" to show information about the items?
All ideas are appreciated!
<ListView ItemsSource="{Binding VMOrder.AvailableOrders}">
<ListView.ItemTemplate>
<DataTemplate>
<Expander Content="{Binding}">
<Expander.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Order " />
<TextBlock Text="{Binding Id}" />
</StackPanel>
</DataTemplate>
</Expander.HeaderTemplate>
<Expander.ContentTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding Items}">
<ItemsControl.Template>
<ControlTemplate>
<Expander>
<Expander.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Material.Name}" />
</DataTemplate>
</Expander.HeaderTemplate>
<Expander.ContentTemplate>
<DataTemplate>
<TextBlock Text="TEST" />
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I've figured it out now.
I need to use a relative source in the data templates and set the content property of each expander.
<ListView ItemsSource="{Binding VMOrder.AvailableOrders}">
<ListView.ItemTemplate>
<DataTemplate>
<Expander Content="{Binding}">
<Expander.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Order " />
<TextBlock Text="{Binding DataContext.Id, RelativeSource={RelativeSource FindAncestor, AncestorType=Expander}}" />
</StackPanel>
</DataTemplate>
</Expander.HeaderTemplate>
<Expander.ContentTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding Items}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander Content="{Binding}">
<Expander.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding DataContext.Material.Name, RelativeSource={RelativeSource FindAncestor, AncestorType=Expander}}" />
</DataTemplate>
</Expander.HeaderTemplate>
<Expander.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding DataContext.Material.Description, RelativeSource={RelativeSource FindAncestor, AncestorType=Expander}}" />
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
For the inner ItemsControl, you have defined the control template for the whole control. You have to define the ItemTemplate instead
<ItemsControl ItemsSource="{Binding Items}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander>
<Expander.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Material.Name}" />
</DataTemplate>
</Expander.HeaderTemplate>
<Expander.ContentTemplate>
<DataTemplate>
<TextBlock Text="TEST" />
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Can somebody help me out in creating a listbox with a checkbox and star rating control align horizontally? I want it for WP7 using C# and XAML.
You need to code a custom list here is an example:
You need to include ControlToolkit:
xmlns:ControlsToolkit="clr-namespace:System.Windows.Controls"
and here is code:
<ListBox x:Name="listBox" SelectionMode="Multiple"
ItemContainerStyle="StaticResource ListBoxCheckedStyle}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox Checked="{Binding YourPropertyPath}"/>
<TextBlock Text="{Binding Name}" Width="150" VerticalAlignment="Center"/>
<ControlsToolkit:Rating Height="50" Grid.Row="0" x:Name="rating" ItemCount="5">
<ControlsToolkit:Rating.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
</ItemsPanelTemplate>
</ControlsToolkit:Rating.ItemsPanel>
</ControlsToolkit:Rating>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You can download sample from here:
DownloadSample
or check details here:
Sample site
You can get more detail on these:
CustomDataTemplateSelector
WP7 Checked ListBox in different ways.
Set the ItemTemplate:
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox Checked="{Binding YourPropertyPath}"/>
<ns:StarControl/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>