WPF и Silverlight элементы управления и макеты панорамирования и масштабирования

Question

Я хотел бы понять общие требования к макету WPF / Silverlight для возможности реализации функций панорамирования и масштабирования (перетаскивания и масштабирования). Я имею в виду не панорамирование и масштабирование для изображения, а для общего макета страницы (окна) (или его части) с некоторыми элементами управления.

Какие функции макета и какие функции используемых пользовательских элементов управления делают макет фиксированным и панорамирование и масштабирование невозможным?

Answer 1

Общее правило

За некоторыми исключениями, все в WPF может быть панорамировано, масштабировано, повернуто, растянуто и т. Д. В соответствии с вашими пожеланиями. Это включает отдельные элементы управления, такие как Button, составные элементы управления, такие как ListBox, и контейнеры, такие как StackPanel.

Исключения

Вот исключения:

1. Если вы используете Adorner и ваш AdornerDecorator находится за пределами области панорамирования / масштабирования, то элементы декорации, прикрепленные к области панорамирования / масштабирования, будут панорамироваться, но не масштабироваться. Решение состоит в том, чтобы поместить дополнительный AdornerDecorator в область панорамирования / увеличения.

2. Если вы используете всплывающее окно, оно будет отображаться в месте панорамирования / масштабирования его PlacementTarget, но само не будет масштабироваться. Он также не будет перемещаться при перемещении области, содержащей его PlacementTarget (в основном он находится на своей поверхности над целевым элементом управления). Чтобы обойти это, используйте Canvas нулевого размера с высоким порядком Z, когда вы хотите, чтобы что-то всплыло в области масштабирования / панорамирования.

3. Любое заданное вами ContextMenu будет отображаться во всплывающем окне, поэтому элементы меню будут отображать нормальный размер, даже когда область, на которую вы щелкнули, увеличена или уменьшена. Из-за природы контекстного меню это, вероятно, желательное поведение. Если нет, вы можете обернуть пункты меню в ViewBox и привязать масштаб к масштабу вашей основной области.

4. Ваши подсказки будут отображаться в нормальном размере, даже если пользовательский интерфейс панорамирован или увеличен. То же решение, что и для ContextMenu.

5. Если вы использовали интеграцию WinForms с интегрированными элементами управления WinForms и пользовательским интерфейсом, они не будут правильно панорамировать, масштабировать и обрезать в определенных ситуациях. Для решения этой проблемы существует продвинутая техника: вы реализуете элемент управления WinForms вне экрана, затем с помощью BitBlt или аналогичного изображения копируете изображение в окно как изображение и перенаправляете щелчки мыши и нажатия клавиш за пределами экрана. Хотя это много работы.

6. Если вы обходите WPF и напрямую используете GDI + или DirectX или используете Win32 hWnds для отображения контента или пользовательского интерфейса, этот контент или пользовательский интерфейс не будут правильно панорамироваться, масштабироваться или обрезаться до окна, если вы сами не сделаете это в своем код интерфейса.

Заключительные замечания

• Хороший пользовательский интерфейс WPF всегда использует панели, такие как Grid, DockPanel и т. Д., Для гибкого размещения элементов управления, чтобы они автоматически приспосабливались к размерам контейнера, а не с использованием фиксированных размеров и позиций. Это также верно для внутреннего содержимого вашей области панорамирования / масштабирования, НО есть исключение из этого правила: самый внешний элемент в вашей области панорамирования / масштабирования должен иметь указанный размер. Иначе, что определит область панорамирования / масштабирования?

• Простой способ реализовать возможности панорамирования / масштабирования - настроить RenderTransform самого внешнего элемента управления в области панорамирования / масштабирования. Существует много различных способов реализации элементов управления для панорамирования и масштабирования, например, вы можете использовать кнопки и ползунки панели инструментов, полосы прокрутки, колесо мыши, пробел + перетаскивание для панорамирования, перетаскиваемые области самого пользовательского интерфейса панорамирования или любую их комбинацию. Какой бы интерфейс вы ни выбрали, просто обновите RenderTransform соответствующим образом из кода, и все готово.

• Если выбранный вами механизм панорамирования - полосы прокрутки, вы можете использовать ScrollViewer и использовать только RenderTransform для масштабирования.

• Убедитесь, что вы установили обрезку в области панорамирования / масштабирования. В противном случае, если вы увеличите или переместите элементы со стороны, они все равно будут видны за пределами области панорамирования / увеличения.

Answer 2

Используйте область MultiScaleImage или Canvas и поместите все, что вам нужно, чтобы перемещаться и увеличивать ее

<Canvas x:Name="panZoomPanel" Background="Transparent">
</Canvas>

В коде используйте команды TranslateTransform и ScaleTransform в TransformGroup для панорамирования и масштабирования

Проверьте другие ТАК или этот пример или этот

Answer 3

Как правило, вы можете обрабатывать любой составной набор элементов пользовательского интерфейса так же, как вы бы относились к одному элементу UIE, поэтому случай с изображением на самом деле не отличается от того же, что и для всего приложения. Лучший способ обрабатывать масштабирование на основе пользовательского ввода (в отличие от автоматического масштабирования, которое делает Viewbox) - это применение ScaleTransform. Это может быть установлено на родительском элементе высокого уровня, таком как Grid в корне компоновки Window. Для панорамирования вы можете объединить в TranslateTransform или в некоторых случаях использовать ScrollViewer для обработки перемещения представления содержимого.

Answer 4

Одним из действительно простых способов реализации масштабирования в XAML является использование Silverlight ViewBox. Это увеличивает XAML, а не пиксели. Вы можете указать используемое растяжение, и ViewBox будет масштабироваться на основе этого (Fill, None, Uniform и т. Д.). Если вы ищите Silverlight + Viewbox в Google, в Интернете есть отличные посты в блоге Viewbox.

Панорамирование легко осуществляется с помощью аналогичного механизма перетаскивания, и есть также многочисленные посты с инструкциями в блоге по этому вопросу, доступные через Google. Это просто захват событий MouseDown, MouseMove и MouseUp.