MahApps全景控制不显示照片

Question

我想使用MahApps PanoramaControl来显示一堆照片。但是我看到只有字符串路径出现在控件中，如果你查看我的代码，这将是正确的。 但我无法弄清楚如何让它显示图像而不是链接。

的Xaml：

    <Controls:Panorama Grid.Row="2"
                   Grid.ColumnSpan="4"
                   ItemBox="140"
                   ItemsSource="{Binding PhotoCollection, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

视图模型：

  string[] filePaths = Directory.GetFiles(@"D:\Google Drive\Images\Backgrounds");

  test = new PanoramaGroup("My Photo's", filePaths);
  PhotoCollection = new ObservableCollection<PanoramaGroup> { test };

有人知道如何让它显示图像吗？控件是加载的，因为我可以在文本上横向滚动。 他们的网站上没有太多关于如何使其正常工作的文档......

或者您是否在4.0框架中使用了其他一些Metro风格的库？

Answer 1

为了获得MahApps Panorama控件，我将在下面提供以下解决方案。对于提供这种级别的详细的现代UI体验的其他框架，我没有遇到任何但有兴趣知道你是否这样做。

希望解决方案适合您。

您需要添加一个表示您正在显示的对象的数据模板。

首先在POCO类中定义对象（如下图所示）。然后在项目的总体中确保您将它们转换为新创建的POCO对象，而不是将它们保留为字符串值。

public class Photo {
   public string Path { get; set; }
}

接下来，在您的XAML窗口定义中，您需要创建对POCO对象所在的命名空间的引用。

xmlns:model="clr-namespace:project.models;assembly=project"

最后但并非最不重要的是，您希望创建一个DataTemplate来表示该对象。这将添加到窗口资源中。

<Window.Resources>
    <DataTemplate DataType="{x:Type model:Photo}">
        <Image Source="{Binding Path}"/>
    </DataTemplate>
</Window.Resources>

这应该让渲染发生在它所属的界面中。希望这对你有用。