We Keep Coding

WPF Databinding vs Programmatically generating controls

My underlying data structure consists of a hierarchy of objects that are built upon a common abstract class:
public abstract class model {
public string name {get;};
public string type {get;};
}
public class A:model {
public int val1 {get; set;};
}
public class B:model {
public int val2 {get; set;};
}
public class C:B {
public Dictionary<string, int> extra_props;
}
My goal is to create a UI that upon object selection, is able to dynamically preview but also be able to modify the object's underlying properties.
I'm an absolute noob regarding WPF, so I have no idea what its full capabilities are. For now regarding the single value properties, I have found my way to use Databinding to bind the properties to the UI elements. It works like a charm for showing and also modifying the values.
<GroupBox x:Name="InfoBox" Header="Object Information">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="41*"/>
<ColumnDefinition Width="200*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="50*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" Grid.ColumnSpan="2" >
<TextBlock>Name:</TextBlock>
<TextBlock Text="{Binding name}" HorizontalAlignment="Right"></TextBlock>
</DockPanel>
<DockPanel Grid.Row="1" Grid.ColumnSpan="2" >
<TextBlock>Type:</TextBlock>
<TextBlock Text="{Binding type}" HorizontalAlignment="Right"></TextBlock>
</DockPanel>
<DockPanel Grid.Row="2" Grid.ColumnSpan="2" >
<TextBlock>Material Name:</TextBlock>
<TextBlock Text="{Binding val1}" HorizontalAlignment="Right"></TextBlock>
</DockPanel>
</Grid>
</GroupBox>
Problem 1:
When an object of type B is bound, property val1 doesn't exist and I'm getting some BindingErrors in the debug output. These cause no problem during execution at all, but I have found no way of catching them and returning a default value or something.
The only way that I have thought of for solving this issue is to add all the desired properties in the abstract class so that they all exist on all derived classes with some null values or something, but this doesn't feel right at all.
Problem 2:
For more complex classes like C, I want to dynamically generate the UI based on a set/list of properties of the class. For now I have absolutely no idea how to do it with databinding, except for adding them all one by one in the XML and working around the issues of problem 1.
The most viable solution that I thought of is to programmatically generate a Control and add it to the main window with textboxes and inputs for the class properties that I need, and again programmatically hopefully be able to bind the object to the control so that the values are read/set appropriately. Obviously this method would resolve problem 1 as well.
I'm not even sure if this solution is possible or not, but in any case I need recommendations and advice on mainly if there is a way to resolve my issues with data-binding or if I should go with with programmatically updating the UI (if possible).

Well for a noob you're doing well so far :) There's actually a very simple solution to both of these problems: DataTemplates. You can read all about them on the microsoft site.
In your case you want to declare a separate template for each type you're trying to display:
<DataTemplate DataType="{x:Type local:A}">
<TextBlock Text="This object is type A">
</DataTemplate>
<DataTemplate DataType="{x:Type local:B}">
<TextBlock Text="This object is type B">
</DataTemplate>
...and so on. This is typically done in the Resources block of whatever window/user control that this code appears on, although it can also be declared in the App.xaml resources block etc.
DataTemplates are used by any WPF control that is able to bind to data in some way. Take Button, for example....the overall look of the button including the border and how it behaves to mouse-over etc is dictated by its ControlTemplate (which you can also override yourself of course). But at some point in the XAML it has to render the actual data that you've assigned to its "Content" property, and if you were to look at the ControlTemplate for Button you'd find something like this buried inside it:
<ContentPresenter />
This effectively says "ok, this is where my actual data should be rendered, but instead of declaring it specifically here I want you to refer to the object's corresponding DataTemplate instead". In this way you can create a top-level button style using a single ControlTemplate, but you can then specify multiple DataTemplates for each of the types of things that you'll render inside it.
Lots of controls use DataTemplate, including things like ListBox etc where each element in the list can be given a different graphical representation based on its type. Going back to your own specific problem, if you just want to render the data itself without any bells and whistles etc around it then just use a ContentControl:
<ContentControl Content="{Binding MyModel}" />
So MyModel should be a property of type model that's in your view model layer (or whatever else you've set the DataContext to). Assigning that property to be an instance of type A, B or C will cause the ContentControl to be populated with an instance of whatever you've declared in its DataTemplate.

Programmatically moving TextBlocks in WPF

I have been reading some tutorials on XAML but it does not help me. I have an empty application window and I need to create 30 TextBoxes in 3 rows.
Being used on the win forms, I thought I would figure it out - well, I did not. I cannot seem to find a way how to create them on certain coordinates.

You first want to place a Canvas control on your screen, then you can populate it with TextBoxes placed at whatever Canvas.Left and Canvas.Top position you want.
That said though, WPF has a much better layout/arrangement system than WinForms, and trying to use it like it's WinForms means you'll miss out on a lot of what makes WPF so great, and you'll be making things a lot harder on yourself.
The WPF way of doing the same thing would be to use an ItemsControl, and a collection of objects that each contain data that the UI needs to to know for display purposes.
First you would create a class to represent each TextBox
public class MyClass
{
public string Text { get; set; }
public int X { get; set; }
public int Y { get; set; }
}
Note: This class should implement INotifyPropertyChanged if you want to change the properties at runtime and have the UI automatically update.
Then make a list of this class, and bind it to an ItemsControl
<ItemsControl ItemsSource="{Binding ListOfMyClass}" />
Then you'd want to overwrite the ItemsPanelTemplate to be a Canvas (the best WPF panel for positioning items according to an X,Y position)
<ItemsControl ItemsSource="{Binding ListOfMyClass}">
<!-- ItemsPanelTemplate -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
Next overwrite the ItemTemplate to draw each item using a TextBlock
<!-- ItemTemplate -->
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding Text}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
And add an ItemContainerStyle that binds Canvas.Left and Canvas.Top properties to X,Y properties on your object
<!-- ItemContainerStyle -->
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Left" Value="{Binding X}" />
<Setter Property="Canvas.Top" Value="{Binding Y}" />
</Style>
</ItemsControl.ItemContainerStyle>
And this will take a List of MyClass objects, and render them to the screen inside a Canvas, with each item positioned at the specified X,Y coordinates.
With all that being said, are you sure this is what you want? WPF has much better layout panels than WinForms, and you don't have to position every element according to an X,Y coordinate if you don't want to.
For a quick visual introduction of WPF's Layouts, I'd recommend this link : WPF Layouts - A Visual Quick Start
Also since it sounds like you're new to WPF and coming from a WinForms background, you may find this answer to a related question useful : Transitioning from Windows Forms to WPF

WPF layout involves choosing a layout container and placing your controls in it. There are several different containers:
The Grid container is a powerful tool for laying out your form in rows and columns. You have complete control over the size of each cell, and you can have rows or columns "span" each other.
The DockPanel container allows you to "dock" controls to the edges of your window or the center. You'd use it to layout a window with smart icon bars, ribbons, status windows, and toolboxes, like Visual Studio itself.
The StackPanel container can be used to stack controls either on top of each other or next to each other
The UniformGrid container is a less powerful version of the container that keeps all cells the same size.
The Canvas container allows you to specify the X & Y coordinates of your controls.
There are one or two others but these are the ones I've used.
The bad thing about laying out a form using X & Y coordinates is that the form does not handle resizing well. This can be exacerbated when you support globalization, as the labels and such for a string may be a lot longer in a foreign language. The best example off the top of my head is Spanish. A lot of English phrases, when translated to Spanish, are a lot longer.
The Grid container gives you the most control over layout. Columns can automatically size themselves to the longest string in the column, while the rest of the columns adjust themselves as necessary, again automatically. You don't have to write one line of code to get that effect; it's all there in the Grid control out of the box.
If you insist on laying out your form the Winforms way, use a Canvas. But you're not going to get the benefit of using the more advanced layout facilities in the other containers, especially the Grid control. I use that almost exclusively in my forms.
EDIT
Using layout controls other than Canvas means that you think about layout differently in WPF than in WinForms. You work at a higher conceptual level and leave the details about figuring out where on the screen a particular control will be displayed to WPF. You also don't have things like the WinForms Anchor property in WPF, which always seemed kind of a hack to me.

The WPF was designed to offer a power and rich framework for designer which make it a different from the classic winforms. You can achieve what want by adding your TextBox control to a canvas and changing the attached property following is a full example illustrating this:
MainWindow
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Canvas Name="mainCanvas" Margin="31,-10,-31,10">
<TextBox Name="myTextBox" Canvas.Left="131" Canvas.Top="109" Height="84" Width="135"></TextBox>
<Button Content="Button" Height="62" Canvas.Left="271" Canvas.Top="69" Width="91" Click="Button_Click"/>
</Canvas>
</Grid>
</Window>
Code Behind
using System.Windows;
using System.Windows.Controls;
namespace WpfApplication2
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
myTextBox.SetValue(Canvas.LeftProperty,(double)myTextBox.GetValue(Canvas.LeftProperty)+50.0);
}
}
}

If you want to position the TextBoxes in a grid-way, use Grid:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
...
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" />
<TextBox Grid.Row="0" Grid.Column="1" />
<TextBox Grid.Row="0" Grid.Column="2" />
...
<TextBox Grid.Row="1" Grid.Column="0" />
<TextBox Grid.Row="1" Grid.Column="1" />
<TextBox Grid.Row="1" Grid.Column="2" />
...
</Grid>

Find child elements in a WPF ListView ItemTemplate

Given a populated ListView, how do I iterate through each bound template and pluck out the contained ComboBox (or any other control contained in DataTemplate)?
<ListView x:Name="lstCommands">
<ListView.ItemTemplate>
<DataTemplate>
<Grid x:Name="gridInputs">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Content="{Binding Path=Key}"/>
<ComboBox x:Name="cbInputCmd" Grid.Column="1" ItemsSource="{Binding Source={StaticResource inputData}}" Tag="{Binding Path=Key}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>

Firstly, avoid doing so unless you really need to. If you absolutely must, you can use DataTemplate.FindName, where the templated parent is the ListViewItem generated by the ListView. To get the ListViewItem, use the ListView's ItemContainerGenerator.
Update: the reason I suggest avoiding this approach wherever possible is because it creates more tightly-coupled, brittle code. The OP didn't mention why he wanted to do what he was asking, but I suspect he could achieve his goal by more idiomatic means, such as with bindings.

is simple
just do this
<ListViewItem Name="mainiterm" Style="{ StaticResource inboxlst}" Selected="ListViewItem_Selected_1">
<Canvas Style="{StaticResource inboxcanvas}">
<Label Name="namelabel" Content="lalallala1" Style="{StaticResource inboxlabel1}" />
<Label Content="lalallala" Style="{StaticResource inboxlabel2}"/>
</Canvas>
</ListViewItem>
and vb
Dim r = mlistview.Items.GetItemAt(i)
Dim textYear As Label = Nothing
Dim s As Canvas = r.Content
Dim a As Label = s.Children.Item(1)
a.Content = "Disconnected"
a is a label, s is a cavas

you could try using the LogicalTreeHelper or VisualTreeHelper which lets you query an object for its children, but if you were binding your combo boxes to the item your list view is displaying you would not have to worry about 'getting' them at all.
Then you could just look at your item.
Any time you find yourself walking the visual or logical tree looking for elements which exist in your ui, so that you can get their values, ask yourself 'what am i missing here' 'why isnt my business (or view model) being updated with relevant data when the user interacts with the ui?'
For the example above I would build a view model that had two properties, a String (for your label) and a SelectedItem (that you could bind your combo box selected item to). its easier, more robust and it stops you having to trawl through the visual elements. one of the beautiful things about xaml/wpf is that it seperates your logic from your view. what you are suggesting will break this model. You will entangle the view with your logic and from there on it gets messy...

Multi-Column Selector

I am searching for some hybrid of ComboBox and ListView and I am wondering why there exists nothing like that, although I feel it's a quite natural wish to have it.
In more detail:
A WPF ItemsControl should have an ItemsSource of all applicable items.
These items have multiple properties, say ID:int, Name:string and Description:string.
Now my ItemControl should:
Show these three properties as nicely aligned columns in some combobox-like drop-down
Provide some way of quickly finding an item by just typing text into a single textbox (without specifying, which property shall be searched). This should either select the first match or filter the items hiding all non-matching ones.
Key is that the control is perfectly usable without a mouse, but also provides some "explorer"-mode, if the user does not remember the perfectly identifying ID but only parts of some description or name.
A configurable "Search-Function" would be nice, and it would be no problem if you would need to explicitly state all the properties to be included in a search or display function.

There is no such control so far, but you can certainly make one easily,
Create a C# Custom Control and define control template as Expander containing a DataGrid/ListView.
You can define dependency properties of your custom control as needed for ListView and do templatebinding for them. Expander's header should be bound to selected item's text or some sort of text representation of your objects.
Alternative:
Add a GRID inside Item Template and define its column definitions. And you can specify multi column values in the GRID easily.
<ComboBox>
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding CustomerName}"/>
<TextBlock Grid.Column="1" Text="{Binding CustomerEmail}"/>
<TextBlock Grid.Column="2" Text="{Binding CustomerPhone}"/>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
By applying widths correctly, and giving margins to textblock, you can create multicolumn list to be displayed easily. Dont forget to TextSearch.SearchPath property in order to be able to select item by keyboad.

WPF Design question

Lets say i am developing a chat, first you come to a login window and when your logged in i want to use the same window but chaning the control :P how would be the best way to desight this?
is there any good way to implement this what root element should i use?
Thanks a lot!!

Take a look at Josh Smith's article in MSDN magazine (http://msdn.microsoft.com/en-us/magazine/dd419663.aspx). He describes an interesting method where you have a content presenter on your main window use data templates to switch out what the window is showing.

If you want to do this all within the same window, you could use a Grid as the root element and host a login element (possibly another grid for layout) and the chat window. These elements would stack on top of one another, depending upon the order in which you declare them. To hide the chat element initially, set its Visibility to Collapsed
You could then have the login element's Visibility set to Collapsed when the user submits their login details, and have the chat element's Visibility set to Visible.
I did something similar once and it worked well for me.
Hope that helps.
EDIT I knocked this together in Kaxaml for you to play with (and because I like playing with XAML):
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Border x:Name="_loginForm" BorderBrush="#888" BorderThickness="3" CornerRadius="5"
HorizontalAlignment="Center" VerticalAlignment="Center" Padding="10" Visibility="Visible">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" Height="30">Welcome to chat</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0">User Name</TextBlock>
<TextBox Grid.Row="1" Grid.Column="1" x:Name="_userName" />
<TextBlock Grid.Row="2" Grid.Column="0">Password</TextBlock>
<TextBox Grid.Row="2" Grid.Column="1" x:Name="_password"></TextBox>
<Button Grid.Row="3" Grid.Column="1">Log In</Button>
</Grid>
</Border>
<DockPanel x:Name="_chatForm" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" LastChildFill="True" Visibility="Collapsed">
<DockPanel DockPanel.Dock="Bottom" LastChildFill="True" Height="70">
<Button DockPanel.Dock="Right" Width="70">_Send</Button>
<TextBox x:Name="_input" HorizontalAlignment="Stretch">Hello world</TextBox>
</DockPanel>
<ListBox x:Name="_messageHistory" />
</DockPanel>
</Grid>
</Page>
Initially the element _loginForm is visible. You'd attach a handler for the Log In button's Click event that would hide it, and show the _chatForm instead.
This example shows usage of several layout controls -- the Grid, DockPanel and StackPanel.

Alternatively, you can use a StackPanel for your layout. As a simple example, you can have 2 elements in your panel; a custom login control as well as the chat 'display' control. After successfully logging in, remove the custom login control from your stack so only the chat is visible.

It's WPF! Animate them in and out of view...you can do that now. There's a collaborative project on Google Code called Witty (a desktop Twitter client written in WPF), and they do something really cool that you might want to borrow from. Come to think of it, there's another WPF Twitter client (blu) that does similar animations that you might want to look at.
In Witty, the Settings dialog is a normal window, but when you switch between the tabs, a storyboard slides the part of the window you requested into view. I haven't debugged the app at this level, but I'm assuming that they have a horizontal StackPanel populated with containers that are fixed to the height and width of the dialog, and they slide them in and out with a storyboard.
Take a look at both of these apps for ideas. You may want to do something similar, but being that this is a WPF app, the sky is really the limit.
Witty
blu

There are already some answers here on, how to swap two elements at the view level. This post offers a way to more fundamentally create a modular application design with interchangeable views.
You could take a look at the Composite Application Library. It is a small library (developed by Microsoft) that among other things aid in making your application more modular. With this you can define regions of your GUI, that can have interchangeable views.
In your containing xaml import the CAL namespace and use RegionManager to define a region:
<Window ...
xmlns:cal="http://www.codeplex.com/CompositeWPF"
...>
...
<ItemsControl cal:RegionManager.RegionName="MyRegion" />
...
Then you can swap views in this region, preferably in a module:
_regionManager.Regions["MyRegion"].Add(new LoginView());
...swap...
_regionManager.Regions["MyRegion"].Add(new ChatView());
This is of course just an outline of what you can do. In order to implement this solution, you will have to look further in to CAL. It has great documentation and lots of examples to learn from.

I think a more intuitive solution is to use a Frame control as the base control of your window - and to use the NavigateService to change the source of the Frame to different Page controls (which could be defined in separate assemblies, or in your same project as different XAML files).
Your Window:
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Frame Source="LogonPage.xaml" NavigationUIVisibility="Hidden" />
</Window>
And your separate LogonPage:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Logon">
<!-- Your content of the page goes here... -->
</Page>