Develop Reference

Adding a AnchorablesSource in AvalonDock using MVVM ViewModel first

I having problems adding an AvalonDock AnchorablesSource under a ViewModel first MVVM approach using Stylet.
My avalonDock XAML is as follows:
<DockingManager
Grid.Row="1"
DocumentsSource="{Binding Scl.Documents}"
AnchorablesSource="{Binding Scl.DocumentsAnchorable}"
x:Name="dockManager"
AllowMixedOrientation="True"
AutoWindowSizeWhenOpened="True"
IsVirtualizingAnchorable="True"
IsVirtualizingDocument="True"
ActiveContent="{Binding Scl.ActiveDocument, Mode=TwoWay}"
DocumentClosed="{s:Action DocumentClosed}"
>
<DockingManager.LayoutItemContainerStyle>
<Style TargetType="{x:Type LayoutItem}">
<Setter Property="Title" Value="{Binding Model.Title}"/>
<Setter Property="Height" Value="Auto"/>
<Setter Property="IconSource" Value="{Binding Model.IconSource}" />
</Style>
</DockingManager.LayoutItemContainerStyle>
<DockingManager.LayoutItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<ContentControl s:View.Model="{Binding Content , FallbackValue=#ERROR Content.title#}"></ContentControl>
</Grid>
</DataTemplate>
</DockingManager.LayoutItemTemplate>
<LayoutRoot x:Name="root">
<LayoutPanel Orientation="Horizontal">
<LayoutAnchorablePane x:Name="LayoutAnchorablePane" DockWidth="50">
</LayoutAnchorablePane>
<LayoutDocumentPaneGroup>
<LayoutDocumentPane x:Name="LayoutDocumentPane">
<!-- This is where the new windows are typically added -->
</LayoutDocumentPane>
</LayoutDocumentPaneGroup>
<LayoutAnchorablePaneGroup DockWidth="250">
<LayoutAnchorablePane x:Name="LayoutAnchorablePane1">
</LayoutAnchorablePane>
</LayoutAnchorablePaneGroup>
</LayoutPanel>
<LayoutRoot.LeftSide>
<LayoutAnchorSide>
<LayoutAnchorGroup>
</LayoutAnchorGroup>
</LayoutAnchorSide>
</LayoutRoot.LeftSide>
</LayoutRoot>
</DockingManager>
In my ViewModel I have:
public ObservableCollection<LayoutDocument> Documents {get; set;} = new ObservableCollection<LayoutDocument>();
public ObservableCollection<LayoutAnchorable> DocumentsAnchorable { get; set; } = new ObservableCollection<LayoutAnchorable>();
When I add a new normal layout to the LayoutDocumentPane as follows it works perfectly:
public void NewLayout(Screen viewModel, string title)
{
if (IsOpen(title) == true)
{
return;
}
LayoutDocument layout = new LayoutDocument
{
Title = title,
Content = viewModel
};
Documents.Add(layout);
Documents.Move(Documents.Count - 1, 0);
ActiveDocument = layout;
}
But If try and add a new Anchorable Layout (even with a know working ViewModel like this I get an error.
public void NewLayoutAnchorable(Screen viewModel, string title)
{
if (IsOpen(title) == true)
{
return;
}
LayoutAnchorable layout = new LayoutAnchorable
{
Title = title,
Content = viewModel
};
DocumentsAnchorable.Add(layout);
//DocumentsAnchorable.Move(Documents.Count - 1, 0);
//ActiveDocument = layout;
}
The error I get is:
Exception thrown: 'Stylet.StyletViewLocationException' in Stylet.dll
Exception thrown: 'System.Windows.Markup.XamlParseException' in
PresentationFramework.dll Unable to transform ViewModel name
AvalonDock.Layout.LayoutAnchorable into a suitable View name
Does anyone know why Stylet can find the relevant View then the ViewModel is used for a LayoutDocument but not a LayoutAnchorable in AvalonDock?
Edit 1:
The issue does not appear to be with the LayoutAnchorable viewmodels, as I can add them to the ObservableCollection<LayoutDocument> and they find a view just fine.
It is only a problem if I try and add a viewmodel to the ObservableCollection<LayoutAnchorable> that I get the error, so it appear to be an issue with my AvalonDock XAML.
Edit 2:
If I remove the following line from my XAML:
<ContentControl s:View.Model="{Binding Content , FallbackValue=#ERROR Content.title#}"></ContentControl>
I can add ViewModels to both by observable collections, and the windows appear in both the LayoutPane and the AchorablePane, except the windows are missing their content.
It therefore appears that I need a LayoutItemTemplate that works for anchorable windows but I can't seem to find an example.
Edit 3:
I've made a bare bones project that demonstrates the problem here if anybody wants to have a play.
https://github.com/montyjohn/StyletAvalonDockTest.git
If Stylet and AvalonDock can be made to play nicely together it would be a great starting point so new applications.

I think there is a problem with DockingManager, because it sets different DataContexts for its items. The DataContext for ContentControl is LayoutDocument for DocumentPane but it is ContentPresenter (Parent of LayoutAnchorable) for AnchorablePane.
You can use this workaround. I added a template selector and modified ShellView.xaml file. Now it works.
ShellView.xaml
<Window x:Class="StyletAvalonDockTest.Views.ShellView"
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:ts="clr-namespace:StyletAvalonDockTest.TemplateSelectors"
xmlns:s="https://github.com/canton7/Stylet"
mc:Ignorable="d"
Title="ShellView" Height="450" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Button Width="auto" Command="{s:Action NewLayout}">Add New Window</Button>
<Button Width="auto" Command="{s:Action NewLayoutAnchorable}">Add New Anchorable Pane</Button>
</StackPanel>
<DockingManager
Grid.Row="1"
DocumentsSource="{Binding Documents}"
AnchorablesSource="{Binding DocumentsAnchorable}"
>
<!--If the theme is removed, neither the new Layout, nor the New Anchorable Layout work-->
<DockingManager.Theme>
<Vs2013LightTheme />
</DockingManager.Theme>
<!--This adds the title to the new windows-->
<DockingManager.LayoutItemContainerStyle>
<Style TargetType="{x:Type LayoutItem}">
<Setter Property="Title" Value="{Binding Model.Title}"/>
</Style>
</DockingManager.LayoutItemContainerStyle>
<DockingManager.LayoutItemTemplateSelector>
<ts:PanesTemplateSelector>
<ts:PanesTemplateSelector.DocumentPaneTemplate>
<DataTemplate>
<ContentControl s:View.Model="{Binding Content}"/>
</DataTemplate>
</ts:PanesTemplateSelector.DocumentPaneTemplate>
<ts:PanesTemplateSelector.AnchoroblePaneTemplate>
<DataTemplate>
<ContentControl s:View.Model="{Binding Content.Content}"/>
</DataTemplate>
</ts:PanesTemplateSelector.AnchoroblePaneTemplate>
</ts:PanesTemplateSelector>
</DockingManager.LayoutItemTemplateSelector>
<LayoutRoot>
<LayoutPanel>
<LayoutAnchorablePane>
<!-- This is where the new Anchorable windows are added -->
</LayoutAnchorablePane>
<LayoutDocumentPaneGroup>
<LayoutDocumentPane>
<!-- This is where the new windows are added -->
</LayoutDocumentPane>
</LayoutDocumentPaneGroup>
</LayoutPanel>
</LayoutRoot>
</DockingManager>
</Grid>
PanesTemplateSelector.cs
using AvalonDock.Layout;
using System.Windows;
using System.Windows.Controls;
namespace StyletAvalonDockTest.TemplateSelectors
{
public class PanesTemplateSelector : DataTemplateSelector
{
public DataTemplate DocumentPaneTemplate { get; set; }
public DataTemplate AnchoroblePaneTemplate { get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
if (item is LayoutDocument)
return DocumentPaneTemplate;
else
return AnchoroblePaneTemplate;
}
}
}

Draw variable number of rectangles within WPF Grid cells?

I have a WPF Grid which is 3 columns wide and 8 rows:
<Window x:Class="Container.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="700" Width="1000">
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="10*" />
</Grid.ColumnDefinitions>
</Grid>
</Window>
I am using this to draw something like this:
Every cell in the first and third columns may have a different number of rectangles. Also, the width of each rectangle may be different and change at run-time. The width will be proportionate to a number (known at run-time and continually-changing).
What is the best way to draw these rectangles?

Here is what I've come up with after about an hour of fiddling (GitHub Repo):
I'm using the MVVM pattern to make the UI as easy as possible. Right now, it just populates with some random data.
The XAML:
<Window
x:Class="BuySellOrders.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:local="clr-namespace:BuySellOrders"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Title="MainWindow"
Width="800"
Height="450"
mc:Ignorable="d">
<Window.DataContext>
<local:MainWindowVm />
</Window.DataContext>
<Grid Margin="15">
<ItemsControl ItemsSource="{Binding Path=Prices}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="1" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type local:PriceEntryVm}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border
Grid.Column="0"
Padding="5"
HorizontalAlignment="Stretch"
BorderBrush="Black"
BorderThickness="1">
<ItemsControl HorizontalAlignment="Right" ItemsSource="{Binding Path=BuyOrders}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type local:OrderVm}">
<Border
Width="{Binding Path=Qty}"
Margin="5"
Background="red"
BorderBrush="Black"
BorderThickness="1" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
<Border
Grid.Column="1"
BorderBrush="Black"
BorderThickness="1">
<TextBlock
Margin="8"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{Binding Path=Price}" />
</Border>
<Border
Grid.Column="2"
Padding="5"
BorderBrush="Black"
BorderThickness="1">
<ItemsControl ItemsSource="{Binding Path=SellOrders}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type local:OrderVm}">
<Border
Width="{Binding Path=Qty}"
Margin="5"
Background="red"
BorderBrush="Black"
BorderThickness="1" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</Window>
The view models:
class MainWindowVm : ViewModel
{
public MainWindowVm()
{
var rnd = new Random();
Prices = new ObservableCollection<PriceEntryVm>();
for (int i = 0; i < 8; i++)
{
var entry = new PriceEntryVm();
Prices.Add(entry);
entry.BuyOrders.CollectionChanged += OnOrderChanged;
entry.SellOrders.CollectionChanged += OnOrderChanged;
entry.Price = (decimal)110.91 + (decimal)i / 100;
var numBuy = rnd.Next(5);
for (int orderIndex = 0; orderIndex < numBuy; orderIndex++)
{
var order = new OrderVm();
order.Qty = rnd.Next(70) + 5;
entry.BuyOrders.Add(order);
}
var numSell = rnd.Next(5);
for (int orderIOndex = 0; orderIOndex < numSell; orderIOndex++)
{
var order = new OrderVm();
order.Qty = rnd.Next(70) + 5;
entry.SellOrders.Add(order);
}
}
}
private void OnOrderChanged(object sender, NotifyCollectionChangedEventArgs e)
{
if (e.Action == NotifyCollectionChangedAction.Add)
{
foreach (var item in e.NewItems)
{
var order = item as OrderVm;
if (order.Qty > LargestOrder)
{
LargestOrder = order.Qty;
}
}
}
}
private int _largestOrder;
public int LargestOrder
{
get { return _largestOrder; }
private set { SetValue(ref _largestOrder, value); }
}
public ObservableCollection<PriceEntryVm> Prices { get; }
}
public class PriceEntryVm: ViewModel
{
public PriceEntryVm()
{
BuyOrders = new OrderList(this);
SellOrders = new OrderList(this);
}
private Decimal _price;
public Decimal Price
{
get {return _price;}
set {SetValue(ref _price, value);}
}
public OrderList BuyOrders { get; }
public OrderList SellOrders { get; }
}
public class OrderList : ObservableCollection<OrderVm>
{
public OrderList(PriceEntryVm priceEntry)
{
PriceEntry = priceEntry;
}
public PriceEntryVm PriceEntry { get; }
}
public class OrderVm : ViewModel
{
private int _qty;
public int Qty
{
get { return _qty; }
set { SetValue(ref _qty, value); }
}
}
I had to make some assumptions about the naming of things, but hopefully you should get the basic idea of what's going on.
It's structured as a list of PriceEntry, each of which contains a Price, and a BuyOrders and SellOrders properties.
BuyOrders and SellOrders are just lists of orders that have a Quantity property.
The XAML binds the list of price entries to a template that contains a 3 column grid. The first and 3rd columns of that grid bound to another set of item controls for each list of orders. The template for each order is just a border with a Width bound to the Quantity of the order.
All the binds means that just updating a property, or adding an order to either the buy or sell list of a price entry will automatically propagate to the UI. Adding or removing a PriceEntry will also automatically adjust the UI.
I haven't implemented your automatic scaling yet, but the basic idea would be to use a ValueConverter on the Quantity binding, to make it automatically adjust to the largest order.
As an extra note, it uses this nuget package to provide some of the MVVM boiler-plate code, but you should be able to use anything you want, as long as it gives you INotifyPropertyChanged support.
Here is a bonus screen capture showing the dynamic nature of MVVM updating the UI based on a timer.
This only needed a few lines of code to randomly pick a row, then randomly pick an order on the row, then add or subtract a small random amount from the quantity.
_updateTimer = new DispatcherTimer();
_updateTimer.Tick += OnUpdate;
_updateTimer.Interval = TimeSpan.FromSeconds(0.01);
_updateTimer.Start();
private void OnUpdate(object sender, EventArgs e)
{
var entryIndex = _rnd.Next(Prices.Count);
var entry = Prices[entryIndex];
OrderList list;
list = _rnd.Next(2) == 1 ?
entry.BuyOrders :
entry.SellOrders;
if (list.Any())
{
var order = list[_rnd.Next(list.Count)];
order.Qty += _rnd.Next(0, 8) - 4;
}
}

Right then, here goes....
This is exactly the kind of thing you want to use data-binding for. You can try and do things manually if you like, but your code will quickly become very messy if you do. WPF lets you do things the old-school way (i.e. similar to WinForms et al) but that was really to facilitate porting of legacy code. I won't go into too much detail about MVVM (plenty of info on the net about it), but you can get started by using NuGet to add MVVMLightLibs or some other MVVM framework to your project and then you assign your main window a view model by doing something like this:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new MainViewModel();
}
}
So now it's time for the view model itself, which is a model of the data structures that you want your view to display:
public class MainViewModel : ViewModelBase
{
public ObservableCollection<PriceLevel> PriceLevels { get; } = new ObservableCollection<PriceLevel>
{
new PriceLevel(110.98, new int[]{ }, new int[]{ }),
new PriceLevel(110.97, new int[]{ }, new int[]{ }),
new PriceLevel(110.96, new int[]{ }, new int[]{ }),
new PriceLevel(110.95, new int[]{ }, new int[]{ 5 }),
new PriceLevel(110.94, new int[]{ }, new int[]{ 3, 8 }),
new PriceLevel(110.93, new int[]{ 8, 3, 5, }, new int[]{ }),
new PriceLevel(110.92, new int[]{ 3 }, new int[]{ }),
new PriceLevel(110.91, new int[]{ }, new int[]{ }),
};
}
public class PriceLevel
{
public double Price { get; }
public ObservableCollection<int> BuyOrders { get; }
public ObservableCollection<int> SellOrders { get; }
public PriceLevel(double price, IEnumerable<int> buyOrders, IEnumerable<int> sellOrders)
{
this.Price = price;
this.BuyOrders = new ObservableCollection<int>(buyOrders);
this.SellOrders = new ObservableCollection<int>(sellOrders);
}
}
If you don't already know, ObservableCollection is very similar to list but it propegrates change notification, so when you make your view display the data in it your GUI will update automatically whenever the list changes. This MainViewModel class contains an ObservableCollection of type PriceLevel, and each PriceLevel contains the price and the lists of buy and sell orders. This means you'll be able to add and remove price points, and also add and remove the orders in the price points, and your front-end will reflect those changes.
So on to the front end itself:
<Window.Resources>
<!-- Style to display order list as horizontal list of red rectangles -->
<Style x:Key="OrderListStyle" TargetType="{x:Type ItemsControl}">
<!-- Set ItemsPanel to a horizontal StackPanel -->
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<!-- Display each item in the order list as a red rectangle and scale x by 8*size -->
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1" Margin="5" >
<Rectangle Width="{Binding}" Height="20" Fill="Red">
<Rectangle.LayoutTransform>
<ScaleTransform ScaleX="8" ScaleY="1" />
</Rectangle.LayoutTransform>
</Rectangle>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Style to make Price cells vertically aligned -->
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- This style centers the column's header text -->
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>
</Window.Resources>
<!-- This datagrid displays the main list of PriceLevels -->
<DataGrid ItemsSource="{Binding PriceLevels}" AutoGenerateColumns="False" IsReadOnly="True"
CanUserAddRows="False" CanUserDeleteRows="False" CanUserReorderColumns="False" CanUserResizeColumns="False"
CanUserResizeRows="False" CanUserSortColumns="False" RowHeight="30">
<DataGrid.Columns>
<!-- The buy orders column -->
<DataGridTemplateColumn Header="Buy orders" Width="*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding BuyOrders}" Style="{StaticResource OrderListStyle}" HorizontalAlignment="Right" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!-- The price column -->
<DataGridTextColumn Header="Price" Width="Auto" Binding="{Binding Price}" />
<!-- The sell orders column -->
<DataGridTemplateColumn Header="Sell Orders" Width="*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding SellOrders}" Style="{StaticResource OrderListStyle}" HorizontalAlignment="Left" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
Looks a bit full-on, but if you break it down into sections it's actually pretty straightforward. The main different between this and what you've been trying to do is that I'm using a DataGrid. This is basically a Grid control that's had extra functionality added to make it respond dynamically to data that it's been bound to. It also has a lot of extra stuff we dont' need (editing, column resize/reordering etc) so I've turned all that off. The DataGrid binds to PriceLevels in the view model, so it will display a vertical list showing each one. I've then explicitly declared the 3 columns you're after. The middle one is easy, it's just text, so DataGridTextColumn will, do the job. The other two are horizontal arrays of rectangles, so I've used DataGridTemplateColumn which allows me to customize exactly how they look. This customization is mostly done in the OrderListStyle at the very top of the XAML which sets ItemsPanel to a horizontal StackPanel and sets ItemTemplate to a rectangle. There's also a bit of XAML in there to scale the rectangle by a constant, according to the value of the integer it's displaying in the order list.
Here's the result:
I know the XAML might seem a little full-on, but keep in mind this is now fully data-bound to that view model and it will automatically update in response to changes. This little bit of extra work at the start results in MUCH cleaner update code which is also easier to test and debug.
Hope this is what you're after, if you have any questions let me know and we can take it into chat.
UPDATE: If you want to see the dynamic update in action then add this to your main view model's constructor, it just adds and removes orders randomly:
public MainViewModel()
{
var rng = new Random();
var timer = new DispatcherTimer();
timer.Interval = TimeSpan.FromSeconds(0.1);
timer.Tick += (s, e) =>
{
var row = this.PriceLevels[rng.Next(this.PriceLevels.Count())]; // get random row
switch (rng.Next(4))
{
case 0: row.BuyOrders.Add(1 + rng.Next(5)); break;
case 1: row.SellOrders.Add(1 + rng.Next(5)); break;
case 2: if (row.BuyOrders.Count() > 0) row.BuyOrders.RemoveAt(rng.Next(row.BuyOrders.Count())); break;
case 3: if (row.SellOrders.Count() > 0) row.SellOrders.RemoveAt(rng.Next(row.SellOrders.Count())); break;
}
};
timer.Start();
}

How to rotate labels of WinRTXamlToolkit column chart?

I have the following XAML definition:
<Charting:Chart x:Name="ColumnChart"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="Auto"
Height="Auto"
Padding="50"
Title="100 random numbers">
<Charting:ColumnSeries Title="Skills"
IndependentValuePath="Name"
DependentValuePath="Pts"
IsSelectionEnabled="True">
</Charting:ColumnSeries>
</Charting:Chart>
How can I rotate the labels (let's say on -90 degrees) in order to make them more readable?

Rotating the labels is possible. It requires a few steps, and unfortunately, due to a missing feature in WinRT XAML layout, a custom class potentially.
The core idea is found here.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Charting:Chart x:Name="ColumnChart"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Padding="50"
Title="100 random numbers">
<Charting:ColumnSeries Title="Skills" x:Name="theColumnSeries"
IndependentValuePath="Name"
DependentValuePath="Pts"
IsSelectionEnabled="True">
<Charting:ColumnSeries.IndependentAxis>
<Charting:CategoryAxis Orientation="X">
<Charting:CategoryAxis.AxisLabelStyle>
<Style TargetType="Charting:AxisLabel">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Charting:AxisLabel">
<TextBlock Text="{TemplateBinding FormattedContent}">
<TextBlock.lay
<TextBlock.RenderTransform>
<RotateTransform Angle="-60" />
</TextBlock.RenderTransform>
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Charting:CategoryAxis.AxisLabelStyle>
</Charting:CategoryAxis>
</Charting:ColumnSeries.IndependentAxis>
</Charting:ColumnSeries>
</Charting:Chart>
</Grid>
The C# code I used:
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
this.Loaded += MainPage_Loaded;
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
var rnd = new Random(444);
ObservableCollection<Demo> values = new ObservableCollection<Demo>();
for (int i = 0; i < 15; i++)
{
values.Add(new Demo() { Name = (rnd.NextDouble() * 100).ToString(), Pts = i });
}
((ColumnSeries)ColumnChart.Series[0]).ItemsSource = values;
}
}
class Demo
{
public string Name { get; set; }
public double Pts { get; set; }
}
But, unfortunately, it's not exactly what you'll want. The problem is that there isn't a LayoutTransform like exists in WPF. If you run the code as is shown above, the labels are rotated, but they will overlap other content.
The author of the blog has written a LayoutTransformer class that may help solve the problem, although it was designed for Silverlight (so it may be portable and work with WinRT XAML).

How do I bind a simple array?

I'm making a scrabble-like game in WPF C#. As of current I've got the AI Algorithm working with operates on a "Model Game Board", a variable string[15,15]. However over the past few days I'm stuck at producing a GUI to display this Array as a GameBoard.
As of current I've got the following XAML Code:
My "MainWindow" which contains:
A button:
<Button Click="Next_TurnClicked" Name="btnNext_Turn">Next Turn</Button>
A UserControl: Which is the Game Board(GameBoard is also another UserControl) and the Player's Rack
<clr:Main_Control></clr:Main_Control>
Then Inside my UserControl I have:
<DockPanel Style ="{StaticResource GradientPanel}">
<Border Style ="{StaticResource ControlBorder}" DockPanel.Dock="Bottom">
<ItemsControl VerticalAlignment="Center" HorizontalAlignment="Center">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Height ="Auto" Name="ListBox" Orientation="Horizontal" HorizontalAlignment="Center">
</StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<clr:Rack_Cell_Sender x:Name="Player_Tile_1" ></clr:Rack_Cell_Sender>
<clr:Rack_Cell_Sender x:Name="Player_Tile_2" ></clr:Rack_Cell_Sender>
<clr:Rack_Cell_Sender x:Name="Player_Tile_3" ></clr:Rack_Cell_Sender>
<clr:Rack_Cell_Sender x:Name="Player_Tile_4" ></clr:Rack_Cell_Sender>
<clr:Rack_Cell_Sender x:Name="Player_Tile_5" ></clr:Rack_Cell_Sender>
</ItemsControl>
</Border>
<Viewbox Stretch="Uniform">
<Border Margin="5" Padding="10" Background="#77FFFFFF" BorderBrush="DimGray" BorderThickness="3">
<Border BorderThickness="0.5" BorderBrush="Black">
<clr:GameBoard>
</clr:GameBoard>
</Border>
</Border>
</Viewbox>
</DockPanel>
clr:GameBoard is a ItemsControl with its ItemsPanelTemplate as a UniformGrid
<Style TargetType="ItemsControl">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<UniformGrid IsItemsHost="True" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Rows="15" Columns="15" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Words:Cell>
</Words:Cell>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<ItemsControl Name="BoardControl" ItemsSource="{DynamicResource CellCollectionData}">
</ItemsControl>
So my question is:
How do I get my array[,] to the ItemsControl? I have no ideas how to DataBind, I've read a couple of tutorials but I'm only starting to get what a DataContext is.
How will I refresh the Board after each turn? I don't want the board updating before btnNext_Turn is clicked.
How do I Update the ModelBoard after user inputs new word into UI and btn_Next_Turn is clicked?
I'm a beginner in coding and this is my first real project in C# and WPF. My teacher knows neither WPF or C# so you guys on the StackoverFlow community has been a great help over the past few weeks, especially helping me out on SQL.
Please, any help will be much appreciated!
UPDATE:
Thanks Erno for the quick response! Yea, I got an error for EventHandler so I swapped it out for PropertyChangedEventHandler and that stopped the errors.
public partial class GameBoard : UserControl
{
TileCollection RefreshTiles = new TileCollection();
public GameBoard()
{
InitializeComponent();
}
public void getBoard()
{
string[,] ArrayToAdd = InnerModel.ModelBoard;
for (int i = 0; i < 15; i++)
{
for (int j = 0; j < 15; j++)
{
Tile AddTile = new Tile();
AddTile.Charater = ArrayToAdd[i, j];
AddTile.X = i;
AddTile.Y = j;
RefreshTiles.Add(AddTile);
}
}
}
}
So when I run debug I can see the RefreshTiles Collection being filled. However how do I bind the Collection to the ItemsControl?
Do I set the DataContext of the UserControl to RefreshTiles?
this.DataContext = RefreshTiles
then in XAML
<ItemsControl Name ="BoardControl" ItemsSource="{Binding}">
Update:
So apparently if I set the bind up in the MainWindow it works perfectly however this does not work when i try binding from a Usercontrol? I set a breakpoint in "RefreshArray" and I can see it being populated, however the UserControl does not update?
public partial class UserControl1 : UserControl
{
public char GetIteration
{
get { return MainWindow.Iteration; }
set { MainWindow.Iteration = value; }
}
CellCollection NewCells = new CellCollection();
public UserControl1()
{
InitializeComponent();
this.DataContext = NewCells;
PopulateCells();
}
private void PopulateCells()
{
for (int i = 0; i < 15; i++)
{
for (int j = 0; j < 15; j++)
{
Cell NewCell = new Cell();
NewCell.Character = "A";
NewCell.Pos_x = i;
NewCell.Pos_y = j;
NewCells.Add(NewCell);
}
}
}
public void RefreshArray()
{
NewCells.Clear();
for (int i = 0; i < 15; i++)
{
for (int j = 0; j < 15; j++)
{
Cell ReCell = new Cell();
ReCell.Character = GetIteration.ToString();
ReCell.Pos_x = i;
ReCell.Pos_y = j;
NewCells.Add(ReCell);
}
}
this.DataContext = NewCells;
}
}
public partial class MainWindow : Window
{
UserControl1 Control = new UserControl1();
public static char Iteration = new char();
public MainWindow()
{
InitializeComponent();
}
private void Next_Click(object sender, RoutedEventArgs e)
{
Iteration = 'B';
Control.RefreshArray();
}
}
This doesn't work while the one below does work
public partial class MainWindow : Window
{
char Iteration = new char();
CellCollection NewCells = new CellCollection();
public MainWindow()
{
InitializeComponent();
PopulateCells();
this.DataContext = NewCells;
Iteration++;
}
private void PopulateCells()
{
for (int i = 0; i < 15; i++)
{
for (int j = 0; j < 15; j++)
{
Cell NewCell = new Cell();
NewCell.Character = "A";
NewCell.Pos_x = i;
NewCell.Pos_y = j;
NewCells.Add(NewCell);
}
}
}
private void RefreshArray()
{
NewCells.Clear();
for (int i = 0; i < 15; i++)
{
for (int j = 0; j < 15; j++)
{
Cell ReCell = new Cell();
ReCell.Character = Iteration;
ReCell.Pos_x = i;
ReCell.Pos_y = j;
NewCells.Add(ReCell);
}
}
}
private void Next_Click(object sender, RoutedEventArgs e)
{
RefreshArray();
}
}

There is no short answer to this question, so I'll give an outline feel free to ask more questions to get more details where needed:
To use databinding make sure the items in the collection implement INotifyPropertyChanged. Currently you are using an array of strings. String do not implement INotifyPropertyChanged.
Also make sure the collection implements INotifyCollectionChanged. Currently you are using an two dimensional array. An array does not implement this interface.
A solution would be to create a class named Tile that implements INotifyPropertyChanged and stores the character as a string and additionally stores its position on the board in an X and Y property:
public class Tile : INotifyPropertyChanged
{
private string character;
public string Character
{
get
{
return character;
}
set
{
if(character != value)
{
character = value;
OnPropertyChanged("Character");
}
}
}
private int x; // repeat for y and Y
public int X
{
get
{
return x;
}
set
{
if(x != value)
{
x = value;
OnPropertyChanged("X");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
var p = PropertyChanged;
if(p != null)
{
p(this, new PropertyChangedEventArgs(propertyName));
}
}
}
Create a class Tiles like this:
public class Tiles : ObservableCollection<Tile>
{
}
and replace the two dimensional array with this collection.
One way of binding an items control to the collection requires you to set the DataContext of the items control to an instance of the collection and specifying the property ItemsSource="{Binding}"
Use the Character, X and Y properties in the itemtemplate to display the text and position the tile.
This way the bindings will automagically update the view when you manipulate the Tiles collection when adding or removing tiles and the board will also be updated when a tile changes (either position or content)

Emo's approach is a good one; I'd suggest a slightly different tack.
First, set your existing program aside. You'll come back to it later.
Next, implement a prototype WPF project. In this project, create a class that exposes Letter, Row, and Column properties, and another class that exposes a collection of these objects. Write a method that fills this collection with test data.
In your main window, implement an ItemsControl to present this collection. This control needs four things:
Its ItemsPanel must contain a template for the panel it's going to use to arrange the items it contains. In this case, you'll be using a Grid with rows and columns of a predefined size.
Its ItemContainerStyle must contain setters that tell the ContentPresenter objects that the template generates which row and column of the grid they belong in.
Its ItemTemplate must contain a template that tells it what controls it should put in the ContentPresenters.
Its ItemsSource must be bound to the collection of objects.
A minimal version looks like this:
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition Height="10"/>
<RowDefinition Height="10"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Grid.Row" Value="{Binding Row}"/>
<Setter Property="Grid.Column" Value="{Binding Column}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate TargetType="{x:Type MyClass}">
<TextBlock Text="{Binding Letter}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Set the DataContext of the main window to a populated instance of your collection, and you should see it lay the letters out in a 4x4 grid.
How this works: By setting ItemsSource to {Binding}, you're telling the ItemsControl to get its items from the DataContext. (Controls inherit their DataContext from their parent, so setting it on the window makes it available to the ItemsControl).
When WPF renders an ItemsControl, it creates a panel using the ItemsPanelTemplate and populates it with items. To do this, it goes through the items in the ItemsSource and, for each, generates a ContentPresenter control.
It populates the Content property of that control using the template found in the ItemTemplate property.
It sets properties on the ContentPresenter using the style found in the ItemContainerStyle property. In this instance, the style sets the Grid.Row and Grid.Column attached properties, which tell the Grid where to put them when it draws them on the screen.
So the actual objects that get created look like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition Height="10"/>
<RowDefinition Height="10"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Row="0" Grid.Column="0">
<ContentPresenter.Content>
<TextBlock Text="A"/>
</ContentPresenter.Content>
</ContentPresenter>
<ContentPresenter Grid.Row="1" Grid.Column="1">
<ContentPresenter.Content>
<TextBlock Text="A"/>
</ContentPresenter.Content>
</ContentPresenter>
</Grid>
(No actual XAML gets created, but the above XAML is a pretty good representation of the objects that do.)
Once you have this working, you now have a bunch of relatively straightforward problems to solve:
How do you make this look more like what you want it to look like? The answer to this is going to involve making a more elaborate ItemTemplate.
How do you sync the collection that this is presenting up with the array in your application? This depends (a lot) on how your application is designed; one approach is wrapping the collection in a class, having the class create an instance of your back-end object model, and having the back-end object model raise an event every time its collection changes, so that the class containing the collection of objects that are being presented in the UI knows to create a new front-end object and add it to its collection.
How does the user select a cell in the grid to put a tile into? The answer to this is probably going to involve creating objects for all the cells, not just the ones that contain letters, implementing a command to gets executed when the user clicks on the cell, and changing the ItemTemplate so that it can executes this command when the user clicks on it.
If the contents of a cell change, how does the UI find out about it? This is going to require implementing INotifyPropertyChanged in your UI object class, and raising PropertyChanged when Letter changes.
The most important thing about the approach I'm recommending here, if you haven't noticed, is that you can actually get the UI working almost completely independently of what you're doing in the back end. The UI and the back end are coupled together only in that first class you created, the one with the Row, Column, and Letter properties.
This, by the way, is a pretty good example of the Model/View/ViewModel pattern that you've probably heard about if you're interested in WPF. The code you've written is the model. The window is the view. And that class with the Row, Column, and Letter properties is the view model.

How to bind data to a ListBox in a ControlTemplate?

What I am trying to do is to create some sort of "rooms"(like a chat group, a sharing center or whatever you want). All the room are created the same way, but each one of them contains different informations. Each of these rooms is contained in a TabItem. I managed to create dynamically all the Tabitems, to give those a Grid and a Canvas. But at the moment I am facing a problem: I created a ControlTemplate Called RoomMenu that will show different buttons and, the most important, the people connected in this room in a ListBox(I retrieve those people from a WebService each time I change the selected Tabitem). But since my ListBox is in a ControlTemplate I have no idea how to access the ListBox ItemSource to bind a generic List to it. Down Below is the code used to create my rooms and their content.
Here is my room menu class:
public class RoomMenu : ContentControl
{
public RoomMenu()
{
DefaultStyleKey = typeof(RoomMenu);
}
public string Current_room_id;
public string FullName;
public string Rights;
}
And here is the ControlTemplate located in generic.xaml:
<Style TargetType="test:RoomMenu">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="test:RoomMenu">
<Grid x:Name="MenuGrid">
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="Black" CornerRadius="2" Background="Black">
<StackPanel Orientation="Vertical">
<Border x:Name="Room_friend_border" Background="Gray" CornerRadius="4" Margin="5">
<ListBox x:Name="current_room_friends" ItemsSource="{Binding ''}" Margin="5" Height="230">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding FullName}" Height="20"/>
<TextBlock Text="{Binding Rights}" Height="20"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>
<Border x:Name="Room_menu" Background="Gray" CornerRadius="4" Margin="5">
<StackPanel Orientation="Vertical" Margin="10">
<Button Content="Add item" Margin="0,2,0,2"/>
<Button Content="Set changes" Margin="0,2,0,2"/>
<Button Content="Invite friend" Margin="0,2,0,2"/>
<Button Content="Rename room" Margin="0,2,0,2"/>
<Button Content="Delete room" Margin="0,2,0,2"/>
</StackPanel>
</Border>
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here is my Dictionnary Class that contains the RoomMenu:
public class Rooms : TabItem
{
public string Room_guid;
public string Room_name;
public string Primary_user_guid;
public string Room_version;
public Grid Room_grid;
public Canvas Room_canvas;
public RoomMenu Room_menu;
}
And this is when I call my ControlTemplate and Add it to my TabItem's Grid:
public void Set_rooms_interface()
{
foreach (KeyValuePair<string, Rooms> kvp in rooms_list)
{
rooms_list[kvp.Key].Room_menu = new RoomMenu();
rooms_list[kvp.Key].Room_canvas = new Canvas();
rooms_list[kvp.Key].Room_grid = new Grid();
//instance grid columns
rooms_list[kvp.Key].Room_grid.ColumnDefinitions.Add(new ColumnDefinition() {Width = new GridLength(900)});
rooms_list[kvp.Key].Room_grid.ColumnDefinitions.Add(new ColumnDefinition());
//Refreshing room canvas
rooms_list[kvp.Key].Room_canvas.Height = rooms_list[kvp.Key].Room_grid.ActualHeight;
rooms_list[kvp.Key].Room_canvas.Width = rooms_list[kvp.Key].Room_grid.ActualWidth;
rooms_list[kvp.Key].Room_canvas = refresh_canvas(kvp.Key);
Grid.SetColumn(rooms_list[kvp.Key].Room_canvas, 0);
Grid.SetColumn(rooms_list[kvp.Key].Room_menu, 1);
//Add Canvas to Grid
rooms_list[kvp.Key].Room_grid.Children.Add(rooms_list[kvp.Key].Room_canvas);
rooms_list[kvp.Key].Room_grid.Children.Add(rooms_list[kvp.Key].Room_menu);
//Setting TabItem Name
rooms_list[kvp.Key].Header = rooms_list[kvp.Key].Room_name;
//Adding Grid to TabItem.Content
rooms_list[kvp.Key].Content = rooms_list[kvp.Key].Room_grid;
//Adding TabItem to TabControl
Room_tab.Items.Add(kvp.Value);
}
}
I'm sorry if the whole question is a bit long but it was the only way to explain clearly what I was trying to do. So if anyone could give me a hint or answer to do some databinding in a ControlTemplate it would greatly help me.
Thank You.

I think you started in the wrong direction when instantiating UI elements in code. The code behind should only contain one line assigning the people list to the current_room_friends DataContext.
Start with simpler examples of binding data to a ListBox like the beautiful planet example of Bea Stollnitz.