WPF Button с картинкой, при разворачивание на весь экран, картинка уползает на центр

Question

Кнопка в нормальном состоянии

Если разворачиваю на весь экран форму, то картинка на кнопке и текст уползают в центр

Код

 <Button Style="{DynamicResource ButtonMenuRound}" Grid.Row="3" Margin="36,2,10,1" MinHeight="25" MaxHeight="45">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                <Image Source="Glavnaya.png" HorizontalAlignment="Left" Margin="-18,2,32,2"/>
                <TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" Margin="-19,0,30,3" FontSize="18">Главная</TextBlock>
            </StackPanel>
        </Button>

Пробовал так ещё

<Button Style="{DynamicResource ButtonMenuRound}" Grid.Row="3" Margin="36,2,10,1" MinHeight="25" MaxHeight="45">
            <Grid ShowGridLines="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="auto"/>
                </Grid.ColumnDefinitions>
                <Image Source="Glavnaya.png" Grid.Column="0" HorizontalAlignment="Left" Margin="-56,2,0,2" Width="22"/>
                <TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" Margin="-19,0,0,0" Grid.Column="1" FontSize="18" Height="24" Width="65">Главная</TextBlock>
            </Grid>
        </Button>

Но Grid не заполняет Button и не могу разделить по столбцам

Заранее спасибо за помощь

Зачем вам тут это: Margin="-19,0,30,3"? Уберите и должно быть все нормально. P.S. Советую почитать про векторную графику, а то это мыло вашего домика, прям ух.... — EvgeniyZ, Mar 11 '23 at 19:23
@EvgeniyZ если я удаляю margin то элементы распологаются в куче как скриншоте https://skr.sh/sInA8bpaxMg?a Про мыло из домика как раз читаю, как решить это — xellan, Mar 11 '23 at 19:27
А мне нужно чтобы домик был слева и текст с отступом в 20 от домика — xellan, Mar 11 '23 at 19:28
Ну так сделайте просто картинке одной отступ, просто Margin="0 0 5 0, чисто 5 пунктов справа, зачем вот эта каша в виде -56, -19 у другого, и так далее? — EvgeniyZ, Mar 11 '23 at 19:57
@EvgeniyZ Можно сделать отступ справа. И это каша появилась тем самым что в конструкторе двигал элементы как мне нужно. Я расставлял и другие элементы в Grid и делал отступ через Margin, все остается на своих местах, но с кнопкой не получается сделать так. Чтобы например картинка всегда была слева. И Кроме как через margin она у меня никак не двигается. HorizontalAlignment="Left" не спасает — xellan, Mar 11 '23 at 20:04
Забудьте про конструктор, вообще. Запустите проект, и на живую пишите дизайн. Примерно такой должна быть ваша разметка, где Border - это замена вашей кнопки со стилем; StackPanel - это основная панель группировки, у которой задана горизонтальная ориентация (размещаем в ряд), а также ее центруем по горизонту; Viewbox с Canvas - это ваша иконка, меняйте на картинку, или оставляйте вектор, размеры и прочее не задаются, дается макс. свобода контролу; ну и TextBlock - просто текст. Итог - будет всегда по центру. — EvgeniyZ, Mar 11 '23 at 20:11
В WPF всегда есть строгая последовательность объектов, их очередность. Ваш первый вариант, где используется StackPanel должен работать как надо, где картинка пойдет первой, а текст после, она не может выводить все наоборот, если вы только не перебьете это опять-же, отступами (Margin). Если вы делаете большие отступы, или они у вас идут в минус, то это сразу означает то, что вы делаете что-то не так. Не ограничивайте контролы, дайте им самим решать что и куда выводить. — EvgeniyZ, Mar 11 '23 at 20:15
@EvgeniyZ я понимаю адаптивность впф, она умно умеет адаптировать элементы, взять за пример туже компоновку через Grid для кнопок в ряду, если задать отступы по краям по 10, то при растягивание окна пропорционально растягивает панель и кнопки. В этом примере из вопроса отступы работают только в обычном положение, если растягивать форму, компоненты убегают в центр. С точки зрения как меняется дизайн, это просто ужасно https://skr.sh/sInYWnTpDA6?a — xellan, Mar 11 '23 at 20:41
@EvgeniyZ Картинка домика слева, отступ от левого края 10, затем идет текст отступ от картинки 20. При растягивание формы, чтобы пропорционально увеличивалась кнопка с ее содержимым, не убегая в центр как на скриншоте — xellan, Mar 11 '23 at 20:49
Тогда мы друг друга не так поняли. Я думал, что вас смущает то, что при растягивании все не совсем по центру. А вам нужно совсем другое. Хорошо, тогда такой вариант. Тут суть в том, что мы делаем нужный объект, настраиваем его вид, пропорции, и при помощи Viewbox говорим, что он должен подстраиваться под размер родителя. Заметьте, что Border, который у меня заменяет вашу кнопку, также лежит внутри. Grid тут для того, чтоб тексту было выделено все доступное пространство после иконки, и он не мешал самой иконке. — EvgeniyZ, Mar 11 '23 at 21:07
@EvgeniyZ спасибо за отличный пример, теперь все на своих местах остается) Подскажите как можно ограничить рост текста, на скриншоте видно что при увелечении окна текст на кнопке сильно вырос, скриншот https://skr.sh/sInGWx5P2ln?a Text="Главная" MaxHeight="32" это не помогает — xellan, Mar 11 '23 at 21:41
А почему вы вектор мой на картинку меняете?) Ведь он отлично масштабируется вместе с текстом (мелкий, большой). Ну а так, если объект внутри ViewBox, то он будет масштабироваться под размеры родителя, сохраняя свои пропорции. Другими словами, ограничить не можете, только если изменить пропорции чем либо, например тексту можно задать другой FontSize, чуть меньше. Тут главное поймите саму суть, как масштабировать, и уже на основе этого пишите как надо, а то может вам не нужно все, а лишь часть) — EvgeniyZ, Mar 11 '23 at 22:04
@EvgeniyZ Спасибо еще раз) Картинку указал ради интереса как что с ней будет если так растянуть ее, но надо читать про графику в отличии от винформс тут картинки в 1 строку кода не принимают красивый вид. Попробовал на событиях FontSize поменять, бесполезно, но да ладно. На основе кода попробую что то сделать для этого) — xellan, Mar 11 '23 at 22:16

aepot · Accepted Answer · 2023-03-12T00:09:23.987

Как-то так получится

<StackPanel>
    <Button Margin="10" HorizontalContentAlignment="Left" Background="Transparent">
        <StackPanel Orientation="Horizontal" Margin="5">
            <TextBlock Text="&#xE80F;" FontFamily="Segoe MDL2 Assets" FontSize="22"/>
            <TextBlock Text="Главная" VerticalAlignment="Center" Margin="20,0,0,0" FontSize="18"/>
        </StackPanel>
    </Button>
</StackPanel>

Шрифтовые иконки Windows 10 можно найти здесь.

Но вообще я бы для меню вам советовал использовать ListBox, а не кнопки, пример: Навигация в приложении, с частичной сменой View

спасибо за ответ, это то что нужно) Про пост по ссылке сейчас читаю) — xellan, Mar 12 '23 at 00:34

WPF Button с картинкой, при разворачивание на весь экран, картинка уползает на центр

1 Answers1