Свойства расположения холста недоступны / недоступны в ItemsControl.DataTemplate

#c# #mvvm #uwp

Вопрос:

В настоящее время я работаю над проектом, в котором мне нужно нарисовать несколько фигур на холсте. Я сделал это с помощью ItemsControl, однако прямоугольники не отображаются в их правильном месте. Похоже, у меня нет доступа к холсту.Слева и холст.Лучшие свойства на данном этапе… У кого-нибудь есть хорошая альтернатива, обходной путь или решение для этого?

Заранее спасибо!

 <ItemsControl ItemsSource="{x:Bind Path=VML.Main.DrawableObjects}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas x:Name="content" Background="White" Canvas.ZIndex="2" Width="800" Height="600"></Canvas>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplateSelector>
            <vm:GalaxyTemplateSelector>
                <vm:GalaxyTemplateSelector.CelestialBodyTemplate>
                    <DataTemplate x:DataType="vm:CelestialBodyVM">
                        <Ellipse Height="{x:Bind Diameter}" Width="{x:Bind Diameter}" Fill="{x:Bind Colour}" Stroke="{x:Bind BorderColour}" StrokeThickness="1">
                            <Ellipse.RenderTransform>
                                <TranslateTransform X="{x:Bind X}" Y="{x:Bind Y}"/>
                            </Ellipse.RenderTransform>
                        </Ellipse>
                    </DataTemplate>
                </vm:GalaxyTemplateSelector.CelestialBodyTemplate>
                <vm:GalaxyTemplateSelector.LineTemplate>
                    <DataTemplate x:DataType="vm:LineVM">
                        <Line X1="{x:Bind X1}" Y1="{x:Bind Y1}" X2="{x:Bind X2}" Y2="{x:Bind Y2}" Stroke="{x:Bind Colour}" StrokeThickness="1"></Line>
                    </DataTemplate>
                </vm:GalaxyTemplateSelector.LineTemplate>
                <vm:GalaxyTemplateSelector.RectangleTemplate>
                    <DataTemplate x:DataType="vm:RectangleVM">
                        <Rectangle Canvas.Left="{x:Bind X}" Canvas.Top="{x:Bind Y}" Width="{x:Bind Width}" Height="{x:Bind Height}" Fill="Transparent" Stroke="{x:Bind Colour}" StrokeThickness="1"></Rectangle>
                    </DataTemplate>
                </vm:GalaxyTemplateSelector.RectangleTemplate>
            </vm:GalaxyTemplateSelector>
        </ItemsControl.ItemTemplateSelector>
    </ItemsControl>

1. Может ли форма эллипса и линии быть правильной?

2. Да, все работало нормально, но когда я попытался нарисовать квадрат, я не мог понять, как нарисовать его в соответствующем положении

3. Не могли бы вы поделиться образцом проекта, мы не смогли воспроизвести образец с приведенным выше кодом, если бы вы могли поделиться образцом проекта, я протестирую базу на этом.

4. @NicoZhu-MSFT Это самая базовая версия проекта; github.com/tjeufoolen/FlatGalaxy-Canvas . В этой версии вы можете видеть, что когда я пытаюсь отобразить прямоугольник в MainVM#UpdateView() в позиции x, y, он всегда заканчивается на 0,0.

Ответ №1:

Свойства расположения холста недоступны / недоступны в ItemsControl.DataTemplate

Пожалуйста, проверьте этот документ, если вы не поместили Rectangle его в Canvas контейнер, Canvas.Left и Canvas.Top он не будет действовать. Для этого сценария вы могли бы создать контейнер холста для Rectangle

 <vm:GalaxyTemplateSelector.RectangleTemplate>
    <DataTemplate x:DataType="vm:RectangleVM">
        <Canvas Height="600" Width="800">
            <Rectangle
                Canvas.Left="{x:Bind X}"
                Canvas.Top="{x:Bind Y}"
                Width="{x:Bind Width}"
                Height="{x:Bind Height}"
                Fill="Transparent"
                Stroke="{x:Bind Colour}"
                StrokeThickness="1" />
        </Canvas>
    </DataTemplate>
</vm:GalaxyTemplateSelector.RectangleTemplate>

1. Кажется, что когда я помещаю прямоугольники в их собственный холст, положение холста отключается вместе с остальными. prntscr.tjeufoolen.nl/1SB3T0UJpc.png Есть какой-нибудь способ центрировать этот новый холст вокруг его родительского элемента (ItemPanel)?

2. Пожалуйста, укажите новый холст того же размера, что и родительский холст.

3. К сожалению, это не имеет никакого значения:(

4. Ах, я вижу, это действительно хорошо выглядит в образце репозитория. Я думаю, что это просто какой-то неправильный код в моем оригинальном проекте. Извините за беспокойство, я отмечу этот ответ как решенный 🙂

5. Спасибо, если у вас есть какие-либо обновления, пожалуйста, опубликуйте ниже или создайте новую тему.