c# - 如何创建一个 UI 来模拟 WPF 中的 RAM 分区？

Question

我正在 WPF 中开发 RAM 模拟。创建内存时，我设置大小 (1024 k)，我可以创建分区设置大小和位置。

这里是类:

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;
    }
}

我的问题是如何将此模型显示到 UI 中？我打算创建这样的东西:

当我添加一个新的分区时，它应该在左边显示一个位置，并且分区的每个矩形的宽度必须与大小成比例(即内存大小为 1024，分区 1 有 512，所以这个分区是图像中内存大小的一半)。

目前，我还没有创建任何 UI，但我想我需要创建一个新控件，在 Canvas 中进行绘制。我真的不确定这一点，我可以就如何开始获得一些帮助吗？我真的不知道创建新控件。

非常感谢!

Answer 1

WPF(特别是 XAML)就是为这种东西而生的。具有自定义 ItemTemplate 的 ItemsControl 可以如此优雅地执行此操作，绝对没有理由创建自定义控件并在代码中绘制它。为了向您展示它有多么简单，我模拟了一个主要使用 XAML 的简单原型(prototype)。

首先，对您的内存模型进行一些初步更改。为了简化高度计算，我在 Partition 类中添加了一个 RelativeSize 属性。这正是它听起来的样子，double 值是 Partition.Size/Memory.Size 的结果。这是我所做的唯一模型更改。

现在，好东西:

<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>

我创建了一个带有单个 ItemsControl 的简单窗口。显然，它使用的项目是分区。对于每个分区，我创建了一个包含两列的 Grid。在第一列中，我为内存中的位置写了一些文本(我使用 StringFormat 来附加“k”)。在第二列中，我有另一个 Grid，它由 Border 和来自 Id 的文本组成。

这里唯一的逻辑是高度绑定(bind)。我在这里基本上要说的是，“将此边框的高度绑定(bind)到父网格的高度乘以分区的相对大小”。我为乘法转换器创建了一些代码隐藏，但它非常简单(而且不是生产质量):

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;
    }
}

由于此绑定(bind)，随着 Window 调整大小时，边框高度将保持同步。换句话说，此 ItemsControl 将始终适合可用空间。这是它最终的样子:

显然，您还有很多工作要做。但这应该让您很好地了解 XAML 的功能。