Question

我的应用程序是Windows Phone 8.1中的通用应用程序。

我想在屏幕上绘制一些圆圈但是根据我的ViewModel中的数据设置它们的边距，我知道这对于一个项目很热，但不是很多。

所以这就是没有任何约束力的样子：

<Grid>
    <Canvas>
        <!-- Background -->
        <Rectangle Width="400" Height="400" Fill="Gray"/>
        <!-- List of circles -->
        <Ellipse Fill="White" Width="10" Height="10" Margin="40,300,0,0"/>
        <Ellipse Fill="White" Width="10" Height="10" Margin="80,250,0,0"/>
        <Ellipse Fill="White" Width="10" Height="10" Margin="120,240,0,0"/>
        <Ellipse Fill="White" Width="10" Height="10" Margin="160,275,0,0"/>
        <Ellipse Fill="White" Width="10" Height="10" Margin="200,275,0,0"/>
        <Ellipse Fill="White" Width="10" Height="10" Margin="240,130,0,0"/>
        <Ellipse Fill="White" Width="10" Height="10" Margin="280,150,0,0"/>
        <Ellipse Fill="White" Width="10" Height="10" Margin="320,200,0,0"/>
        <Ellipse Fill="White" Width="10" Height="10" Margin="360,220,0,0"/>
    </Canvas>
</Grid>

但是我不希望有这样的多个控件，我已经在我的ViewModel中做了这个：

public ObservableCollection<Point> Points { get; set; }
    public ObservableCollection<Thickness> Thickness { get; set; }
    public MainViewModel ()
    {
        if (Windows.ApplicationModel.DesignMode.DesignModeEnabled)
        {
            Points = new ObservableCollection<Point>();
            Points.Add(new Point(40, 250));
            Points.Add(new Point(60, 300));
            Points.Add(new Point(90, 150));

            Thickness = new ObservableCollection<Thickness>();
            foreach(Point point in Points)
            {
                Thickness.Add(new Thickness(point.X, point.Y, 0, 0));
            }
        }
    }

我想为每个圆（或椭圆）绑定属性中设置的边距＆＃34;厚度＆＃34;。画布中的圆圈数必须与ObservableCollection＆＃34; Thickess＆＃34;中的项目数相同。

我不知道如何清楚地说明这一点，如果你有一些问题请不要犹豫。

Answer 1

保证金不是设定头寸的好方法。在Canvas中，您通常会设置Top和Left属性，但对于您的情况，我建议使用RenderTransform。

要显示基于绑定的对象列表，您需要将它们托管在容器控件（如ItemsControl）中。 ItemsControl默认使用一个面板，它将按顺序排列项目，但您可以用Canvas替换它，并将您的Ellipses添加为绑定数据对象：

<ItemsControl x:Name="ic">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Ellipse StrokeThickness="{Binding Thickness}" Width="10" Height="10" Stroke="{Binding Fill}">
                <Ellipse.RenderTransform>
                    <TranslateTransform X="{Binding Left}" Y="{Binding Top}"/>
                </Ellipse.RenderTransform>
            </Ellipse>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Canvas.Left和Canvas.Top是引用Ellipse父级的附加属性，因此在DataTemplate中设置它们不起作用。我们可以通过一些箍来将它们设置在容器上，但设置转换更容易。

如果您想设置边距，则可以将其绑定：

<Ellipse  Margin="{Binding Margin}" StrokeThickness="{Binding Thickness}" Width="10" Height="10" Stroke="{Binding Fill}" />

无论哪种方式，都要创建一个具有绑定所需属性的类，并将该类型的ObservableCollection绑定到ItemsControl。这是一个快速演示两种定位技术的方法：

class CircleObject
{
    public float Top { get; set; }
    public float Left { get; set; }
    public double Thickness { get; set; }

    public Thickness Margin {
        get { 
            return new Thickness(Left, Top, 0, 0);
        }
    }
    public Brush Fill { get; set; }
}
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
    ObservableCollection<CircleObject> circles;
    public MainPage()
    {
        this.InitializeComponent();

        this.NavigationCacheMode = NavigationCacheMode.Required;

        SolidColorBrush b = new SolidColorBrush(Colors.White);
        circles = new ObservableCollection<CircleObject>();
        circles.Add(new CircleObject() { Left = 40, Top = 300, Thickness = 10, Fill = b });
        circles.Add(new CircleObject() { Left = 80, Top = 250, Thickness = 20, Fill = b });
        circles.Add(new CircleObject() { Left = 120, Top = 240, Thickness = 30, Fill = b });
        circles.Add(new CircleObject() { Left = 160, Top = 275, Thickness = 20, Fill = b });
        circles.Add(new CircleObject() { Left = 200, Top = 275, Thickness = 30, Fill = b });
        circles.Add(new CircleObject() { Left = 240, Top = 130, Thickness = 40, Fill = b });
        circles.Add(new CircleObject() { Left = 280, Top = 150, Thickness = 50, Fill = b });
        circles.Add(new CircleObject() { Left = 320, Top = 200, Thickness = 40, Fill = b });
        circles.Add(new CircleObject() { Left = 360, Top = 220, Thickness = 30, Fill = b });

        ic.ItemsSource = circles;
    }

Answer 2

使用ItemsControl并将ItemsSource绑定到您的收藏夹。

<Grid>
    <Canvas>
        <!-- Background -->
        <Rectangle Width="400" Height="400" Fill="Gray"/>
        <!-- List of circles -->
        <ItemsControl ItemsSource="{Binding Path=Thickness}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Ellipse Fill="White" Width="10" Height="10" Margin="{Binding}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Canvas>
</Grid>

绑定除ListView / ListBox之外的其他控件中的项列表

2 个答案: