6

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

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

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

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

1 ответ 1

4

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

<Window ...>
    <Grid> <!-- внешний контейнер -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="0.5*"/> <!-- 0.5 = k - 1 -->
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="0.5*"/> <!-- 0.5 = k - 1 -->
        </Grid.RowDefinitions>
        <Grid Grid.Row="0" Grid.Column="0">
            <Grid.RenderTransform>
                <!-- ScaleX/Y = k -->
                <ScaleTransform CenterX="0" CenterY="0" ScaleX="1.5" ScaleY="1.5"/>
            </Grid.RenderTransform>

            <!-- ну и тут ваш контент -->
            <Button HorizontalAlignment="Center" VerticalAlignment="Center" Click="OnClick">
                GO
            </Button>
            
        </Grid>
    </Grid>
</Window>

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


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

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


Дополнение: Если вам нужно менять размер в зависимости от разных обстоятельств, проще всего сделать его параметром. Это делается так:

  1. В MainWindow кладём DependencyProperty типа double, назовём его ScaleFactor. Значение по умолчанию — 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));
    
  2. Вместо константы 1.5 в ScaleY прописываем привязку:

     {Binding ScaleFactor, ElementName=Main}
    

    (даём окну имя Main, чтобы было проще привязывать).

  3. Для привязки 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 NotSupportedException();
         }
     }
    

    Кладём в ресурсы и привязываем:

     <ColumnDefinition Width="{Binding ScaleFactor, ElementName=Main,
             Converter={StaticResource RestGridLengthConverter}}"/>
    
  4. Всё, теперь у нас можно настраивать увеличение при старте программы (или вообще когда угодно), используя ScaleFactor.

Например, можно прикрутить к нему слайдер. Вот полный пример:

<Window x:Class="Example.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Example"
        Title="Test" Height="350" Width="525"
        Name="Main">
    <Window.Resources>
        <local:RestGridLengthConverter x:Key="RestGridLengthConverter"/>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="{Binding ScaleFactor, ElementName=Main,
                Converter={StaticResource RestGridLengthConverter}}"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="{Binding ScaleFactor, ElementName=Main,
                Converter={StaticResource RestGridLengthConverter}}"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0" Grid.Column="0">
            <Grid.RenderTransform>
                <ScaleTransform CenterX="0" CenterY="0"
                                ScaleX="{Binding ScaleFactor, ElementName=Main}"
                                ScaleY="{Binding ScaleFactor, ElementName=Main}"/>
            </Grid.RenderTransform>
            <Button HorizontalAlignment="Center" VerticalAlignment="Center" MinWidth="75">
                GO
            </Button>
        </Grid>
        <Slider Grid.RowSpan="2" Grid.ColumnSpan="2" VerticalAlignment="Bottom"
                Minimum="1" Maximum="5"
                Value="{Binding ScaleFactor, ElementName=Main}"/>
    </Grid>
</Window>
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();
        }
    }
}

Результат:

анимашка

4
  • Спасибо за ответ. Собственно, пока как временное решение поизменял в xaml-разметке margin/padding/fontsize у элементов, но на ПК выглядит мерзковато. Как тогда сделать 2 независимых разметки с возможностью их смены во время работы? Commented 18 сент. 2016 в 10:51
  • @Андрей: Ну, создайте два класса MainWindowDesktop и MainWindowTablet, и инстанциируйте нужный. Для этого вам понадобится создавать главное окно не неявно через StartupUri, а явно, как тут.
    – VladD
    Commented 18 сент. 2016 в 10:57
  • Продолжаю изучение WPF, добрался до изучения стилей :). Может быть есть какое-то решение с использованием их? Сделать 2 набора стилей для элементов, при запуске приложения выбирать нужный... Commented 2 окт. 2016 в 7:30
  • 1
    @Андрей: Лучше не через стиль, а просто параметризировать через свойство. Смотрите обновление ответа.
    – VladD
    Commented 2 окт. 2016 в 12:15

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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