Question

I’m developing a RAM simulation in WPF. When a create the memory, I set the size (1024 k) and I can create partitions setting the size and position.

Here are the classes:

public class Memory
{
    public ObservableCollection<Partition> Partitions { get; set; }
    public ulong Size { get; set; }

    public Memory(ulong size)
    {
        this.Partitions = new ObservableCollection<Partition>();
        this.Size = size;
    }
}

public class Partition
{
    public int Id { get; set; }
    public ulong Size { get; set; }
    public ulong Position { get; set; }
}

public class MemoryService
{
    public Memory GetModel()
    {
        var model = new Memory2(1024);
        model.Partitions.Add(new Partition() { Id = 1, Size = 512, Position = 0 });
        model.Partitions.Add(new Partition() { Id = 2, Size = 256, Position = 512 });
        model.Partitions.Add(new Partition() { Id = 3, Size = 256, Position = 768 });

        return model;
    }
}

My problem is how can I show this model into an UI? I’m planning to create something like this:

When I add an new Partition, it should show at the left a Position, and the width of each rectangle of the partition must be proportional of the sizes (IE the memory size is 1024 and the partition 1 has 512, so this partition is the half of the memory size in the image).

At this moment, I haven’t created any UI, but I guess I will need to create a new control, where I draw in a canvas. I’m really not sure about this, can I take a little help about how can I start? I really have no idea creating new controls.

Thanks a lot!

Answer 1

WPF (specifically XAML) is made for this kind of stuff. An ItemsControl with a customized ItemTemplate can do this so elegantly, there’s absolutely no reason to create a custom control and draw it in code. To show you how simple it is, I’ve mocked up a simple prototype using mostly XAML.

First, some preliminary changes to your memory model. To make the height calculation simpler, I’ve added a RelativeSize property to the Partition class. This is exactly what it sounds like, a double value that is the result of Partition.Size / Memory.Size. That’s the only model change I made.

Now, the good stuff:

<Window x:Class="DrawMemory.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:DrawMemory"
    Width="200"
    Height="600"
    Title="Draw Memory">
<Window.Resources>
    <local:MultiplyConverter x:Key="MultiplyConverter"/>
</Window.Resources>

<Grid x:Name="Grid"
      Margin="5">
    <ItemsControl ItemsSource="{Binding Partitions}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition MaxWidth="80"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>

                    <TextBlock Text="{Binding Position, StringFormat={}{0}k}"
                               Margin="5"/>
                    <Grid Grid.Column="1">
                        <Border BorderThickness="5"
                                BorderBrush="Black">
                            <Border.Height>
                                <MultiBinding Converter="{StaticResource MultiplyConverter}">
                                    <Binding ElementName="Grid" Path="ActualHeight"/>
                                    <Binding Path="RelativeSize"/>
                                </MultiBinding>
                            </Border.Height>
                        </Border>
                        <TextBlock Text="{Binding Id}"
                                   VerticalAlignment="Center"
                                   HorizontalAlignment="Center"/>
                    </Grid>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

I’ve created a simple window with a single ItemsControl. The items it uses are the partitions, obviously. For each partition, I create a Grid with two columns. In the first column, I write some text for the position in memory (I used StringFormat to append the “k”). In the second column, I have another Grid that is composed of a Border and the text from Id.

The only logic here is in the height binding. What I’m basically saying here is, “bind the height of this border to the height of the parent grid multiplied by the partition’s relative size.” I created some code-behind for the multiply converter, but it’s dead-simple (and not production quality):

public class MultiplyConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        return (double)values[0] * (double)values[1];
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        return null;
    }
}

Because of this binding, as the Window resizes, the border height will be kept in sync. In other words, this ItemsControl will always fit the available space. Here’s what it ends up looking like:

Obviously, you have a lot of polishing to do. But this should give you a good idea of what XAML is capable of.