Question

我是WPF的新手，正在寻找下述问题的简单解决方案。我试图让它尽可能短。

我正在尝试想象一个建模的“世界”：

地图图像，其已知原点以米为单位（例如，左上角为14,27），分辨率为cm /像素。地图每隔几秒就会增长。地图很小，因此不需要分页/平铺。
真实世界的元素和兴趣点。每个元素在地图区域内具有以米为单位的2D位置。此外，每个元素都可能会移动。

关于模型方面，我有一个WorldState类来保存地图和元素：

interface IWorldState
{
    IEnumerable<IWorldElement> Elements { get; }
    IMapData CurrentMap { get; }
}

interface IWorldElement
{
    WorldLocation { get; }
    event EventHandler LocationChanged;
}

interface IMapData
{
    string FilePath { get; }
    WorldLocation TopLeft { get; }
    Size MapSize { get; }
}

现在关于可视化，我选择了Canvas类来绘制地图和元素。应该以不同方式绘制每种类型的元素（继承自IWorldElement）。可能有多个地图画布，其中包含元素的子集。

<Canvas x:Name="mapCanvas">
    <Image x:Name="mapImage" />
</Canvas>

在代码中，我需要在地图图像文件发生变化时设置它：

void MapChanged(IWorldState worldState)
{
    mapImage.Source = worldState.CurrentMap.FilePath;
}

要绘制元素，我有一个将WorldLocation转换为（Canvas.Left，Canvas.Top）的方法：

Point WorldToScreen(WorldLocation worldLocation, IWorldState worldState)
{
    var topLeft = worldState.CurrentMap.TopLeft;
    var size = worldState.CurrentMap.Size;
    var left = ((worldLocation.X - topLeft.X) / size.X) * mapImage.ActualWidth;
    var top = ((worldLocation.Y - topLeft.Y) / size.Y) * mapImage.ActualHeight;
    return new Point(left, top);
}

现在问题是，我应该如何将世界模型和画布粘合在一起？这可以概括为：

MapChanged 和 WorldToScreen 功能的放置位置。
当元素移动时，世界位置需要转换为屏幕坐标。
每种类型的元素应以不同方式绘制，例如带有文本或填充矩形的椭圆。

使用WPF时，建议使用“胶水”层的方法是什么？

Answer 1

DataBinding是要走的路。请在此处阅读http://msdn.microsoft.com/en-us/magazine/dd419663.aspx。

一旦设置了viewmodel并设置了视图的datacontext。

我建议将你的元素放在一个observablecollection中并将它绑定到画布中的itemscontrol。

对于要定位的元素，您必须为ItemsControl创建一个自定义ItemTemplate，它使用画布，而不是默认的stackpanel作为容器。

然后，您可以继续为各种类型的元素创建datatemplate，以获得特定的外观和感觉pr元素类型。

这是一个解决方案的大致轮廓，希望这会有所帮助。

示例：

<Window x:Class="WorldCanvas.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WorldCanvas"
Title="WorldCanvas" Height="500" Width="500"
>
<Window.Resources>
    <DataTemplate DataType="{x:Type local:HouseVM}" >
        <Canvas>
            <Rectangle Canvas.Left="{Binding X}" Canvas.Top="{Binding Y}" Width="13" Height="23" Fill="Brown" />
        </Canvas>
    </DataTemplate>

    <DataTemplate DataType="{x:Type local:BallVM}">
        <Canvas>
            <Ellipse Canvas.Left="{Binding X}" Canvas.Top="{Binding Y}" Width="13" Height="13" Fill="Blue" />
        </Canvas>
    </DataTemplate>
</Window.Resources>
<Grid>
    <Canvas x:Name="TheWorld" Background="DarkGreen">
    <Button Content="MoveFirst" Click="Button_Click" />
    <ItemsControl ItemsSource="{Binding Entities}">
        <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="Canvas.Left" Value="{Binding X}" />
                <Setter Property="Canvas.Top" Value="{Binding Y}" />
            </Style>
        </ItemsControl.ItemContainerStyle>
    </ItemsControl>
</Canvas>

</Grid>

    public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();
        var worldViewModel = new WorldViewModel();
        DataContext = worldViewModel;
    }

    void Button_Click(object sender, RoutedEventArgs e)
    {
        var viewModel = DataContext as WorldViewModel;
        if(viewModel != null)
        {
            var entity = viewModel.Entities.First();
            entity.X +=10;
        }
    }
}

的ViewModels

  public class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public void NotifyPropertyChanged(string propertyName)
    {
        if(PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

public class WorldViewModel : ViewModelBase
{
    ObservableCollection<EntityVM> entities;

    public ObservableCollection<EntityVM> Entities {
        get { return entities; }
        set 
        { 
            entities = value;
            NotifyPropertyChanged("Entities"); 
        }
    }

    public WorldViewModel()
    {
        Entities = new ObservableCollection<EntityVM>();
        int y=0;
        for(int i=0; i<30; i++)
        {
            if(i %2 == 0)
            {
                Entities.Add(new BallVM(i*10, y+=20));
            }
            else
            {
                Entities.Add(new HouseVM(i*20, y+=20));
            }
        }
    }       
}   

public class EntityVM : ViewModelBase
{
    public EntityVM(double x, double y)
    {
        X = x;
        Y = y;
    }

    private double _x;
    public double X
    {
        get
        {
            return _x;
        }
        set
        {
            _x = value;
            NotifyPropertyChanged("X");
        }
    }

    private double _y;
    public double Y
    {
        get
        {
            return _y;
        }
        set
        {
            _y = value;
            NotifyPropertyChanged("Y");
        }
    }
}

public class BallVM : EntityVM
{
    public BallVM(double x, double y) : base(x, y)
    {
    }
}

public class HouseVM : EntityVM
{
    public HouseVM(double x, double y)  : base(x, y)
    {
    }
}

如何使用WPF可视化简单的2D世界（地图和元素）

1 个答案: