Почему Canvas изменяет позицию и размер элементов?

Question

[Евгений Иванов]

На верхней картинке макет приложения. На нижней запущенное приложение.
Видно, что происходит смещение кнопок вниз и уменьшение размера формы. Для позиционирования использован контейнер Canvas.

Обычно используют другие контейнеры (делят окно Grid). Но это тестовый пример. И, как видно, Canvas работает не корректно - то есть не выполняет свое назначение - жесткое (абсолютное) позиционирование элементов.

Почему Canvas изменяет позицию и размер элементов?

App.xaml (чистый проект без кода и дополнений 1 Canvas и 2 Button )

<Window x:Class="wpf4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:wpf4"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="400" WindowStartupLocation="CenterScreen" ResizeMode="NoResize">
    <Grid>

        <Canvas Background="Green">
            <Button Content="Button" Canvas.Left="10" Canvas.Top="141" Width="75"/>
            <Button Content="Button" Canvas.Left="159" Canvas.Top="94" Width="75"/>
        </Canvas>

    </Grid>
</Window>

Answer 1

[Евгений Иванов]

Очень жаль, что никто так и не смог дать полный ответ на мой вопрос. Вопрос достаточно простой.
Ответ был дан на stackoverflow. Напишу его сюда.

Нужно не только указывать размер контейнера (Grid, Canvas как и сказали выше)
Height="420" Width="790"
но указывать "размер" окна как
SizeToContent="WidthAndHeight"
Грубо говоря, окно будет "оборачивать" контейнер (Grid, Canvas). Тогда не будет глюков, смещений и т.д.

Указывать размер окна, как в WinForms, фиксированным
Height="200" Width="400"
не совсем верно. Ведь в WPF этот размер выделен под всё окно. А оно состоит из заголовка, границ, кнопок, иконки. И эти элементы, в зависимости от пользовательских настроек, могут иметь разный размер. И такое окно может смещать/перекрывать контент. Поэтому окно лучше использовать как "обертку" вашего контента.

Answer 2

[Dmitry]

Дизайнер не отображает верхнюю полоску. Сами элементы на своих местах, с заданными размерами. Что бы не ехала разметка, задайте размер Canvas.


На изображение видно, что если задать Canvas размер как у окна, он будет выходить за область окна.

Если вы хотите, что бы кнопка была с снизу, ее положение надо привязывать к нижней границе, а не к верхней.
Если хотите к верхней, то к верхней границе.
Если хотите центрировать, то есть параметр центрировать, либо указать в процентах.

По сути, здесь проблема не в дизайнере, а в вашем не понимание того, как он работает. Читайте больше теорий, разбирайте чужой код, и практикуйтесь.

Comments

[Евгений Иванов]

Дизайнер не отображает верхнюю полоску.

Обычно расчет координат позиции объекта на форме идет от левого верхнего угла. Слева на право, сверху вниз. Но я читал и знаю, что в XAML это не совсем так.

Тем не менее, такую базовую модель расположения элементов (абсолютное позиционирование), скорее всего поддерживают все языки разметки (Delphi, Qt(QML), HTML, CSS...). Если XAML это не поддерживает - это странно.

По сути, здесь проблема не в дизайнере

В дизайнере я вижу одно, а результат совсем другой.
Подобного не наблюдал в Delphi, Qt(QML), HTML, CSS ни в одном дизайнере или графической среде разработки. Несмотря на то, что HTML может иметь адаптивный дизайн и его элементы также могут изменять позицию в зависимости от разрешения экрана/окна браузера и т.д.

На изображение видно, что если задать Canvas размер как у окна, он будет выходить за область окна

А до этого он что делал? И откуда рассчитывал координаты? А до этого он занимал всю площадь формы.
Как я видел в дизайнере. И соответственно должен был производить расчет с левого верхнего угла.
Но как я понимаю, это не так?

Что бы не ехала разметка, задайте размер Canvas.

Какова высота заголовка окна? Возможно, она может быть разной.

Задал "на глазок". Canvas меньше формы.

Всё сместилось, форма уменьшилась. Но я четко прописал размер формы.

Я понимаю, что всё это выглядит странно. Попытки в XAML не делить окно Grid-ом и распределять элементы по ячейкам, позиционируя и привязывая их, но это базовая технология - абсолютное позиционирование объекта. И пока оно не работает.

[Dmitry]

Евгений Иванов,
1. Абстрагируйтесь от визуальной части дизайнера. Он живёт своей жизнью.
2. Используйте относительные позиции для элементов
3. Указываете положение элементов относительно той грани, к которой этот элемент ближе

[Евгений Иванов]

Janus74,

Абстрагируйтесь от визуальной части дизайнера. Он живёт своей жизнью.

Это не нормально. При разработке интерфейса я должен его видеть до компиляции приложения.

[Dmitry]

Евгений Иванов, Используйте блендер, в нем вы можете сделать только разметку, а потом перенести в проект.