We Keep Coding

Build UserControl to display both text and image dynamically

I am building a quiz redistributable desktop application. Questions can be text or image or both.
Someone suggested i build a text and image dynamic user control to display the questions. I have searched all round but cant find any tutorial that shows how to build such user control.
i was reffered to http://www.akadia.com/services/dotnet_user_controls.html,
http://en.csharp-online.net/Create_List_Controls,https://msdn.microsoft.com/en-us/library/aa302342.aspx
but it dosent help

As I can understand you need some control that can display a dynamic content (text/image). I can suggest you to use the content control that selects its content DataTemplate according to it's current data context.
I'will put a whole solution in several minutes.
<ContentControl Content="{Binding CurrentControlContent.Content}">
<ContentControl.Resources>
<DataTemplate DataType="{x:Type soSandBoxListView:SingleTextModel}">
<TextBlock Text="{Binding SingleModelContent}" Background="Tan"></TextBlock>
</DataTemplate>
<DataTemplate DataType="{x:Type soSandBoxListView:MultipleTextModel}">
<StackPanel>
<TextBlock Text="{Binding FirstName}" Background="Yellow"></TextBlock>
<TextBlock Text="{Binding LastName}" Background="Red"></TextBlock>
<!--use the binding to your picture presentation in model-->
<Image Source="Resources/yotveta.jpg" Stretch="None"></Image>
</StackPanel>
</DataTemplate>
</ContentControl.Resources>
</ContentControl>
Regards

Display data from two levels down

I have the following classes, which contain ObservableCollections of the next level down:
Draw
ObservableCollection<Round>();
Round
ObservableCollection<Formation>();
Formation
So a Draw is made up of Rounds, Rounds are made up of Formations.
I have a page which has a button to create a random draw, I currently have it calling another class which returns a draw:
this.defaultViewModel[DrawName] = RandomDraw.generate();
I am having no problem binding a ListView to Rounds and displaying round information, but how do I display the individual formations? This is what I am currently doing, I was not expecting to be able to just display things by binding to Formations but how do I access it?
<ListView
ItemsSource="{Binding Rounds}"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick"
ContinuumNavigationTransitionInfo.ExitElementContainer="True">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,9.5">
<TextBlock
Text="{Binding RoundNumber}"
TextWrapping="Wrap"
Pivot.SlideInAnimationGroup="1"
CommonNavigationTransitionInfo.IsStaggerElement="True"
Style="{ThemeResource ListViewItemTextBlockStyle}"
Margin="0,0,19,0"/>
<TextBlock
Text="{Binding Formations}"
TextWrapping="WrapWholeWords"
Pivot.SlideInAnimationGroup="2"
CommonNavigationTransitionInfo.IsStaggerElement="True"
Style="{ThemeResource ListViewItemContentTextBlockStyle}"
Margin="0,0,19,0"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

You should take a look at Hierarchical Data Templates, which are used by the WPF TreeView control rather than ListViews. They are a natural fit to show hierarchical data. Of course, like any WPF control, you can completely customize their appearance using styling and templates. Here are some good references:
MSDN How to: Use a TreeView to Display Hierarchical Data
Hierarchical Databinding in WPF
However, if you would like to keep using ListViews, then one way to do this is to nest another container control inside the parent ListVIew. ObservableCollections are processed automatically by specific WPF elements, such as Panels. In your example, you can replace the second TextBlock with another ListView, with an ItemTemplate similar to the first. It can also be any Collection-like Panel element, such as StackPanel.
<ListView
ItemsSource="{Binding Rounds}"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick"
ContinuumNavigationTransitionInfo.ExitElementContainer="True">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,9.5">
<TextBlock
Text="{Binding RoundNumber}"
TextWrapping="Wrap"
Pivot.SlideInAnimationGroup="1"
CommonNavigationTransitionInfo.IsStaggerElement="True"
Style="{ThemeResource ListViewItemTextBlockStyle}"
Margin="0,0,19,0"/>
<!-- CHANGED CODE HERE -->
<ListView
ItemsSource="{Binding Formations}"
...>
<ListView.ItemTemplate>...</ListView.ItemTemplate>
</ListView>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Strange artifact when updating Pivot title in Windows Phone 8

I have a XAML page with just a Pivot with binded ItemSource and the following template (changing just the header for simpilcity)
<phone:Pivot
Margin="0,108,0,0"
ItemsSource="{Binding Services}">
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:Pivot.ItemTemplate>
<DataTemplate>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
The ItemSource (Services) is an ObservableCollection of a simple data type with just a Title property implementing INotifyPropertyChanged. When I change the Title of any item, the Pivot header is rendered very strangely:
Here is a complete simplified solution to reproduce the problem: https://dl.dropboxusercontent.com/u/73642/pivotproblem.zip
Is this a Pivot bug?

Indeed a bug... I had the same problem and I end up in forcing to reload whole DataContext of the Pivot.
Since I was using MVVM I just created new instance of the items collection and raised property changed for that.

It seems that TextBlock's Width is not updated after Title changes. You can check it by defining your TextBlock like this:
<TextBlock Text="{Binding Title}" Width="400" />
Hence it's not updated, two Titles overlap each other.

How to create ListBox.Itemtemplate,datatemplate programatically in Windows Phone 7

I find that there is some item templates, data templates and binding in the .xaml file for listbox. Is there any way to create it in code behind?
Is there any way to create data templates programataically?
this is the XAML CODE,BUT I need in code behind using c# not in XAML,because
am working in dynamic list box creation with adding itemtemplatem,datatemplate
<ListBox Height="520" HorizontalAlignment="Left" Margin="0,6,0,0" Name="lstimge" VerticalAlignment="Top" Width="450" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Image}" Width="150" Stretch="Uniform" HorizontalAlignment="Center" />
<TextBlock Text="{Binding FileName}" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Kindly give the solution
Thanks,
Ashok

You can't build templates from code - this can only be done from XAML.
If you dynamically generated the template XAML in your code, you could load it as described here.
I suspect you'll find yourself opening a whole can of worms if you go down this route. As an alternative, you could predefine a set of templates, and choose the correct one dynamically at runtime, as described here

You could use XamlReader.Load to dynamically load XAML in code-behind and cast it to a DataTemplate, later assigning it to the ItemTemplate. Here is an example.

Is the DataTemplate that you want to use the same for all listboxes or is that also dynamically generated? If it is the same for all of them then you could save it as a Style in your Resources and then just create the Listbox object dynamically and apply the style.

WPF Databinding stackpanel

Im a beginner in WPF programming, coming from .NET 2.0 C#.
Im trying to make a horizontal StackPanel which should be filled with data from a table in a database. The problem is that I want it to display an image with some text from the table below and then stack those two items horizontally.
Here's some pseudo-code to display what I want to do:
<StackPanel Orientation="horizontal" ItemsSource="{Binding Path=myTable}">
<StackPanel>
<Image Source="User.png"/>
<Label HorizontalAlignment="Center" Content="{Binding Path=UserName}"></Label>
</StackPanel>
</StackPanel>
I simply cannot figure oout how to do this.

Julien's answer is correct for your written description, however, looking at your XAML, it appears you are looking for something like the following:
<DataTemplate x:Key="UserDataTemplate">
<StackPanel>
<Image Source="User.png"/>
<Label HorizontalAlignment="Center" Content="{Binding Path=UserName}" />
</StackPanel>
</DataTemplate>
<ItemsControl x:Name="UserList" ItemTemplate="{StaticResource UserDataTemplate}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
You definately need an ItemsControl (or some derivation of) to bind your source to. Then you can change the the orientation by setting it's items panel (which I believe is a VirtualizingStackPanel with Vertical orientation by default) so just set it to a VirtualizingStackPanel with Horizontal Orientation. Then you can set the ItemsTemplate for each of your items to the layout you desire (an image stacked on top of text bound from your database).

Basically, you want to use a control capable of displaying an enumeration of objects. The control capable of this is the class ItemsControl and all of its descendants (Selector, ListBox, ListView, etc).
Bind the ItemsSource property of this control to a list of objects you want, here a list of users you've fetched from the database. Set the ItemTemplate of the control to a DataTemplate that will be used to display each item in the list.
Sample code:
In a Resources section (for example Window.Resources):
<DataTemplate x:Key="UserDataTemplate">
<StackPanel Orientation="Horizontal">
<Image Source="User.png"/>
<Label HorizontalAlignment="Center" Content="{Binding Path=UserName}" />
</StackPanel>
</DataTemplate>
In your Window/Page/UserControl:
<ItemsControl x:Name="UserList" ItemTemplate="{StaticResource UserDataTemplate}" />
In your code behind:
UserList.ItemsSource = ... // here, an enumeration of your Users, fetched from your db