I've only just started on my journey into WPF land, but it's been very difficult trying to find help and info on how to do things, so I thought I'd at least show some info on the progression I'm making with it, as it may help someone out there.
I'm going to use the Mediocre Centre as an example, as I plan to rewrite the UI for it in WPF. bear in mind I've not made it too fancy, and it's not very tidy this is in my baby steps phases heh.
This is what this list should look like when were done, as you can see, nothing fancy but I wanted to also show how you can nest components and draw a few fancy things :)
ok, so where to start..
First you'll need an object to bind, my mediocre centre menu lists may be over complicated for this due to their dynamic nature, so lets create a simple version just to show you the concept.
ok, Code for the simple objects:
public class MainMenuList
{
private List<MenuEntry> MenuList = new List<MenuEntry>;
public MainMenuCollection()
{
MenuList.Clear();
MenuList.Add(new MenuEntry("Videos"));
MenuList.Add(new MenuEntry("Music"));
MenuList.Add(new MenuEntry("Exit"));
}
public List<MenuEntry> GetList()
{
return MenuList;
}
}
public class MenuEntry
{
public String Name { get; set; }
public MenuEntry(String name)
{
Name = name;
}
}
Now you need to add a WPF form, to the project, or start this by creating a WPF application which will give you a WPF form.
this is the part that had me confused for a while, where to put certain code.. so, the next bit of code(xaml) we are going to be putting in the app.xaml in the <Application.Resources> section.
Before adding anything, you'll have to add a reference in the App.Xaml to your Namespace in which the Menu is contained, which will appear with the others at the top that look similar:
xmlns:src="clr-namespace:MediocreCentre.Menus"
First we are going to add an object data provider, this will allow xaml to talk to the object:
<Application.Resources>
<ObjectDataProvider x:Key="MenuItems" ObjectType="{x:Type src:MainMenuList}" MethodName="GetList">
</ObjectDataProvider>
<Application.Resources>
So here we can see that we've give this collection a Key "MenuItems" and specified which class the list will come from "MainMenuList" and what method will return us the list "GetList".
Now you also want to put in a DataTemplate which will describe how to display the data in the list, this will also go into the <Application.Resources> section below the ObjectDataProvider
Here's a simple DataTemplate:
<DataTemplate x:Key="MenuFormatting" DataType="MenuEntry">
<StackPanel Orientation="Vertical">
<TextBlock Width="150" Height="25" Margin="15,5,0,0" FontSize="15">
<TextBlock.Text>
<Binding Path="Name" />
</TextBlock.Text>
</TextBlock>
</StackPanel>
</DataTemplate>
as you can see, we specify that the datatype being displayed by this template is a "MenuEntry" and the Binding path is the property we want to read and put into the TextBlock (a label basically) this is the Binding Path="Name" which is MenuEntry.Name.
This is the DataTemplate for the "Fancier" list display, but either should work fine, but the following DataTemplate will show you how you can nest controls inside others.
<DataTemplate x:Key="MenuFormatting" DataType="MenuEntry">
<StackPanel Orientation="Vertical">
<Canvas Width="150" Height="25" HorizontalAlignment="Left" Margin="0,5,0,0">
<Rectangle RadiusX="10" RadiusY="10" Width="150" Height="25" Fill="Gray"/>
<Rectangle RadiusX="10" RadiusY="10" Width="148" Height="23" Margin="1,1,1,1">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="LightBlue" Offset="0.5" />
<GradientStop Color="DarkBlue" Offset="1.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Width="150" Height="25" Margin="15,5,0,0" FontSize="15">
<TextBlock.Text>
<Binding Path="Name" />
</TextBlock.Text>
</TextBlock>
<Rectangle RadiusX="3" RadiusY="3" Width="146" Margin="2,2,2,2" Height="12.5" Fill="White" Opacity="0.2" />
</Canvas>
</StackPanel>
</DataTemplate>
So, you can see from the above code that I've put rectangles all over the place, the RadiusY/X is how rounded you want the edges, so that's a very nice feature :)
now after tinkering with that for a while, You'll want to know how to actually display this on the form I spose :) well this is what you want to do there.
now this is the simple bit :)
ok, in the <Grid> section of your form.xaml, you want to add this:
<DockPanel DataContext="{Binding Source={StaticResource MenuItems}}" Grid.Column="0" Grid.Row="0">
<ListView x:Name="lstMenu" ItemsSource="{Binding }" ItemTemplate="{DynamicResource MenuFormatting}" IsSynchronizedWithCurrentItem="True" DockPanel.Dock="Left" />
</DockPanel>
Once you've added this, you should see the designer actually change and show your items in the list, which is very cool :)
To explain this a little..
The Binding Source is pointing to the ObjectDataProvider that we gave the Key=MenuItems
The ListView ItemSource is set to Binding so that it knows to bind to the Binding Source
The ItemTemplate which tells the Listview how to display each item of data is set to point to the DataTemplate that we called MenuFormatting.
and there you have it, a "Fancy" object bound list view.
ps, if there are bugs, sorry lol, I knocked up the code in Notepad and haven't compiled it, rather than drop in all my Mediocre Centre Code.
Good luck, and have fun :)