WPF 项目控制数据模板未显示在 canvas

Question

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

我可以在我的 canvas 上显示一个 static 矩形，但是我不知道如何显示 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>

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

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

你知道我做错了什么吗？ 如何从 Canvas 上的视图 Model 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 放在网格内，它将填充网格。