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

#net #wpf

Было разработано приложение с использованием WPF.

Заказчик использует приложение на планшете и интерфейс мелковат для быстрой работы,
требуется увеличить все элементы, ну скажем, на 50%.

Как сделать это быстро и с меньшими затратами? В каждом Window применить к контейнеру
компоновки трансформацию Scale в RenderTransform? Попробовал сделать это на примере
одного из Window - окно и не знает, что содержимое увеличилось и оно в окно не влезает...

Как всё-таки правильно это сделать? На что при этом обратить внимание? А, может быть,
есть способ сделать масштабирование динамическим с возможностью смены коэффициента
во время работы (при работе с мышью ведь увеличение и не требуется)?
    

Ответы

Ответ 1

Ну, если решать проблему так, как вы хотите (масштабированием интерфейса), то подойдёт
следующая идея. Пусть вы увеличиваете всё в 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();
        }
    }
}


Результат: