Страницы

Поиск по вопросам

понедельник, 3 декабря 2018 г.

Масштабирование интерфейса WPF

Было разработано приложение с использованием WPF.
Заказчик использует приложение на планшете и интерфейс мелковат для быстрой работы, требуется увеличить все элементы, ну скажем, на 50%.
Как сделать это быстро и с меньшими затратами? В каждом Window применить к контейнеру компоновки трансформацию Scale в RenderTransform? Попробовал сделать это на примере одного из Window - окно и не знает, что содержимое увеличилось и оно в окно не влезает...
Как всё-таки правильно это сделать? На что при этом обратить внимание? А, может быть, есть способ сделать масштабирование динамическим с возможностью смены коэффициента во время работы (при работе с мышью ведь увеличение и не требуется)?


Ответ

Ну, если решать проблему так, как вы хотите (масштабированием интерфейса), то подойдёт следующая идея. Пусть вы увеличиваете всё в k раз (у вас k = 1.5). Пишем так:



(С удивлением обнаружил, что RenderTransform перемещает область hit test.)

Однако мне кажется, что это не идеальное решение. Дело в том, что простое скалирование интерфейса не поможет. Майкрософт пробовала в ранних версиях Windows Phone скалирование десктопных интерфейсов, и отказалась от этого: при таком подходе страдает usability.
Когда у вас мало места на экране, вы захотите не скалировать всё, а расположить элементы по-другому. Поэтому лучше следовать опыту Microsoft, и сделать для планшетов отдельный интерфейс, похожий на основной, но «заточенный» под меньший размер экрана и тач-управление. Будет выглядеть намного профессиональнее.

Дополнение: Если вам нужно менять размер в зависимости от разных обстоятельств, проще всего сделать его параметром. Это делается так:
В MainWindow кладём DependencyProperty типа double, назовём его ScalseFactor. Значение по умолчанию — 1.0
public double ScaleFactor { get { return (double)GetValue(ScaleFactorProperty); } set { SetValue(ScaleFactorProperty, value); } }
public static readonly DependencyProperty ScaleFactorProperty = DependencyProperty.Register( "ScaleFactor", typeof(double), typeof(MainWindow), new PropertyMetadata(1.0)); Вместо константы 1.5 в ScaleY прописываем привязку:
{Binding ScaleFactor, ElementName=Main}
(даём окну имя Main, чтобы было проще привязывать). Для привязки ColumnDefinition нам нужно вычесть единицу и перейти от double к типу GridLength, поэтому используем конвертер. Для начала определим его:
class RestGridLengthConverter : IValueConverter { public object Convert(object value, Type tt, object parameter, CultureInfo ci) { return new GridLength((double)value - 1, GridUnitType.Star); }
public object ConvertBack(object value, Type tt, object parameter, CultureInfo ci) { throw new NotImplementedException(); } }
Кладём в ресурсы и привязываем:
Всё, теперь у нас можно настраивать увеличение при старте программы (или вообще когда угодно), используя ScaleFactor
Например, можно прикрутить к нему слайдер. Вот полный пример:


namespace Example { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); }
public double ScaleFactor { get { return (double)GetValue(ScaleFactorProperty); } set { SetValue(ScaleFactorProperty, value); } }
public static readonly DependencyProperty ScaleFactorProperty = DependencyProperty.Register( "ScaleFactor", typeof(double), typeof(MainWindow), new PropertyMetadata(1.0)); } }

namespace Example { class RestGridLengthConverter : IValueConverter { public object Convert(object value, Type tt, object parameter, CultureInfo ci) { return new GridLength((double)value - 1, GridUnitType.Star); }
public object ConvertBack(object value, Type tt, object parameter, CultureInfo ci) { throw new NotImplementedException(); } } }
Результат:

Комментариев нет:

Отправить комментарий