绑定除列表视图/列表框以外的其他控件中的项列表

本文关键字：列表 其他 控件 视图 绑定 | 更新日期: 2023-09-27 18:31:04

我的应用程序是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));
            }
        }
    }

我想为每个圆（或椭圆）绑定属性"厚度"中设置的边距。画布中的圆圈数必须与可观察集合"厚层"中的项数相同。

我不知道如何说得足够清楚，所以如果你有一些问题，请不要犹豫。

绑定除列表视图/列表框以外的其他控件中的项列表

边距不是设置仓位的好方法。在画布中，您通常会设置"顶部"和"左侧"属性，但对于您的情况，我建议使用 RenderTransform。

若要显示基于绑定的对象列表，需要将它们托管在容器控件（如 ItemsControl）中。默认情况下，ItemsControl 使用一个面板，该面板将按顺序布置项，但您可以将其替换为画布并将省略号添加为绑定数据对象：

<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 是引用椭圆父级的附加属性，因此在 DataTemplate 中设置它们不会产生任何影响。我们可以跳过一些箍将它们设置在容器上，但设置转换更容易。

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

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

无论采用哪种方式，请创建一个具有需要绑定到的属性的类，并将该类型的可观察集合绑定到 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;
    }

使用 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>
相关文章：