如何将坐标绑定到Canvas面板。 WinUI

Question

我正在开发一个Win UI程序，我遇到了绑定问题。我需要在屏幕上显示物体的读数。它们被放置在任意位置。数据以 0 到 1 的值存储在数据库中。 我正在使用由

ObservableCollection

对象组成的

Silos

。每个

Silos

对象都包含信息，包括可视化面板上的坐标。 我的问题是转换或绑定无法正常工作。所有对象都位于同一点。 这是一个示例，说明它是如何以及应该如何。

XAML

<local:ConvertPixel x:Key="ConwertToPixel"/>
...
<ItemsControl x:Name="CanvasPannel" ItemsSource="{x:Bind ViewModel.Siloses}"
              HorizontalAlignment ="Stretch"
              Height="700">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas Height="{Binding ElementName=CanvasPannel, Path=Height}"
                    Width="{Binding ElementName=CanvasPannel, Path=Width}"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Left" Value="{Binding X, Converter={StaticResource ConwertToPixel}, ConverterParameter=1500}"/>
            <Setter Property="Canvas.Top" Value="{Binding Y, Converter={StaticResource ConwertToPixel}, ConverterParameter=800}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid Height="150"
                  Width="150">
                <Image x:Name="backgroundImage" Source="{Binding PathImageSilos, Mode=OneWay}" ></Image>
                <StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
                    <TextBlock Text="{Binding Name, Mode=OneWay}" FontSize="18"></TextBlock>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Margin="0,0,5,0">Max</TextBlock>
                        <TextBlock Text="{Binding Max, Mode=OneWay}" ></TextBlock>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Margin="0,0,5,0">Mid</TextBlock>
                        <TextBlock Text="{Binding Mid, Mode=OneWay}" ></TextBlock>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Margin="0,0,5,0">Min</TextBlock>
                        <TextBlock Text="{Binding Min, Mode=OneWay}" ></TextBlock>
                    </StackPanel>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

转换类

public class ConvertPixel : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (parameter != null)
        {
            return (int)((float)value * int.Parse((string)parameter));
        }
        else
            return (int)((float)value*1000);
    }
    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return (int)value / (int)parameter;
    }
}

提前谢谢您。

我在一个俄语网站上找到了一个很好的例子。 https://habr.com/ru/articles/686438/ 当然，我还阅读了 Microsoft 的文章。

Answer 1

WinUI 存储库中有一个关于此问题的 issue，并且

Canvas

似乎无法作为

ItemsPanel

工作。

您可以尝试使用 CommunityToolkit-Labs 中的 CanvasView 控件。它仍然是一个实验对照，但你应该看看。

这里让我向您展示一个基本的示例代码：

public partial class Item(object content, int x, int y) : ObservableObject
{
    [ObservableProperty]
    private object _content = content;

    [ObservableProperty]
    private int _x = x;

    [ObservableProperty]
    private int _y = y;
}


public partial class ShellViewModel : ObservableObject
{
    [ObservableProperty]
    private ObservableCollection<Item> _items =
        [
            new Item("Item 1", 100, 50),
            new Item("Item 2", 200, 100),
            new Item("Item 3", 300, 150),
        ];
}

<Page
    ...
    xmlns:labs="using:CommunityToolkit.Labs.WinUI">
    <labs:CanvasView ItemsSource="{x:Bind ViewModel.Items, Mode=OneWay}">
        <labs:CanvasView.ItemTemplate>
            <DataTemplate x:DataType="local:Item">
                <Button
                    Canvas.Left="{x:Bind X, Mode=OneWay}"
                    Canvas.Top="{x:Bind Y, Mode=OneWay}"
                    Content="{x:Bind Content, Mode=OneWay}" />
            </DataTemplate>
        </labs:CanvasView.ItemTemplate>
    </labs:CanvasView>
</Page>