canvas 上未显示 WPF ItemsControl DataTemplate

Question

我目前正在开发 .NET 4.7.1 应用程序。我使用 XAML WPF UI。我需要根据绑定视图模型中列表中的值在 canvas 上显示矩形。

我可以在 canvas 上显示静态矩形，但我不知道如何显示来自 ItemsControl DataTemplate 的矩形。另外，我需要为我的矩形使用某种样式。我暂时在 Canvas.Resources 中定义了样式。

我目前的编码是这样的：

<Canvas x:Name="canvas" Grid.Row="2" ClipToBounds="True" Background="Gainsboro">
    <Canvas.Resources>
        <Style TargetType="Rectangle">
            <Setter Property="Fill">
                <Setter.Value>
                    <DrawingBrush TileMode="Tile"
                                  Viewport="0,0,2,5" ViewportUnits="Absolute"
                                  Viewbox="0,0,2,30" ViewboxUnits="Absolute">
                        <DrawingBrush.Transform>
                            <RotateTransform Angle="45"/>
                        </DrawingBrush.Transform>
                        <DrawingBrush.Drawing>
                            <GeometryDrawing>
                                <GeometryDrawing.Pen>
                                    <Pen Brush="Red" Thickness="10"/>
                                </GeometryDrawing.Pen>
                                <GeometryDrawing.Geometry>
                                    <LineGeometry StartPoint="0,15" EndPoint="30,15"/>
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                        </DrawingBrush.Drawing>
                    </DrawingBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </Canvas.Resources>
    <!-- The static Rectangle works fine -->
    <!--<Rectangle Width="100" Height="100" Canvas.Left="100" Canvas.Top="100"/>-->
    <ItemsControl ItemsSource="{Binding RItems}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Rectangle Width="{Binding Width}" Height="{Binding Height}" Canvas.Left="{Binding Y}" Canvas.Right="{Binding X}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>        
    </ItemsControl>

    <Grid Width="{Binding ActualWidth, ElementName=canvas}" Height="{Binding ActualHeight, ElementName=canvas}">
        <Label Content="Beginning" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Left">
            <Label.LayoutTransform>
                <RotateTransform Angle="270"/>
            </Label.LayoutTransform>
        </Label>
        <Label Content="End" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Right">
            <Label.LayoutTransform>
                <RotateTransform Angle="270"/>
            </Label.LayoutTransform>
        </Label>
    </Grid>
</Canvas>

我在视图模型中的基本 RItems 集合如下所示：

public List<RItem> RItems { get; set; } = new List<RItem>
{
    new RItem
    {
        X = 100,
        Y = 100,
        Width = 100,
        Height = 100
    }
};

你知道我做错了什么吗？如何在 Canvas 上从视图模型 class 显示我的 RItem？

非常感谢！！

Answer 1

canvas 应该在项目控件内，因为它是项目面板。

大致类似于：

<ItemsControl ItemsSource="{Binding RItems}">
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <Canvas />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
  <ItemsControl.ItemTemplate>
    <DataTemplate>
       .....
    </DataTemplate>
  </ItemsControl.ItemTemplate>
  <ItemsControl.ItemContainerStyle>
    <Style>
      <Setter Property="Canvas.Left" Value="{Binding Left}" />
      <Setter Property="Canvas.Top" Value="{Binding Top}" />
    </Style>
  </ItemsControl.ItemContainerStyle>
</ItemsControl>

另请注意，每个项目都放在一个容器中，并且必须将其放置在 canvas 上。

我不确定为什么您的网格会绑定到 canvas 的大小。将 itemcontrol 放在网格内，它会填满网格。

canvas 上未显示 WPF ItemsControl DataTemplate

WPF ItemsControl DataTemplate not shown on canvas

c#

wpf

xaml

canvas

itemscontrol