WPF ItemsControl DataTemplate не отображается на холсте - PullRequest
Новая
       32

WPF ItemsControl DataTemplate не отображается на холсте

0 голосов
/ 04 октября 2019

В настоящее время я работаю над приложением .NET 4.7.1. Я использую интерфейс XAML WPF. Мне нужно показывать прямоугольники на холсте в соответствии со значениями в списке в модели связанного представления.

Я могу показать статический прямоугольник на своем холсте, тем не менее, я не знаю, как показать прямоугольники из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
    }
};

Знаете, что я делаю не так? Как я могу показать свой RItem из класса View Model на холсте?

Большое спасибо !!

1 Ответ

1 голос
/ 04 октября 2019

Холст должен находиться внутри элемента управления, поскольку он является панелью элементов.

Что-то очень похожее: 

<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>

Обратите также внимание, что каждый элемент находится внутри контейнера, и именно это должнобыть размещенным на холсте.

Я не уверен, почему ваша сетка привязана к размеру холста. Поместите элемент управления в сетку, и он заполнит сетку.

...