Равномерное размещение на форме двух Image

@Khludenkov · Регистрация: 30.04.2014

Студворк — интернет-сервис помощи студентам

Здравствуйте.
Имеется форма. На ней расположены (в числе прочего) два элемента Image

Вот код:

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<Window x:Class="Colposcope_5.CompareImagesWindow"
        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:Colposcope_5"
        mc:Ignorable="d"
        Title="Окно сравнения снимков: " Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
        </Grid.RowDefinitions>
 
        <Label Grid.Row="0"
               Name="LabelCompare"
               Content="Режим сравнения снимков"
               HorizontalAlignment="Center">
        </Label>
 
        <StackPanel Grid.Row="1"
                    Name="StackPanelCompare"
                    Orientation="Horizontal"
                    HorizontalAlignment="Stretch">
 
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
 
                <Image Grid.Column="0"
                       Width="auto"
                       Height="auto"
                       Name="ImageLeft"></Image>
                <Image Grid.Column="1"
                       Width="auto"
                       Height="auto"
                       Name="ImageRight"></Image>
            </Grid>
        
       </StackPanel>
 
        <StackPanel Grid.Row="2"
                    HorizontalAlignment="Center"
                    Orientation="Horizontal">
            <Button Name="ButtonImageLeftLoad"
                    HorizontalAlignment="Left"
                    Click="ButtonImageLeftLoad_Click"
                    Background="Magenta"
                    Margin="5"
                    Content=" Выберите левый снимок "></Button>
            <Button Name="ButtonShowGrid"
                    HorizontalAlignment="Center"
                    Background="Magenta"
                    Margin="5"
                    Click="ButtonShowGrid_Click"
                    Content= "Наложить сетку на снимки "></Button>
            <Label Content="Количество линий сетки ="
                   VerticalAlignment="Center"
                   Margin="5"></Label>
            <TextBlock Name="TextBlockLinesAmount"
                       Margin="5"
                       VerticalAlignment="Center"
                       Text="50"></TextBlock>
            <Button Name="ButtonImageRightLoad"
                    HorizontalAlignment="Right"
                    Background="Magenta"
                    Margin="5"
                    Click="ButtonImageRightLoad_Click"
                    Content=" Выберите правый снимок "></Button>
        </StackPanel>
 
        <StackPanel Grid.Row="3">
            <TextBox Height="100"
                     Text="Результат сравнения:"></TextBox>
        </StackPanel>
 
        <StackPanel Grid.Row="4"
                    Orientation="Horizontal">
            <Button Name="ButtonPrintReport"
                    Content=" Распечатать отчёт "
                    Background="Magenta"
                    Margin="5"
                    Click="ButtonPrintReport_Click"></Button>
            <Button Name="ButtonClose"
                    Content=" Закрыть "
                    Background="Magenta"
                    Margin="5"
                    Click="ButtonClose_Click"></Button>
            <TextBlock Name="TextBlockMediaDir"
                       Text=""
                       Foreground="Green"
                       Margin="5"/>
        </StackPanel>
        
    </Grid>
</Window>

Я планировал, что Image будут поровну делить место на форме.
Но получается вот так:

@Khludenkov · 11.11.2019, 11:56 **[ТС]**

Скажите, что надо сделать?

Добавлено через 4 минуты
то есть видно, что один по-возможности разворачивается полностью, второй получается с такой же высотой, но обрезанный по ширине.

@sttrox · 11.11.2019, 13:18

Khludenkov, один из простых вариантов прибиндить ширину картинки к колонке

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
   
<Grid>
   <Grid.ColumnDefinitions>
        <ColumnDefinition Name="Column1" Width="*"/>
        <ColumnDefinition Name="Column2" Width="*"/>
   </Grid.ColumnDefinitions>
 
   <Image Grid.Column="0"
         Width="{Binding ElementName=Column1, Path=ActualWidth}"
         Height="auto"
         Name="ImageLeft"/>
   <Image Grid.Column="1"
         Width="{Binding ElementName=Column2, Path=ActualWidth}"
         Height="auto"
         Name="ImageRight"/>
</Grid>

@Khludenkov · 11.11.2019, 14:06 **[ТС]**

sttrox, спасибо.
Я думал, она по умолчанию так и сделана.

Я уже и HorizontelAligment=Stretch пробовал...

@sttrox · 11.11.2019, 14:18

Khludenkov, да, по умолчанию так и сделано для большинства контролов, но контрол может запросить больше размер чем ему предоставляется. Image именно так и сделал, запросив столько пространства, какова и ширина картинки

@Khludenkov · 11.11.2019, 15:40 **[ТС]**

Хотя, я посмотрел, не помогает...
Похоже, сами колонки шире окна становятся...

@Элд Хасп · 11.11.2019, 17:37

Khludenkov, по идее надо правильно выставить значения свойств у Image.
Но есть и другой вариант - универсальный для всех подобных случаев.
Это использование ViewBox.

XML
29
30
31
32
33
34
35
36
37
38
39
40
41
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
 
           <ViewBox Grid.Column="0">
                <Image Name="ImageLeft"/>
           </ViewBox>
            <ViewBox Grid.Column="1">
               <Image Name="ImageRight"/>
           </ViewBox>
            </Grid>

@Khludenkov · 11.11.2019, 17:44 **[ТС]**

Элд Хасп, спасибо.

Сообщение от Элд Хасп

надо правильно выставить значения свойств у Image

Если не затруднит, что надо было сделать?

@Элд Хасп · 11.11.2019, 17:50

Khludenkov, я сейчас без компа - проверить не могу.
Но вроде надо задать нужные значения свойствам Stretch и StretchDirection.

@Khludenkov · 11.11.2019, 17:55 **[ТС]**

Элд Хасп, Большое спасибо.
Посмотрю тогда эти свойства.

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .

Равномерное размещение на форме двух Image

Решение

Решение

@Khludenkov 37 / 31 / 5 Регистрация: 30.04.2014 Сообщений: 1,037
	11.11.2019, 11:56 [ТС]
	Скажите, что надо сделать? Добавлено через 4 минуты то есть видно, что один по-возможности разворачивается полностью, второй получается с такой же высотой, но обрезанный по ширине. 0

@Khludenkov 37 / 31 / 5 Регистрация: 30.04.2014 Сообщений: 1,037
	11.11.2019, 14:06 [ТС]
	sttrox, спасибо. Я думал, она по умолчанию так и сделана. Я уже и HorizontelAligment=Stretch пробовал... 0

@sttrox WPF Разработчик 463 / 167 / 42 Регистрация: 20.02.2018 Сообщений: 285
	11.11.2019, 14:18
	Khludenkov, да, по умолчанию так и сделано для большинства контролов, но контрол может запросить больше размер чем ему предоставляется. Image именно так и сделал, запросив столько пространства, какова и ширина картинки 0

@Khludenkov 37 / 31 / 5 Регистрация: 30.04.2014 Сообщений: 1,037
	11.11.2019, 15:40 [ТС]
	Хотя, я посмотрел, не помогает... Похоже, сами колонки шире окна становятся... 0

@Элд Хасп Модератор 16142 / 11265 / 2888 Регистрация: 21.04.2018 Сообщений: 33,128 Записей в блоге: 2
	11.11.2019, 17:50
	Khludenkov, я сейчас без компа - проверить не могу. Но вроде надо задать нужные значения свойствам Stretch и StretchDirection. 1

@Khludenkov 37 / 31 / 5 Регистрация: 30.04.2014 Сообщений: 1,037
	11.11.2019, 17:55 [ТС]
	Элд Хасп, Большое спасибо. Посмотрю тогда эти свойства. 0