Почему не работает WrapPanel?

@crushed00 · Регистрация: 02.12.2019

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

Страница

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<Page x:Class="ConvertToImage.Pages.SettingPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:ConvertToImage.Pages"
      xmlns:fa="http://schemas.awesome.incremented/wpf/xaml/fontawesome.sharp" 
      mc:Ignorable="d" Loaded="Page_Loaded"
      d:DesignHeight="450" d:DesignWidth="800"
      Title="SettingPage">
    <Grid Style="{DynamicResource GridBackgroundBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="105"/>
            <RowDefinition Height="200"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
 
 
        <Grid Grid.Row="0">
            <Button Style="{DynamicResource btnSelectPath}" 
                    x:Name="btnBack" Click="btnBack_Click"
                    HorizontalAlignment="Left">
                <Button.Content>
                    <StackPanel Orientation="Horizontal" Margin="0 -30 0 0">
                        <fa:IconImage Icon="ArrowLeft"  Style="{DynamicResource fa:IconImageTopButton}"/>
                        <TextBlock Text="Назад" Margin="5 6 0 0"  Style="{DynamicResource textType}"/>
                    </StackPanel>
                </Button.Content>
            </Button>
 
            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,10,0,0"
                       Style="{DynamicResource TextMenyStyle}"
                       Text="Настройки"/>
 
 
        </Grid>
 
        <Border Style="{DynamicResource bodredMenySetting}"
               
                Visibility="Visible" Width="auto" Height="auto"
                Margin="0 55 30 30" Grid.RowSpan="3">
 
            <ScrollViewer HorizontalScrollBarVisibility="Auto"
                          VerticalScrollBarVisibility="Auto">
                <Grid Grid.Row="1">
                    <StackPanel>
                        <StackPanel Margin="0 5 0 0">
                            <TextBlock Style="{DynamicResource textType}" Margin="20 0 0 0" Text="Темы" FontSize="20"/>
                            <Separator Width="auto" Margin="21 0 20 0"/>
 
                        </StackPanel>
 
                        <WrapPanel>
                            <StackPanel>
                            <Border Margin="20,20,0,0" Style="{DynamicResource HoverBorderStyle}" x:Name="bordDark" MouseLeftButtonDown="bordDark_MouseLeftButtonDown">
                                <StackPanel>
                                    <Border Background="#FF1C243C" Height="140" CornerRadius="20" Margin="10">
                                        <StackPanel HorizontalAlignment="Center">
                                            <Border Background="#d3d3d3" Margin="0,20,0,0" Height="40" CornerRadius="10"/>
                                            <TextBlock Text="Текст" FontSize="25" Margin="0,20,0,0" Foreground="White" Style="{DynamicResource TextMenyStyle}"/>
                                        </StackPanel>
                                    </Border>
                                    <TextBlock Style="{DynamicResource textTypeBorder}" Text="Тёмная" FontSize="16" HorizontalAlignment="Center" Margin="0,10,0,0"/>
                                </StackPanel>
                            </Border>
                            </StackPanel>
                            <StackPanel>
                                <Border Margin="0,20,0,0" Style="{DynamicResource HoverBorderStyle}" x:Name="bordLigth" MouseLeftButtonDown="bordDark_MouseLeftButtonDown">
                                    <StackPanel>
                                        <Border Background="#FFEFD1B5" Height="140" CornerRadius="20" Margin="10">
                                            <StackPanel HorizontalAlignment="Center">
                                                <Border Background="#FFFEF9F6" Margin="0,20,0,0" Height="40" CornerRadius="10"/>
                                                <TextBlock Text="Текст" FontSize="25" Margin="0,30,0,0" Foreground="Black" Style="{DynamicResource TextMenyStyle}"/>
                                            </StackPanel>
                                        </Border>
                                        <TextBlock Style="{DynamicResource textTypeBorder}" Text="Светлая" FontSize="16" HorizontalAlignment="Center" Margin="0,10,0,0"/>
                                    </StackPanel>
                                </Border>
                            </StackPanel>
 
                            <StackPanel>
                                <Border Margin="0,20,20,0" Style="{DynamicResource HoverBorderStyle}" x:Name="borderNew" MouseLeftButtonDown="bordDark_MouseLeftButtonDown">
                                    <StackPanel>
                                        <Border Background="#FF00ACFF" Height="140" CornerRadius="20" Margin="10">
                                            <StackPanel HorizontalAlignment="Center">
                                                <Border Background="#FFC640E6" Margin="0,20,0,0" Height="40" CornerRadius="10"/>
                                                <TextBlock Text="Текст" FontSize="25" Margin="0,30,0,0" Foreground="White" Style="{DynamicResource TextMenyStyle}"/>
                                            </StackPanel>
                                        </Border>
                                        <TextBlock Style="{DynamicResource textTypeBorder}" Text="Скоро" FontSize="16" HorizontalAlignment="Center" Margin="0,10,0,0"/>
                                    </StackPanel>
                                </Border>
                            </StackPanel>
                        </WrapPanel>
               
 
 
                        <StackPanel Margin="0 10 0 0">
 
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Style="{DynamicResource textType}" Margin="20 5 0 0"
                                            Text="Шрифт" FontSize="20"/>
                                <TextBlock Style="{DynamicResource textType}" Margin="20 5 0 0"
                                            Text="(Скоро)" FontSize="20"/>
 
                            </StackPanel>
                            <Separator Width="auto" Margin="21 0 20 0"/>
                        </StackPanel>
                        <StackPanel Margin="0 5 0 0">
                            <TextBlock Style="{DynamicResource textType}" Margin="20 5 0 0"
                                         Text="Путь" FontSize="20"/>
                            <Separator Width="auto" Margin="21 0 20 0"/>
 
                            <Grid>
                                <TextBox Width="AUTO" IsReadOnly="True"   x:Name="tbPath"
                                        Text=""
                                        FontSize="11"
                                        Height="18" Margin="21 10 60 0"/>
 
                                <Button Margin="0 10 15 0" 
                                          x:Name="btnPathFolders" Click="btnPathFolders_Click"
                                          Style="{DynamicResource btnSelectPath}">
                                    <fa:IconImage  Icon="FolderOpen"
                                                    Style="{DynamicResource fa:IconImageTopButton}"/>
 
                                    <Button.ToolTip>
                                        <ToolTip Width="65">
                                            <TextBlock Text="Выбрать"/>
                                        </ToolTip>
                                    </Button.ToolTip>
                                </Button>
 
                            </Grid>
                        </StackPanel>
                        <StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Style="{DynamicResource textType}" Margin="20 5 0 0"
                                             Text="Размер текста" FontSize="20"/>
                                <TextBlock Style="{DynamicResource textType}" Margin="20 5 0 0"
                                           Text="(Скоро)" FontSize="20"/>
                            </StackPanel>
                            <Separator Width="auto" Margin="21 0 20 0"/>
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </ScrollViewer>
        </Border>
    </Grid>
</Page>

Стиль

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:fa="http://schemas.awesome.incremented/wpf/xaml/fontawesome.sharp"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="GridBackgroundBrush" TargetType="Grid">
        <Setter Property="Background" Value="#FF0E1524"/>
 
    </Style>
 
    <Style TargetType="TextBlock" x:Key="TextMenyStyle">
        <Setter Property="FontFamily" Value="Segoe UI"/>
        <Setter Property="Foreground" Value="#d3d3d3"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="FontStyle" Value="Oblique"/>
        <Setter Property="FontSize" Value="30"/>
    </Style>
  
 
 
    <Style TargetType="TextBlock" x:Key="linkMeny">
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="FontFamily" Value="Segoe UI"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Foreground" Value="Blue"/>
                <Setter Property="TextDecorations" Value="Underline"/>
            </Trigger>
        </Style.Triggers>
    </Style>
 
    <Style x:Key="HoverBorderStyle" TargetType="Border">
        <Setter Property="Background"  Value="Transparent"/>
        <Setter Property="CornerRadius" Value="20"/>
        <Setter Property="Width" Value="180"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="#FF0C3693"/>
            </Trigger>
        </Style.Triggers>
    </Style>
 
    <Style TargetType="fa:IconImage" x:Key="imageFon">
        <Setter Property="Width" Value="180"/>
        <Setter Property="Width" Value="auto"/>
 
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Foreground" Value="Blue"/>
             
            </Trigger>
        </Style.Triggers>
    </Style>
 
    <Style TargetType="fa:IconImage" x:Key="iconImageBase">
        <Setter Property="Height" Value="16"/>
        <Setter Property="Foreground" Value="White"/>
    </Style>
 
    <Style TargetType="TextBlock">
        <Setter Property="FontFamily" Value="Segoe UI"/>
    </Style>
 
    <Style TargetType="TextBlock" x:Key="textTypeBorder">
        <Setter Property="Foreground" Value="#d3d3d3"/>
        <Setter Property="FontFamily" Value="Segoe UI"/>
    </Style>
 
    <Style TargetType="TextBlock" x:Key="textType">
        <Setter Property="FontStyle" Value="Oblique"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="Foreground" Value="#d3d3d3"/>
    </Style>
 
    <Style TargetType="Border" x:Key="bodredMeny">
        <Setter Property="Background" Value="#d3d3d3"/>
        <Setter Property="CornerRadius" Value="20"/>
        <Setter Property="Width" Value="250"/>
        <Setter Property="Height" Value="170"/>
        <Setter Property="Visibility" Value="Collapsed"/>
    </Style>
 
    <Style TargetType="Border" x:Key="bodredMenySetting">
        <Setter Property="Background" Value="#FF1C243C"/>
        <Setter Property="CornerRadius" Value="20"/>
        <Setter Property="Width" Value="250"/>
        <Setter Property="Height" Value="170"/>
        <Setter Property="Visibility" Value="Collapsed"/>
    </Style>
 
    <!--Цвет иконок у кнопок-->
    <Style TargetType="fa:IconImage" x:Key="fa:IconImageTopButton">
        <Setter Property="Width" Value="28"/>
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="Height" Value="20"/>
        <Setter Property="Foreground" Value="{Binding Path=Tag, RelativeSource={RelativeSource FindAncestor,
           AncestorType={x:Type Button}}}"/>
    </Style>
    <Style TargetType="Button"  x:Key="btnSelectPath">
        <Setter Property="Background" Value="Transparent"/>
     
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="Height" Value="20"/>
        <Setter Property="Margin" Value="10"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="HorizontalAlignment" Value="Right"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property="Tag" Value="#6673b7"/>
        <Setter Property="ToolTipService.ShowDuration" Value="30000"/>
        <Setter Property="FontFamily" Value="Segoe UI"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Background="{TemplateBinding Background}"  >
                        <ContentPresenter HorizontalAlignment="Left"
                                       VerticalAlignment="Center"
                                       Content="{TemplateBinding  Content}">
                        </ContentPresenter>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
 
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Foreground" Value="#FF4170AF"/>
                <Setter Property="Tag" Value="Blue"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Border Background="{TemplateBinding Background}">
 
 
                                <ContentPresenter HorizontalAlignment="Left"
                                       VerticalAlignment="Center">
 
                                </ContentPresenter>
 
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
    
    
    
</ResourceDictionary>

Сейчас выглядит так

Но вообще должно быть отцентровано с лево по центру с право. (Но это не важно)

Ожидаю что если они не помещаются на экран, то бордеры должны быть столбиком быть. Вот так

Но этого не происходит.

@Элд Хасп · 13.10.2024, 16:44

Сообщение от crushed00

должно быть отцентровано с лево по центру с право.

Воще, не понял...

Добавлено через 14 минут

Сообщение от crushed00

<ScrollViewer

Предоставляет для размещения своему дочернем элементу бесконечный регион.
Вложенные элементы никак не будут ограничиваться в размещении.
Например, WrapPanel вытянется в одну строку и её надо будет пролистывать с помощью HorizontalScrollBar.

crushed00, так же совет по архитектуре.
У вас однотипные плитки.
Вам следует создать класс со свойствами достаточными для сохранения-передачи всех отличительных значений.
Создать коллекцию с этим классом и уже её выводить в представлении с помощью ItemsControl или ListBox.
Представление плитки для элемента указать в ItemsTemplate. Нужную панель (в вашем случае WrapPanel, вроде) - в ItemsPanel.

@crushed00 · 13.10.2024, 16:45 **[ТС]**

Ну вот, приведу пример с текстом.

XML
1
2
3
4
5
6
7
8
9
<WrapPanel>
    <TextBlock Text="safdsdsf" />
    <TextBlock Text="234324"  Margin="10 0 0 0"/>
    <TextBlock Text="hgbfvdcxcvbn," Margin="10 0 0 0" />
    <TextBlock Text="ssssssssssss" Margin="10 0 0 0" />
    <TextBlock Text="aaaaaaaaaaaaaa" Margin="10 0 0 0"/>
    <TextBlock Text="cccccccccccc" Margin="10 0 0 0"/>
    <TextBlock Text="bbbbbbbbbbbbbbbbb" Margin="10 0 0 0"/>
</WrapPanel>

При уменьшении размера окна текст не поместившийся переносится на новую строку. Тоже самое я бы хотел с бордерами увидеть

@xellan24rus · 13.10.2024, 17:45

crushed00, вам выше дали ответ на проблему. И вы сами привели пример когда все работает =\
ScrollViewer

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

Предоставляет для размещения своему дочернем элементу бесконечный регион.
Вложенные элементы никак не будут ограничиваться в размещении.
Например, WrapPanel вытянется в одну строку и её надо будет пролистывать с помощью HorizontalScrollBar.

На скрине можно заметить что wrap panel не переносит объекты, ведь он не уменьшился в размере.
Наглядный пример

Тут мы видим что при появление горизонтальной прокрутки ширина WrapPanel больше не меняется. Следовательно WrapPanel не может переносить объекты в новую строку. Получается что мы можем скролить панель, но переноса на новую строку нет.

Решение вынесите WrapPanel за пределы ScrollViewer и будет все работать как часики.
Не обязательно все лепить в один ScrollViewer, делайте макет по блокам.
Пример вверху нужен скрол горизонтальный, в середине WrapPanel, далее еще один ScrollViewer. И получите на выходе адаптивно резиновый макет который хотите.

@Элд Хасп · 13.10.2024, 18:36

Сообщение от crushed00

Ну вот, приведу пример с текстом.

Приведите пример, где WrapPanel вложена в ScrollViewer.

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

Например в данном случае у вас задано:

Сообщение от crushed00

XML
43
44
            <ScrollViewer HorizontalScrollBarVisibility="Auto"
                          VerticalScrollBarVisibility="Auto">

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

Возможно, вам подойдёт такое решение:

XML
43
44
45
        <ScrollViewer HorizontalScrollBarVisibility="Disabled"
                      VerticalScrollBarVisibility="Auto">
            <Grid Grid.Row="1">

Добавлено через 8 минут
Или такое:

XML
43
44
45
46
47
48
49
50
51
52
53
        <ScrollViewer HorizontalScrollBarVisibility="Auto"
                      VerticalScrollBarVisibility="Auto">
            <Grid Grid.Row="1">
                <StackPanel>
                    <StackPanel Margin="0 5 0 0">
                        <TextBlock Style="{DynamicResource textType}" Margin="20 0 0 0" Text="Темы" FontSize="20"/>
                        <Separator Width="auto" Margin="21 0 20 0"/>
                    </StackPanel>
 
                    <WrapPanel Width="{Binding ViewportWidth, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ScrollViewer}}}">
                        <StackPanel>

@crushed00 · 13.10.2024, 20:54 **[ТС]**

Спасибо

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@crushed00 4 / 4 / 6 Регистрация: 02.12.2019 Сообщений: 277
	13.10.2024, 20:54 [ТС]
	Спасибо 0