WinRT：每个项目具有指定的xPos和yPos的ItemsPanel

Question

我对WinRT / C＃/ XAML编程很陌生，所以如果对您来说这是一个简单的问题，请原谅。

我想在某种背景（面板，画布，网格，您命名）上安排一定数量的图像（将来可以单击）。 因此，我可以使用预定义的用户控件（如ListView等），但是在我的情况下，我有一个特殊的标准：每个Element的x和y索引应从ViewModel派生。 （背景：我尝试创建一种“评分”应用程序，在该应用程序中，学生按照在教室里坐在我面前的方式进行排列。单击学生图像上方的区域可提高成绩，单击较低的区域将减小它。）

因此，我浏览了许多不同的教程和示例，但据我所知，在所有这些ItemsControl / ItemsPanel-Examples中，Items的排列都是由父元素（即ItemsControl）完成的。 这样，我看不到如何通过数据绑定访问定位。

如果有人会这么友善，也许只是发表一个想法，

public class data{
  public BitmapImage Image{get;set;}
  public String Name{get;set;}
  public int xIndex {get;set;}
  public int yIndex {get;set;}
}

收集在ObservableCollection中，可以按上述方式显示（并在将来处理）？

先感谢您

阿德里安

Answer 1

我找到了一种工作方式，虽然它不是最好的，但是通过这种方式，您可以覆盖由父控件完成的项目排列。

你的班：

public class Data
{
    public BitmapImage Image { get; set; }
    public string Name { get; set; }
    public double xIndex { get; set; }
    public double yIndex { get; set; }
}

视图模型：

public class ViewModel


  {
        private readonly ObservableCollection<Data> images = new ObservableCollection<Data>();
        public ObservableCollection<Data> Images
        {
            get { return images; }
        }

        public ViewModel()
        {
            Images.Add(new Data
            {
                Image = new BitmapImage(new Uri("ms-appx:///../Assets/StoreLogo.scale-100.png")),
                Name = "Image1",
                xIndex = 50,
                yIndex = 50
            });

            Images.Add(new Data
            {
                Image = new BitmapImage(new Uri("ms-appx:///../Assets/SmallLogo.scale-100.png")),
                Name = "Image2",
                xIndex = 250,
                yIndex = 250
            });

            Images.Add(new Data
            {
                Image = new BitmapImage(new Uri("ms-appx:///../Assets/SplashScreen.scale-100.png")),
                Name = "Image3",
                xIndex = 500,
                yIndex = 500
            });
        }
    }

页：

<Page
    x:Class="App8.MainPage"
    DataContext="{Binding ViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App8"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="0 100 0 0">

        <ItemsControl ItemsSource="{Binding Images}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <ContentPresenter x:Name="Test" Canvas.Left="{Binding xIndex}" Canvas.Top="{Binding yIndex}">
                        <StackPanel>
                            <TextBlock Text="{Binding Name}"/>
                            <Image Height="50" Source="{Binding Image}"/>
                        </StackPanel>
                    </ContentPresenter>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <local:MyCanvas />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </Grid>
</Page>

您需要自己的ItemsPanelTemplate来覆盖该安排。

public class MyCanvas : Canvas
{
    protected override Size ArrangeOverride(Size finalSize)
    {
        var children = this.GetDescendantsOfType<ContentPresenter>();

        foreach (var item in children)
        {
            var data = item.Content as Data;
            if (data != null)
            {
                Canvas.SetLeft(item, data.xIndex);
                Canvas.SetTop(item, data.yIndex);
            }
        }

        return base.ArrangeOverride(finalSize);
    }
}

GetDescendantsOfType是WinRT XAML Toolkit的VisualTreeHelperExtensions的一部分。

public static class VisualTreeHelperExtensions
{
    /// <summary>
    /// Gets the descendants of the given type.
    /// </summary>
    /// <typeparam name="T">Type of descendants to return.</typeparam>
    /// <param name="start">The start.</param>
    /// <returns></returns>
    public static IEnumerable<T> GetDescendantsOfType<T>(this DependencyObject start) where T : DependencyObject
    {
        return start.GetDescendants().OfType<T>();
    }

    /// <summary>
    /// Gets the descendants.
    /// </summary>
    /// <param name="start">The start.</param>
    /// <returns></returns>
    public static IEnumerable<DependencyObject> GetDescendants(this DependencyObject start)
    {
        if (start == null)
        {
            yield break;
        }

        var queue = new Queue<DependencyObject>();

        var popup = start as Popup;

        if (popup != null)
        {
            if (popup.Child != null)
            {
                queue.Enqueue(popup.Child);
                yield return popup.Child;
            }
        }
        else
        {
            var count = VisualTreeHelper.GetChildrenCount(start);

            for (int i = 0; i < count; i++)
            {
                var child = VisualTreeHelper.GetChild(start, i);
                queue.Enqueue(child);
                yield return child;
            }
        }

        while (queue.Count > 0)
        {
            var parent = queue.Dequeue();

            popup = parent as Popup;

            if (popup != null)
            {
                if (popup.Child != null)
                {
                    queue.Enqueue(popup.Child);
                    yield return popup.Child;
                }
            }
            else
            {
                var count = VisualTreeHelper.GetChildrenCount(parent);

                for (int i = 0; i < count; i++)
                {
                    var child = VisualTreeHelper.GetChild(parent, i);
                    yield return child;
                    queue.Enqueue(child);
                }
            }
        }
    }
}