window border
Смотреть что такое «window border» в других словарях:
Border-Collie — FCI Standard Nr. 297 Gruppe 1: Hütehunde und Treibhunde (ohne Schweizer Sennenhunde) Sektion 1: Schäferhunde Mit Ar … Deutsch Wikipedia
Border collie — Border Collie … Wikipédia en Français
Border Terrier — Saltar a navegación, búsqueda Border Terrier none País de origen … Wikipedia Español
Border Collie — Saltar a navegación, búsqueda Border Collie Nombres alternativos Collie de la frontera País de origen … Wikipedia Español
Border-Terrier — FCI Standard Nr. 10 Gruppe 3: Terrier Sektion 1: Hochläufige Terrier Ohne Arbeitsprüfung … Deutsch Wikipedia
Window decoration — Window decorations are provided by window managers to improve the usability of a multi windowed desktop. They typically consist of a title bar along the top of each window and a minimal border around the other three sides, although this can often … Wikipedia
Border down — Éditeur Sega Développeur G.Rev Date de so … Wikipédia en Français
Border gateway protocol — Pour les articles homonymes, voir BGP. Pile de protocoles 7 • Application 6 • … Wikipédia en Français
Border Collie — Infobox Dogbreed name = Border Collie image caption =Border Collie Border Collie country = UK Scotland / England fcigroup = 1 fcisection = 1 fcinum = 297 fcistd = http://www.dogdomain.com/FCI/fcistandards/fci 297.htm akcgroup = Herding akcstd =… … Wikipedia
Border Area Development — A policy adopted by the State Law and Order Restoration Council (SLORC) in 1989 after the military government negotiated cease fires with breakaway ethnic components of the Communist Party of Burma. The cease fire groups, of which the largest… … Historical Dictionary of Burma (Myanmar)
Border Princes — Torchwoodbook title=Border Princes number=2 featuring=Jack Harkness Gwen Cooper Owen Harper Toshiko Sato Ianto JonesJames Mayer writer=Dan Abnett publisher=BBC Books isbn=ISBN 978 0 563 48654 1 set between= Ghost Machine and Cyberwoman pages=254… … Wikipedia
WPF: Нестандартное окно
На днях, после долгого перерыва, надо было поработать на WPF, и возникло желание заменить поднадоевший стандартный вид окон Windows 7 на что-нибудь более вдохновляющее, скажем в стиле Visual Studio 2012:
Переходить на Windows 8 ради этого еще не хотелось, как и добавлять в проекты ссылки на метро-подобные библиотеки и разбираться с ними — это будет следуюшим шагом. А пока было интересно потратить вечер и добиться такого результата с минимальными изменениями рабочего кода. Забегая вперед, скажу что результат, как и планировалось, получился довольно чистым: фрагмент следующего кода, если не считать нескольких аттрибутов пропущенных для наглядности, это и есть окно с первого скриншота. Все изменения ограничились заданием стиля.
Дальше я остановлюсь на ключевых моментах и подводных камнях при создания стиля окна. Демонстрационный проект доступен на github’е, если вы захотите поразбираться с исходниками самостоятельно или же просто использовать этот стиль не вдаваясь в подробности.
Основная проблема
WPF не работает с NC-area. NC, она же «Non-client area», она же «не-клиентская часть», она же хром, обрабатывается на более низком уровне. Если вам захотелось изменить какой-то из элементов окна — бордюр, иконку, заголовок или кнопку, то первый совет, который попадается при поиске — это убрать стиль окна и переделать все самому. Целиком.
За всю историю развития WPF в этом отношении мало что изменилось. К счастью, у меня были исходники из старинного поста Алекса Яхнина по стилизации под Офис 2007, которые он писал работая над демо проектом по популяризации WPF для Микрософта, так что с нуля начинать мне не грозило.
В итоге нам надо получить один стиль, и по возможности, без дополнительных контролов: в дереве проекта XAML и код стиля расположились в директории CustomizedWindow, а основное окно в корне проекта.
Мне хотелось избежать добавления новых библиотек в проект, но сохранить возможность легко перенести стиль в другое приложение, что и определило такую структуру.
Создаем стиль
Стиль для окна, как и для любого другого контрола в WPF задается при помощи ControlTemplate. Содержимое окна будет показываться ContentPresenter’ом, а функциональность которую проще сделать в коде c#, подключится через x:Class атрибут в ResourceDictionary. Все очень стандартно для XAML’а.
Сразу же определим кнопки управления окном в стиле Студии 2012. Это будет единственный дополнительный глобальный стиль на случай если потом возникнет желание использовать такие кнопки в приложении.
Нам нужна функциональность обычной кнопки, но с очень примитивной отрисовкой — фактически только фон и содержимое.
Изображения на кнопках проще всего сделать «в векторе». Например, вот так выглядит maximize:
Для текста заголовка используем стандартный шрифт Segoe UI. Единственная особенность здесь — убедиться, что текст отрисован без размытия, иначе заголовок окна будет выглядеть… плохо он будет выглядеть — как во второй строчке на скриншоте.
Кстати, для Path’а на кнопках с той же целью использовался EdgeMode=«Aliased», а
для текста в WPF 4+ появилась долгожданная возможность указать, что отображаться он будет на дисплее, а не на «идеальном устройстве», что и позволило добиться приемлимой четкости на наших неидеальных экранах.
Еще одна интересная особенность связана с «геометрией Windows 7» при распахивании окна на весь экран. Windows жульничает, масштабируя окно так, что бордюр целиком уходит за границу экрана, оставляя на мониторе только клиентскую часть окна. Естественно, что Windows при этом больше не отрисовывает бордюр и для стандартных окон все работает как ожидалось. WPF это никак не отрабатывает и, для таких окон как у нас, есть риск потерять часть изображения или начать рисовать на соседнем мониторе, если он подключен.
Остальные детали менее существенны, но если интересно, добро пожаловать в исходники.
Оживляем окно
.Net 4.0
Помимо реакции на кнопки и иконку, окно должно перемещаться и изменять размер при drag’е за заголовок, за края и уголки. Соответствующие горячие зоны проще всего задать при помощи невидимых контролов. Пример для левого верхнего (северо-западного) угла.
При наличие атрибута Class в ресурсах, методы этого класса можно вызывать просто по имени как обычные обработчики событий, чем мы и воспользовались. Сами обработчики, например MinButtonClick и OnSizeNorthWest, выглядят примерно так:
DragSize далее вызывает WinAPI (исходник) и заставляет Windows перейти в режим измененения размера окна как в до-дотнетовские времена.
.Net 4.5
В 4.5 появились удобные классы SystemCommands и WindowChrome. При добавлении к окну, WindowChrome берет на себя функции изменения размера, положения и состояния окна, оставляя нам более «глобальные» проблемы.
Почти готово. Зададим триггеры для контроля изменений интерфейса при изменении состояния окна. Вернемся в XAML и, например, заставим StatusBar’ы изменять цвет в зависимости от значения Window.IsActive.
Обратите внимание, что этот стиль влияет не на темплэйт окна, а на контролы помещенные в наше окно. Помните самый первый фрагмент с пользовательским кодом?
Вот стиль именно этого StatusBar’а мы сейчас и задали. При желании и времени так же можно задать и стиль для других классов контролов, например подправить ScrollBar, чтобы он тоже соответствовал нужному стилю. Но это уже будет упражнение на следующий свободный вечер.
Собираем все вместе
Все. Нам осталось только подключить стиль к проекту через ресурсы приложения:
И можно использовать его в любом окне.
Все о свойстве border
Основы
Всем знакомо такое использование:
Это однопиксельная сплошная рамка. Немного меняем синтаксис:
Например у параметра border-width есть три параметра: thin, medium, thick: 
Если необходимо менять цвет границы при наведении на объект:
Но так это реализовать проще и правильнее:
Border-Radius
border-radius — это новый параметр CSS3 для отображения закругленных углов, который корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий). 
Для каждого угла можно назначить свое закругление:
В приведенном примере необязательно назначать «0» border-top-right-radius и border-bottom-left-radius, если они не наследуют значения, которые должны быть изменены.
Всю конструкцию можно сжать в одну строку:
А вот как можно нарисовать лимон средствами CSS:
Здесь описаны самые простые и популярные примеры применения параметра border. Перейдем к более сложным.
Несколько границ
Border-Style
solid, dashed, and dotted — самые популярные значения параметра border-style, но давайте рассмотрим другие, например, groove and ridge.
Или более подробно:
Outline
Самый популярный способ создания двойной границы — это параметр outline:
Этот способ отлично работает, но ограничен созданием двойной рамки. Если вам необходимо отобразить несколько границ элемента, то необходимо использовать другую технику.
Псевдоэлементы
Можно использовать такую конструкцию:
Возможно это не самое элегантное решение, однако оно работает
Box-Shadow
Еще один способ, с применением теней:
Изменение углов
К параметру border-radius можно применять два значения, используя «/», например:
Это то же самое, что:
Эта техничка бывает полезна, если необходимо имитировать искривление, а не закругление. Например, так можно получить эффект скрученной бумаги:
CSS фигуры
В следующих примерах предполагается такая разметка:
И такой базовый css:
Наиболее частым примером использования CSS фигур является отображение стрелок. Чтобы понять, как это работает, необходимо разобраться с использованием отдельного border-color для каждой стороны и установкой значения «0» для width и height:
А теперь оставляем только синий треугольник:
Создание Speech Bubble
Наша базовая разметка:
Теперь нужно расположить стрелку-треугольник в нужном месте. Вот наш цветной квадратик:
Оставляем только четверть квадратика:
Теперь перемещаем ниже и закрашиваем:
Примеры применения:
Вертикальное центрирование текста
минус использования line-height при вертикальном центрировании в ограничении текста одной строкой. Для решения этой проблемы, можно применить display: table к нашему Speech Bubble и display: table-cell к тексту:
Еще один пример нестандартного использования границ:
window border
Смотреть что такое «window border» в других словарях:
Border-Collie — FCI Standard Nr. 297 Gruppe 1: Hütehunde und Treibhunde (ohne Schweizer Sennenhunde) Sektion 1: Schäferhunde Mit Ar … Deutsch Wikipedia
Border collie — Border Collie … Wikipédia en Français
Border Terrier — Saltar a navegación, búsqueda Border Terrier none País de origen … Wikipedia Español
Border Collie — Saltar a navegación, búsqueda Border Collie Nombres alternativos Collie de la frontera País de origen … Wikipedia Español
Border-Terrier — FCI Standard Nr. 10 Gruppe 3: Terrier Sektion 1: Hochläufige Terrier Ohne Arbeitsprüfung … Deutsch Wikipedia
Window decoration — Window decorations are provided by window managers to improve the usability of a multi windowed desktop. They typically consist of a title bar along the top of each window and a minimal border around the other three sides, although this can often … Wikipedia
Border down — Éditeur Sega Développeur G.Rev Date de so … Wikipédia en Français
Border gateway protocol — Pour les articles homonymes, voir BGP. Pile de protocoles 7 • Application 6 • … Wikipédia en Français
Border Collie — Infobox Dogbreed name = Border Collie image caption =Border Collie Border Collie country = UK Scotland / England fcigroup = 1 fcisection = 1 fcinum = 297 fcistd = http://www.dogdomain.com/FCI/fcistandards/fci 297.htm akcgroup = Herding akcstd =… … Wikipedia
Border Area Development — A policy adopted by the State Law and Order Restoration Council (SLORC) in 1989 after the military government negotiated cease fires with breakaway ethnic components of the Communist Party of Burma. The cease fire groups, of which the largest… … Historical Dictionary of Burma (Myanmar)
Border Princes — Torchwoodbook title=Border Princes number=2 featuring=Jack Harkness Gwen Cooper Owen Harper Toshiko Sato Ianto JonesJames Mayer writer=Dan Abnett publisher=BBC Books isbn=ISBN 978 0 563 48654 1 set between= Ghost Machine and Cyberwoman pages=254… … Wikipedia
window border
Смотреть что такое «window border» в других словарях:
Border-Collie — FCI Standard Nr. 297 Gruppe 1: Hütehunde und Treibhunde (ohne Schweizer Sennenhunde) Sektion 1: Schäferhunde Mit Ar … Deutsch Wikipedia
Border collie — Border Collie … Wikipédia en Français
Border Terrier — Saltar a navegación, búsqueda Border Terrier none País de origen … Wikipedia Español
Border Collie — Saltar a navegación, búsqueda Border Collie Nombres alternativos Collie de la frontera País de origen … Wikipedia Español
Border-Terrier — FCI Standard Nr. 10 Gruppe 3: Terrier Sektion 1: Hochläufige Terrier Ohne Arbeitsprüfung … Deutsch Wikipedia
Window decoration — Window decorations are provided by window managers to improve the usability of a multi windowed desktop. They typically consist of a title bar along the top of each window and a minimal border around the other three sides, although this can often … Wikipedia
Border down — Éditeur Sega Développeur G.Rev Date de so … Wikipédia en Français
Border gateway protocol — Pour les articles homonymes, voir BGP. Pile de protocoles 7 • Application 6 • … Wikipédia en Français
Border Collie — Infobox Dogbreed name = Border Collie image caption =Border Collie Border Collie country = UK Scotland / England fcigroup = 1 fcisection = 1 fcinum = 297 fcistd = http://www.dogdomain.com/FCI/fcistandards/fci 297.htm akcgroup = Herding akcstd =… … Wikipedia
Border Area Development — A policy adopted by the State Law and Order Restoration Council (SLORC) in 1989 after the military government negotiated cease fires with breakaway ethnic components of the Communist Party of Burma. The cease fire groups, of which the largest… … Historical Dictionary of Burma (Myanmar)
Border Princes — Torchwoodbook title=Border Princes number=2 featuring=Jack Harkness Gwen Cooper Owen Harper Toshiko Sato Ianto JonesJames Mayer writer=Dan Abnett publisher=BBC Books isbn=ISBN 978 0 563 48654 1 set between= Ghost Machine and Cyberwoman pages=254… … Wikipedia