Develop Reference

Viewmodel containing UserControl - UserControl properties resetting

I have a main window viewmodel that is creating an instance of the usercontrol, and in a specific function, setting a property of the usercontrol via code i.e.
// Set Button Width Height
var potentialHeight = (SelectorUCViewModel.GridHeight /
SelectorUCViewModel.ColumnCount) - (SelectorUCViewModel.ButtonMarginToUse * 2);
var potentialWidth = (SelectorUCViewModel.GridWidth /
SelectorUCViewModel.RowCount) - (SelectorUCViewModel.ButtonMarginToUse * 2);
SelectorUCViewModel.ButtonHeightWidth = (potentialHeight < potentialWidth) ? potentialHeight : potentialWidth;
When this is called, the properties in the usercontrol change (you can see the setter is called). However, on the UI it looks like nothing has happened (margin is not there... toggle buttons are not there...)
I don't understand why....
An extract of XAML of my viewmodel has the following:
<DockPanel LastChildFill="False">
<views:SelectorUC x:Name="UC" DataContext="{Binding SelectorUCViewModel}" />
<Border DockPanel.Dock="Right" Width="160" Margin="10 0 10 0">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Center">
Then the UserControl has the following XAML
<UserControl x:Class="SelectorUC"
x:Name="UC"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Selector"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid Name="mainGrid" DockPanel.Dock="Left" MouseDown="MainGrid_MouseDown" MouseUp="MainGrid_MouseUp" MouseMove="MainGrid_MouseMove" Background="Transparent"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
MinWidth="{Binding GridWidth}" Height="{Binding GridHeight}">
<ItemsControl x:Name="objItemControl" ItemsSource="{Binding ObjCompositeCollection}">
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Row" Value="{Binding Row}"/>
<Setter Property="Grid.Column" Value="{Binding Column}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid DockPanel.Dock="Top" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Name="grid" Grid.Row="1"
Width="{Binding MinWidth, ElementName=mainGrid}"
Height="{Binding Height, ElementName=mainGrid}"
GridHelper.RowCount="{Binding RowCount}"
GridHelper.ColumnCount="{Binding ColumnCount}" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type ObjA}">
<ToggleButton Content="{Binding Id}"
Tag="{Binding Id}"
IsChecked="{Binding IsSelected}"
Height="{Binding Path=ButtonHeightWidth, ElementName=UC}"
Width="{Binding Path=ButtonHeightWidth, ElementName=UC}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="{Binding Path=ButtonMarginToUse, ElementName=UC}"
Padding="2"
PreviewMouseLeftButtonDown="Button_PreviewMouseLeftButtonDown"
PreviewMouseLeftButtonUp="Button_PreviewMouseLeftButtonUp"
MouseEnter="Button_MouseEnter"
MouseLeave="Button_MouseLeave"
Style="{StaticResource ObjButton}">
</ToggleButton>
</DataTemplate>
<DataTemplate DataType="{x:Type GridLabeller}">
<TextBlock Text="{Binding HeaderName}" Style="{StaticResource GridHeaders}"/>
</DataTemplate>
</ItemsControl.Resources>
</ItemsControl>
<Canvas>
<Rectangle x:Name="selectionBox" Visibility="Collapsed" Stroke="{StaticResource ResourceKey=SecondaryThemeColour}" StrokeThickness="2" StrokeDashArray="2,1"/>
</Canvas>
</Grid>
</UserControl>
And the properties that are resetting in the UC class
private int buttonHeightWidth;
public int ButtonHeightWidth
{
get { return buttonHeightWidth; }
set
{
buttonHeightWidth = value;
OnPropertyChanged(nameof(ButtonHeightWidth));
}
}
private int buttonMarginToUse = 2;
public int ButtonMarginToUse
{
get { return buttonMarginToUse; }
set
{
buttonMarginToUse = value;
OnPropertyChanged(nameof(ButtonMarginToUse));
}
}
The mainwindow view sets the datacontext of the mainwindowviewmodel
public MainWindow()
{
InitializeComponent();
viewModel = new MainWindowViewModel(model);
DataContext = viewModel;
SourceInitialized += Window1_SourceInitialized;
}
I genuinely can't understand what is wrong - there is no binding error, but since shifting my code from viewmodel to usercontrol (was trying to abstract as much as i can from vm) things are not working properly...

LiveCharts ColumnSeries not showing

I'm using LiveCharts in WPF to visualize the results of some analyses. The results of an analysis is added to a SeriesCollection and displayed in an CartesianChart. You can choose which type of series to use: LineSeries or ColumnSeries. The chosen type is then created and added to the SeriesCollection.
There's a custom mapper for selecting X and Y values from the ChartValues and a AxisFormatter for the X axis.
The charts are part of an Blacklight.Controls.Wpf.DragDockPanelHost. Each chart is an DragDockPanel with a style attached to it. The chart itself is a ContentControl with an TemplateSelector that returns the CartesianChart-XAML as a DataTemplate.
I've already tried to set the Fill or Stroke of the series or putting some ColumnSeries in there manually but that didn't help at all.
Filling of the SeriesCollection:
private SeriesCollection _Series;
public SeriesCollection Series
{
get { return _Series; }
set { SetProperty<SeriesCollection>(ref _Series, value); }
}
...
private void createDiagram()
{
if (this._Analysis!= null && this._Diagram != null)
{
this.Series.Clear();
foreach (KeyValuePair<state, Dictionary<DateTime, int>> kvp in this.Analysis.Execute())
{
Series series = Activator.CreateInstance(Diagram) as Series;
if (series != null)
{
series.Title = kvp.Key.name;
series.Values = new ChartValues<KeyValuePair<DateTime, int>>(kvp.Value);
this.Serien.Add(series);
}
}
}
}
Mapper and AxisFormatter:
CartesianMapper<KeyValuePair<DateTime, int>> mapper = Mappers.Xy<KeyValuePair<DateTime, int>>().X(kvp => ((DateTimeOffset)kvp.Key).ToUnixTimeSeconds()).Y(kvp => kvp.Value);
this.Series = new SeriesCollection(mapper);
this.XFormatter = value =>
{
return DateTimeOffset.FromUnixTimeSeconds((long)value).DateTime.ToString("dd.MM.yyyy HH:mm");
};
TemplateSelector:
public class DashboardElementTemplateSelector : DataTemplateSelector
{
public DataTemplate ListDashboardElementTemplate { get; set; }
public DataTemplate SingleValueDashboardElementTemplate { get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
if (item is ListDashboardElementViewModel)
return this.ListDashboardElementTemplate;
else
return this.SingleValueDashboardElementTemplate;
}
}
XAML of DragDockPanelHost:
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary>
<DataTemplate x:Key="listElement">
<views:ListDashboardElementView/>
</DataTemplate>
<DataTemplate x:Key="singleValueElement">
<views:SingleValueDashboardElementView/>
</DataTemplate>
<tempselect:DashboardElementTemplateSelector x:Key="elementTempSelector"
ListDashboardElementTemplate="{StaticResource listElement}"
SingleValueDashboardElementTemplate="{StaticResource singleValueElement}"
/>
</ResourceDictionary>
<ResourceDictionary>
<conv:BooleanToVisibilityConverter x:Key="visCon"/>
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<bl:DragDockPanelHost ItemsSource="{Binding Diagrams}" Grid.Row="1" Margin="20" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<bl:DragDockPanelHost.Style>
<Style TargetType="bl:DragDockPanelHost">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Canvas ClipToBounds="True" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
</Canvas>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="bl:DragDockPanelHost">
<ItemsPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</bl:DragDockPanelHost.Style>
<bl:DragDockPanelHost.DefaultPanelStyle>
<Style TargetType="{x:Type bl:DragDockPanel}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Margin="10">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Background="#00000000" Margin="-2" Padding="5" Grid.Row="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<WrapPanel>
<Image Width="20" x:Name="GripBarElement" Source="/Aisys.XStorage.Dashboard;component/Images/move.png" Grid.Column="0" Cursor="Hand" HorizontalAlignment="Left"/>
<TextBlock Text="{Binding Name}" Grid.Column="0" FontSize="16" FontWeight="Bold" Margin="10,0,0,0"/>
</WrapPanel>
<WrapPanel HorizontalAlignment="Right" Grid.Column="2">
<Button Command="{Binding ExecuteCommand}" CommandParameter="{Binding}" Margin="5,0,5,0">
<Button.Template>
<ControlTemplate>
<Image Source="/Aisys.XStorage.Dashboard;component/Images/Refresh.png"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="20" Command="{Binding DataContext.RemoveDiagramCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type bl:DragDockPanelHost}}}" CommandParameter="{Binding}">
<Button.Template>
<ControlTemplate>
<Image Source="/Aisys.XStorage.Dashboard;component/Images/Remove.png"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button Command="{Binding DataContext.ShowPropertiesCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type bl:DragDockPanelHost}}}" CommandParameter="{Binding}" Margin="5,0,5,0">
<Button.Template>
<ControlTemplate>
<Image Source="/Aisys.XStorage.Dashboard;component/Images/Preferences.png"/>
</ControlTemplate>
</Button.Template>
</Button>
<ToggleButton x:Name="MaximizeToggleButton" VerticalAlignment="Top" HorizontalAlignment="Right" IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay, Path=IsMaximized}" Margin="0,5,5,0" Width="25" Height="25" Cursor="Hand">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Image Source="/Aisys.XStorage.Dashboard;component/Images/Maximize.png" Margin="0,0,0,5"/>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
</WrapPanel>
</Grid>
</Border>
<Separator VerticalAlignment="Bottom" Margin="0,0,0,0"/>
<ContentControl Content="{Binding}" ContentTemplateSelector="{StaticResource elementTempSelector}" Grid.Row="1" Margin="10"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</bl:DragDockPanelHost.DefaultPanelStyle>
</bl:DragDockPanelHost>
XAML of chart:
<Grid>
<lvc:CartesianChart Series="{Binding Series}" LegendLocation="Right" Name="chart">
<lvc:CartesianChart.AxisX>
<lvc:Axis Title="Zeit" LabelFormatter="{Binding XFormatter}">
</lvc:Axis>
</lvc:CartesianChart.AxisX>
</lvc:CartesianChart>
</Grid>
If I'm choosing LineSeries, everything works fine. But when I'm using ColumnSeries nothing is shown. You can see, that the axis is redrawn and the separators move. The legend is also drawn, but there are no columns visible.
Any ideas why this is happening?

I had the same problem recently. Unfortunately, this doesn't seem to be documented anywhere but for some reason if you have too many data points for the size of the graph, then none of the columns will display. You can either try reducing the number of data points until it works (in my case 90 data points wouldn't display, but 30 would), or on ColumnSeries there is a property ColumnPadding that you can turn down to zero and see if that helps.

Resize grid after rotation Windows phone 8.1

[![enter image description here][1]][1]I have problem with panel size in ListView. I have StackPanel in GridView and after rotation i want resize this gridview to the whole page, but after rotate stackPanel had the same widht as he had in portrait mode. Here is my code.
But when I start application on Landscape mode it is all ok and grid is resized.
<Page
x:Class="KlientWP.VypisZakazek"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:KlientWP"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Loaded="Page_Loaded" SizeChanged="Page_SizeChanged">
<Page.Background>
<SolidColorBrush Color="{ThemeResource PhoneImagePlaceholderColor}"/>
</Page.Background>
<Grid x:Name="ContentRoot" Margin="0,9.5,0,0">
<ScrollViewer>
<Pivot Title="Přehled databáze" HorizontalAlignment="Stretch" Margin="0,0,0,0">
<PivotItem Header="Zakázky" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,0,20,10" >
<ListView SelectionMode="None" x:Name="ListBox1" Margin="0,0,-0.167,0.167"
HorizontalAlignment="Stretch"
ItemsSource="{Binding}" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid x:Name="grdTsk" Opacity="1" Margin="0,0,0,10" Width="1500" HorizontalAlignment="Stretch" Background="#FF302E2E" ManipulationMode="All" Tapped="grdTsk_Tapped" >
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<FlyoutBase.AttachedFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Detail zakázky" Click="Detail" />
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
<TextBlock Grid.Row="1" Text="{Binding nazev1}" Width="1500" FontSize="22" TextWrapping="Wrap" HorizontalAlignment="Stretch" Margin="5,0,0,0" Visibility="Visible" FontWeight="Light" Foreground="White"/>
<!--<StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Margin="0,0,0,0" >
<TextBlock Text="{Binding nazev}" FontSize="22" TextWrapping="Wrap" Margin="5,0,0,0" Visibility="Visible" FontWeight="Light" Foreground="White"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0">
<TextBlock x:Name="predmetTb" Text="{Binding zakazka}" FontSize="18" Margin="5,0,0,0" TextWrapping="Wrap" />
<TextBlock Text="{Binding kod_firmy}" FontSize="18" TextWrapping="Wrap" Margin="15,0,0,0" Foreground="#FFFFF413" />
</StackPanel>
</StackPanel>-->
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</PivotItem>
</Pivot>
</ScrollViewer>
</Grid>
binding:
CultureInfo culture = new CultureInfo("cs-CZ");
DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(List<dataInfo>));
MemoryStream stream = new MemoryStream(Encoding.UTF8.GetBytes(json));
var obj = (List<dataInfo>)ser.ReadObject(stream);
List<dataInfo> VypisZakazekli = new List<dataInfo>();
VypisZakazekli.Clear();
foreach (dataInfo di in obj)
{
string iZakazka = "ID: " + di.zakazka;
string sNazev = di.nazev;
string sKod = "Firma: " + di.kod_firmy;
string sStatus = "Status: " + di.status_v;
string sDruh = di.druh_zakazky;
VypisZakazekli.Add(new dataInfo(iZakazka, sNazev, sKod, sStatus, sDruh));
}
this.ListBox1.ItemsSource = VypisZakazekli;
}

Try to add this to your listview :
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>

C# WPF - TransitioningContentControl with App.content

I Work with the theme of MahApps (Metro Dark) I looked the animations of this theme.
I came to a dead end: indeed I created a system to switch between different UserControl, that is to say that I have only one window and clicking on different buttons, I have this or such UserControl. But now I am with this system switch, I have no animation (only the start of the application).
How can I make an animation for each change in UserControl (Keeping Metro theme)?
Somebody ask me : use TransitioningContentControl
But i made my switcher like this :
class Switcher
{
public static UserControl WClient;
public static UserControl WHome;
public static UserControl WDataBase;
public Switcher()
{
WClient = new Windows.Client();
WHome = new Windows.Home();
WDataBase = new Windows.DataBase();
}
public static void currentWindow(UserControl window, string color)
{
Window curApp = Application.Current.MainWindow;
curApp.Content = window;
if (window == WClient)
{
curApp.Title = "CLIENT - INFO-TOOLS - BY NAOGRAFIX";
}
else if (window == WDataBase)
{
curApp.Title = "DATABASE - INFO-TOOLS - BY NAOGRAFIX";
}
else
{
curApp.Title = "HOME - INFO-TOOLS - BY NAOGRAFIX";
}
currentColor(color);
}
}
Now, when i clic on a button (to switch userControl) i use this :
private void BtnDataBase_Click(object sender, RoutedEventArgs e)
{
var color = "Red";
if (DataBase.isConnected) { color = "Green"; }
Switcher.currentWindow(Switcher.WDataBase, color);
}
I use CONTENT, i dont know if i can use TransitioningContentControl
Help :)
Nao*

You do need to use transitioning content control as you have said. You can add that as the direct content of the window then access it by name from the mainwindow and change its content instead.
Xaml
<metro:TransitioningContentControl x:Name="tContent"/>
C#
((ContentControl)curApp.FindName("tContent")).Content = window;
You will need the xml namespace definition
xmlns:metro="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
and you can change the transition using the Transition property on TransitioningContentControl

WPF XAML below shows use of MahApps.Metro TransitioningContentControl.
Click on the Content listbox to switch content.
Select the transition effect in the Transition listbox, then change selected Content to see the effect.
<Window x:Class="WpfMahApp.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:mah="http://metro.mahapps.com/winfx/xaml/controls"
mc:Ignorable="d"
Title="MainWindow" Height="600" Width="800">
<Window.Resources>
<TextBlock x:Key="Content1" Width="400" Height="200" Text="Content 1: TextBox" Background="Aqua" />
<Canvas x:Key="Content2" Width="200" Height="400" Background="DarkOrange">
<Ellipse Fill="YellowGreen" Stroke="Black" Width="100" Height="200" />
<Label Content="Content2: Canvas" />
</Canvas>
<Border x:Key="Content3" Width="100" Height="100" Background="Yellow" BorderBrush="Blue" BorderThickness="2" CornerRadius="4">
<TextBlock Text="Content3: Border" />
</Border>
</Window.Resources>
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Vertical" >
<CheckBox Margin="4" Content="Is Transitioning" IsChecked="{Binding ElementName=TransitioningContentControl,Path=IsTransitioning , Mode=OneWay}" />
<StackPanel Orientation="Vertical" Margin="8">
<TextBlock Text="Content" FontWeight="Bold"/>
<ListBox Name="ContentSelection" HorizontalAlignment="Left">
<ListBoxItem Content="Content 1" Tag="{StaticResource Content1}" />
<ListBoxItem Content="Content 2" Tag="{StaticResource Content2}" />
<ListBoxItem Content="Content 3" Tag="{StaticResource Content3}" />
</ListBox>
</StackPanel>
<StackPanel Orientation="Vertical" Margin="8">
<TextBlock Text="Transition" FontWeight="Bold" />
<ListBox Name="Transition" HorizontalAlignment="Left">
<ListBoxItem Content="Default" Tag="{x:Static mah:TransitionType.Default}"/>
<ListBoxItem Content="Normal" Tag="{x:Static mah:TransitionType.Normal}"/>
<ListBoxItem Content="Up" Tag="{x:Static mah:TransitionType.Up}"/>
<ListBoxItem Content="Down" Tag="{x:Static mah:TransitionType.Down}"/>
<ListBoxItem Content="Left" Tag="{x:Static mah:TransitionType.Left}" />
<ListBoxItem Content="Right" Tag="{x:Static mah:TransitionType.Right}"/>
<ListBoxItem Content="LeftReplace" Tag="{x:Static mah:TransitionType.LeftReplace}"/>
<ListBoxItem Content="RightReplace" Tag="{x:Static mah:TransitionType.RightReplace}"/>
</ListBox>
</StackPanel>
</StackPanel>
<mah:TransitioningContentControl Margin="8"
Name="TransitioningContentControl"
Background="Beige" BorderBrush="Black" BorderThickness="1"
Content="{Binding ElementName=ContentSelection, Path=SelectedValue.Tag}"
Transition="{Binding ElementName=Transition, Path=SelectedValue.Tag}" />
</StackPanel>
</Window>

Why does my databound TabControl not look like my non-databound TabControl?

My non-databound TabControl looks fine:
alt text http://tanguay.info/web/external/tabControlPlain.png
<TabControl Width="225" Height="150">
<TabItem Header="One">
<TextBlock Margin="10" Text="This is the text block"/>
</TabItem>
<TabItem Header="Two"/>
<TabItem Header="Three"/>
<TabItem Header="Four"/>
</TabControl>
But my databound TabControl looks like this:
alt text http://tanguay.info/web/external/tabBound.png
<Window.Resources>
<DataTemplate x:Key="TheTabControl">
<TabItem Header="{Binding Title}">
<TextBlock Text="{Binding Description}" Margin="10"/>
</TabItem>
</DataTemplate>
</Window.Resources>
<TabControl Width="225" Height="150" ItemsSource="{Binding AreaNames}"
ItemTemplate="{StaticResource TheTabControl}">
</TabControl>
public MainViewModel()
{
AreaNames.Add(new Area { Title = "Area1", Description = "this is the description for area 1" });
AreaNames.Add(new Area { Title = "Area2", Description = "this is the description for area 2" });
AreaNames.Add(new Area { Title = "Area3", Description = "this is the description for area 3" });
}
#region ViewModelProperty: AreaNames
private ObservableCollection<Area> _areaNames = new ObservableCollection<Area>();
public ObservableCollection<Area> AreaNames
{
get
{
return _areaNames;
}
set
{
_areaNames = value;
OnPropertyChanged("AreaNames");
}
}
#endregion
What do I have to change so that my databound tabcontrol looks like my regular non-databound tabcontrol?

TabControl uses two different templates to define its structure. ItemTemplate is for the headers (the "tabs"), and ContentTemplate is for the content displayed under each tab.
This XAML looks more like your first screenshot:
<Window.Resources>
<DataTemplate x:Key="TabHeaderTemplate">
<TextBlock Text="{Binding Title}"/>
</DataTemplate>
<DataTemplate x:Key="TabItemTemplate">
<TextBlock Text="{Binding Description}" Margin="10"/>
</DataTemplate>
</Window.Resources>
<TabControl Width="225" Height="150"
ItemsSource="{Binding AreaNames}"
ContentTemplate="{StaticResource TabItemTemplate}"
ItemTemplate="{StaticResource TabHeaderTemplate}" />

What I think is happening here, is that the entire DataTemplate is set to the Header of the TabItem. Have a look at this link, it gives an example for both a Header and a ContentTemplate for the TabControl: http://psiman.wordpress.com/2006/12/07/databound-master-detail-tabcontrol/