0

Как контролировать изменение дизайна при изменении длины слов? На некоторых языках слова очень длинные в переводе, как сохранить дизайн в таком случае и не резать слово?

1
  • Это называется резиновый дизайн и конкретного ответа нет, как его сделать. Вам придется погуглить этот термин. Основная идея, как я её понимаю, отсутствие жестких указаний по поводу позиционирования/размера элементов. То есть вам не надо указывать, что у этого контрола ширина 10 пикселей. Придется скорее всего указывать, что такой то контрол занимает от 10% до 15% формы, такой-то 20% и так далее, и при изменении размеров формы, её содержимое подстраивается само под новые размеры.
    – tym32167
    16 мая 2018 в 10:52

1 ответ 1

2

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

Покажу пару примеров:

К примеру у нас есть окно, ширина которого равна 800. Нам к примеру надо разместить Grid на половину этого окна, как быть? 800/2 = 400, значит можем задать что то вроде этого:

<Grid Width="400" HorizontalAlignment="Left" Background="Red"></Grid>

Посмотрим результат:

Result 1

Вроде как выглядит красиво, но что будет, если мы изменим размер нашего окна? А нечего хорошего, наш Grid не будет занимать 50% всего окна.

Result 2

Так как в таких ситуациях быть?
На самом деле все очень просто, нам просто нужно избавиться от размера и для этого нам на помощь приходить тот же Grid, указание HorizontalAlignment и VerticalAlignment, да и по сути все.

Создадим новый Grid c двумя колонками и поместим туда то, что нам надо:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <Grid Grid.Column="0" Background="Red"></Grid>
</Grid>

Изначально Column и Row размещаются поровну, по этому нам досточно положить наш Grid с цветов внутрь и он займет все пространство первой колонки. Теперь при изменение размера у нас всегда будет ровно 50% окна закрашено красным цветом.

Хорошо, давайте другой пример, к примеру нам в правый нижний угол надо поместить небольшую надпись, как быть?

Я лично очень часто вижу подобный код:

<TextBlock Text="Моя надпись" Margin="663,389,0,10" Width="115"/>

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

Так как быть в таком случае? И тут все довольно просто, пишите код всегда сами, старайтесь отказываться от размеров вовсе (если не требуется строго фиксировать объект), используйте настройки позиционирования (HorizontalAlignment и VerticalAlignment), не делайте отступы (margin) очень большими (выше 20 уже как по мне через чур). Давайте перепишем эту строку:

<TextBlock Text="Моя надпись" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,5,5"/>

Все, теперь наша надпись будет размещена строго в нижнем правом углу нашего окна и что бы мы не делали, она там и останется. Так же и текст, ему будет место, куда можно "вырасти", ибо мы убрали фиксированную ширину элемента.

Result 3

Вот собственно и все, повторюсь - старайтесь писать код сами, не используйте дизайнер как средство размещения объектов (он годиться только лишь для просмотра), используйте настройки позиционирования и разметки и все у вас будет как надо!

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.