Ласкаво просимо до dev.net.ua Увійти | Приєднатися | Допомога

Helen

designer for developers

Новини

Полезные ссылки

Почему я люблю Border и Rectange

В общем-то, два простых элемента. Border – элемент компоновки, контейнер. Rectangle –прямоугольная форма. Часто, из-за своей простоты, один или другой элемент используется в качестве фона, подложки или рамочки. Изменение значения свойства Visibility или Opacity такого элемента в различных состояниях (MouseOver, Pressed, Focused, etc) создает эффект подсветки.

Что ж, давайте посмотрим на различия и особенности применения того или иного элемента в определенных случаях. Возьмем две базовые кнопки, визуально идентичные, но в одной из них для фона и подсветки используется Border, а в другом – Rectangle.

1

2

 

3

Общие особенности

В обоих случаях у основного элемента x:Name="BgNormal", отвечающего за визуальное отличие в состоянии Normal, можно сделатьTemplate Binding на фон и очерчивание. Хоть и имена свойств разные, но суть от этого не меняется.

Border
BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"

Rectangle
Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"

С толщиной очерчивания дело обстоит немного сложнее.

Border
BorderThickness="{TemplateBinding BorderThickness}"

Rectangle
Завязаться на Template Binding не получится, но тем не менее можно просто задать StrokeThickness="0" или любое другое значение.

Различия

А теперь самое интересное. Каждый элемент обладает рядом своих уникальных свойств, которыми можно воспользоваться для достижения различных визуальных эффектов.

Скругление

Border

Свойство CornerRadius. Заданное значение позволяет скруглить все уголки.

4

Либо задать скругление для каждого из 4-х, например, CornerRadius="7,0,7,0" создаст такое закругление:

5

Rectangle

Одновременного эффекта скругления, наподобии свойства CornerRadius у Border позволят создать такие свойства Recrangle, как  RadiusX="7" RadiusY="7"

6

Скруглить только один уголок не удасться, но зато можно добиться другого результата – задать разные значения RadiusX="7" RadiusY="15". Это будет выглядеть вот так. Странный вид, скажем так, на любителя Smile 

7

Тип очерчивания

Border
Если задать BorderThickness у Border, то всего чего вы можете добиться в плане типа очерчивания – так это обычная линия. Никаких шрихпунктиров или тому подобного.

8

Rectangle
У Rectangle же открывается большое поле для экспериментов.  Раскрыв список Advanced Properties сразу после StrokeThickness, можно например задать массив из точек и интервалов, создав равномерную штрихпунктирную линию либо хаотичную.

9

StrokeDashArray="4 4" будет выглядеть так

10

а при StrokeDashArray="4 4 1 4" и толщине StrokeThickness="2" вот так

11

При StrokeThickness более 2 становится заметно скругление самих точек в шрихпунктире

12
Вот такой эффект можно получить если задать StrokeDashArray="0 1.5" StrokeDashCap="Round" StrokeThickness="2"

Толщина очерчивания

Border
У Border можно задать разные толщины для каждой отдельной границы – левой, правой, верхней,  нижней. В итоге можно легко добиться следующего эффекта, всего лишь задав BorderThickness="5,0,0,0"

13

Rectangle
У Rectangle толщина очерчивания задается сразу для всех, например, StrokeThickness="1".

Вложенность

Border
Главное преимущество Border – это то, что он является контейнером. Это значит что внутрь мы можем положить еще один Border, элемент или еще один контейнер и так до бесконечности. В связи с этим можно создавать, например, эффекты из наружных и внутренних границ или поместить внутрь Grid с колонками, в одной из которых находится иконка, а в соседней располагается контент для кнопки.

15

14

Эксперименты с разной толщиной границ и вложенностью дают свои результаты – расположение кнопок одна за одной в Toolbar-e.

16

Rectangle
Так как Rectangle – не контейнер, то в него вложить ничего не получится.

В итоге хочу сказать, что в большинстве случаев для создания простых прямоугольных форм и изменения фона для различных состояний я все-же отдаю предпочтение Border-у. Но как показывают примеры выше, у Rectangle есть свои индивидуальные точки применения.

Если у Вас есть свои интересные способы использования того или иного элемента, то буду рада услышать.

Caramel theme v2

Пару лет назад (как же давно это было) я сделала выпуск с карамельной темой. Пришло время дать им новую жизнь и выпустить обновление. В составе второй версии произошли следующие изменения:

Разделение на отдельные файлы-ресурсы

Все цвета, тени и общие отступы для контролов вынесены в файл Colors.xaml Кроме того, теперь каждому контролу соответствует отдельный файл с одноименным названием. Каждый файл залинкован на Colors.xaml (не забудьте его!).

1

Новая верстка

XAML-код для всех контролов был полностью переписан. Стеклянный эффект оптимизирован для растяжения по вертикали и горизонтали

2

Удобные имена для цветов

В именах цветовых ресурсов произошло переименование, теперь названия без акцента на цветовую привязку.

Смещение акцентов

Изменены состояния контролов таким образом, что только кнопки, табы, заголовки имеют выпуклый стеклянный эффект. Подсветка полей ввода и выбора по умолчанию плоская и выделяется также цветом, а не только границами.

3

Стиль скроллингов

Было решено избавиться от кнопок вверх-вниз в виде стрелочек, оставив только сам ползунок скроллинга. Ширина вертикального скроллинга и высота горизонтального была также уменьшена почти в два раза, чтобы не занимать полезное пространство. Фон скроллинга стал более плоский.

4 

Компактность

Вообще все контролы стали более компактными, начиная от чекбокса, кнопок и заканчивая прогресс-баром. Убраны все лишние элементы и пространство.

Высота строки

Для всех типовых элементов ввода (TextBox, PasswordBox, ComboBox, ListBox), кнопок сделана общая высота строки в 24 пикселя. Теперь смотрится все гораздо ровнее. И кнопку можно разместить рядом с полем ввода, не боясь что она будет больше.

Стандартные отступы

Для всех контролов добавлен ресурс MarginDefault в размере 3 пикселя, дабы не мучаться с выставлением отступов при размещении в гриде и прочих элементах компоновки.

6

Фокус

Более продуманная фокусировка на элементах. Темный цвет обводки контролов ушел с состояния Normal и перешел в  Focused.

8

Новые контролы

Ну и конечно же, не помешало добавить в выпуск чего-то новенького. На этот раз в сборку попали элементы DatePicker и TabControl. Пополнение ожидается.

5

7

Посмотреть демо

Скачать проект с темой

Оригинал публикации

Microsoft Expression Blend for HTML

Наверное многие из вас уже слышали про Microsoft Expression Blend 5 Developer Preview для создания приложений с использованием HTML, CSS, JavaScript. При чем акцент делается именно на том, что данный продукт предназначен для создания интерфейсов приложений под Windows 8, и в частности в новом Metro-стиле. Предварительная версия инструментария доступна как часть Windows Developer Preview. Если хотите поэкспериментировать и попробовать создать что-то самостоятельно или пройтись по готовому примеру, то можно начать со следующего: 

 

1

Также дополнительно можно ознакомиться со следующими записями:

Magic Backgrounds for Windows Phone

Решила поделиться небольшим набором цветных фонов для панорамных приложений Windows Phone. Все варианты хорошо смотрятся с базовыми черным текстом и почти все – с белым (исключение составляет желтый фон).

1

PanoramaBackground1 PanoramaBackground2

PanoramaBackground3 PanoramaBackground4

PanoramaBackground5 PanoramaBackground6

Загрузить Magic Backgrounds в одном архиве

Загрузить тестовое приложение Windows Phone Panorama c включенными Magic Backgrounds 

Как создать панорамное приложение для Windows Phone?

При установленных Windows Phone SDK (Windows Phone Developer Tools) и Expression Blend 4, создаем в последнем новый проект для Windows Phone и выбираем тип проекта - Windows Phone Panorama Application.

2

Expression Blend автоматически добавляет на страничку элемент управления Panorama с несколькими элементами и тестовыми данными.

3

Как установить свой фон для панорамы?

Выбираем на панели Objects and Timeline элемент Panorama.

4

На панели Properties в категории Brushes выбираем горизонтальную закладку Background и меняем фон, выбрав соответствующий из списка ImageSource. Можно также добавить в проект новый. Дополнительно поэкспериментируйте с свойством Stretch. Оптимально подходит установленное значение UniformToFill.

Ссылки по теме доклада “Прототипируем приложения для Windows Phone”

На встрече киевской .NET User Group в субботу 24 сентября 2011 г. мы создавали прототип небольшого приложения “Kyiv .NEt User Group”, целью которого было отобразить данные, отвечая на вопросы What? When? Where?, а в деталях – список докладов с подробностями, дату/время проведения и карту. В начале доклада каждый попробовал для себя старый добрый метод прототипирования -  “карандаш-бумага”, в результате чего мы выделили наиболее удачный сценарий.

Кто хочет повторить для себя данный процесс, можно взять готовые образцы c шаблонами телефона в формате pdf, распечатать их и попробовать порисовать:

После того как бумажный прототип готов, можно приступить к созданию динамического прототипа с помощью SketchFlow.  Какие инструменты могут вам понадобиться для создания прототипа, а в последствии и реального приложения?

  • Expression Blend + SketchFlow + Visual Studio 2010
  • Windows Phone SDK (Windows Phone Developer Tools)
  • SketchFlow Template v1 wp7sketchflow.codeplex.com  - устанавливается из файла msi, автоматом добавляет шаблон на страницу нового проекта в Expression Blend
  • SketchFlow Template v2 cut.ms/bn5M  - просто архив с шаблоном проекта, который необходимо распаковать в папку c:\users\[username]\Documents

1

Из двух шаблонов SketchFlow для  WP, мне больше нравится первый с сайта codeplex, но для сравнения Вы можете попробовать оба.

2  3

После создания проекта в разделе Categories/Mockups можно найти разнообразные скетчевые элементы управления и заготовки. Начать можно с добавления элементов Panorama или Pivot.

4

Если вдруг кроме стандартных App icons Вам понадобятся дополнительные иконки, то рекомендую ознакомится с списком разнообразных наборов

Ну и конечно же, неотъемлемой частью тестирования прототипа будет SketchFlow Player, который позволит вам переходить по страничкам приложения, а также за его пределы (Home, Search, AppList).

5

В дополнение, отметим что прототип в плеере можно тестировать в режимах Portrait, Landscape.

Удачных прототипов!

Wallpapers: Start with Expression Blend

Новые обои с Expression Blend в цветовом решении из Windows 8:

Blend_preview

1280x800

1440x900

1680x1050

1920x1200

Blend preview for Silverliht 5 RC

После выхода Silverlight 5 RC, не заставил себя долго ждать и Blend preview for Silverliht 5 RC, который можно загрузить с http://www.microsoft.com/download/en/details.aspx?id=9503

1

Данная среда предназначена для создания проектов Silverlight 5, включая и Silverlight 5 SketchFlow. И только 5 версии. Для проектов на 3 и 4 версиях Silverlight – предлагается остаться с Expression Blend 4. Среды разных версий также, как и раньше, устанавливаются и работают независимо друг от друга.

"Mix" Silverlight, Expression, Windows Phone 7: Скидки 50% на книги

1В контексте проведения конференции MIX11,
Microsoft Press и O'Reilly Media предлагают скидки в размере 50%
на следующие книги в электронных форматах:

 

  • HTML5 Step by Step
  • Microsoft XNA Game Studio 4.0
  • JavaScript Step by Step, Second Edition
  • Microsoft Expression Blend 4 Step by Step
  • Microsoft Expression Web 4 Step by Step
  • Microsoft Silverlight 4 Step by Step
  • Microsoft Silverlight Edition: Programming Windows Phone 7
  • Microsoft XNA Framework Edition: Programming Windows Phone 7
  • Windows Phone 7 Developer Guide
  • Windows Communication Foundation 4 Step by Step

Детальнее на сайте oreilly.com

Используйте при покупке код DDM5D

Ответы на вопросы: Bold для заголовка в TabItem

Снова пост-ответ на вопросы.

Вопрос: Как сделать текст в заголовке TabItem жирным и чтобы при этом он изменял свой цвет при наведении мышки?

Ответ: Рассмотрим изменение копии шаблона для текстового заголовка TabItem, в котором присутствует данное поведение. В этом и заключается ответ на вопрос.

Примечание: Мы будем работать с копией шаблона, так как остальное стандартное поведение и установленные свойства элементов TabItem нас устраивают.

1. Добавим TabControl с тремя элементами TabItem в корневой контейнер LayoutRoot.

1

2. Выделив второй элемент TabItem с названием “Second” в панели Objects & Timeline, отредактируем копию его шаблона.

2

3. Так как необходимое поведение требуется для всех элементов TabItem в приложении, выберем опцию Apply to all и разместим ресурс на уровне приложения.

3

4.  Изменим содержимое ControlTemplate для нашего случая. Необходимо заменить ContentPresenter на текстовый блок с заданными свойствами.

4

5. Меняем в режиме Split view ContentPresenter на TextBlock, убираем свойства ContentSource="Header" и RecognizesAccessKey="True".

5

6. В категории Common Properties панели Properties для выделенного элемента TextBlock сделаем Template Binding: свойства Text к Header, восстановив таким образом вводимое пользователем значение для заголовка TabItem:

6

7

7. Теперь можно задать жирное начертание для текстового блока.

8

8.  Теперь дело за цветом при наведении мышки. Активизируем панель States.

9

9. Выбираем состояние MouseOver из группы CommonStates и выбираем экспериментальным путем новое значение цвета для свойства Foreground нашего элемента:

10

10. Переключаемся в режим Base и можно тестировать поведение нашего TabItem:

11

Текст в заголовках приобрел жирное начертание и при наведении мышки он становится бирюзовым.

Эти простые стили и ресурсы

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

Давайте рассмотрим несколько примеров простых стилей для элементов, находящихся в контейнере Grid.

Стиль для текстового блока

Возьмем для начала текстовый блок (как метку), относящуюся к текстовому полю для ввода. Самый простой пример – это блок логина.

<Grid x:Name="LoginForm">
	<Grid.RowDefinitions>
		<RowDefinition />
		<RowDefinition />
		<RowDefinition />
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="0.4*" />
		<ColumnDefinition Width="0.6*" />
	</Grid.ColumnDefinitions>
	<TextBlock  Text="Username" />
	<TextBlock  Text="Password" Grid.Row="1" />					
	<TextBox x:Name="textBox" Grid.Column="1"/>					
	<PasswordBox Grid.Column="1"  Grid.Row="1"/>
	<Button Content="Log In"  Grid.Row="2" Grid.Column="1" />
</Grid>

В зависимости от свойств родительского контейнера, этот элемент визуально в приложении может выглядеть так:

1

Мягко говоря, все смешалось в кучу, а точнее выглядит очень даже “ugly”. Для того чтоб привести в порядок это безобразие, начнем с создания стиля для текстового блока.

1. Выделяем текстовый элемент, нажимаем правую кнопку, выбираем Edit Style – > Create Empty.

2

2. так как вряд ли в нашем приложении текстовые блоки будут использоваться только как метки для текстовых полей, то создаем индивидуальный стиль “TextBlockInGrid” и размещаем его в Application.

3

3. Теперь, попав в режим редактирования стиля, можно приступить к внешним изменениям текстового блока. Задаем шрифт и его размер.

4

4. Выносим эти параметры в отдельные ресурсы, нажав на кнопку advanced options, и затем Convert to New Resource.

5

Называем ресурс для размера шрифта FontSizeNormal, размещаем его в Application.

6 

Аналогично делаем для семейства шрифта – FontFamilyNormal. В результате визуально эти два свойства будут завязаны на созданные локальные ресурсы.

7

5. Также выставляем отступы Margin – все значения по 5, и преобразовываем их в ресурс MarginToGrid.

8

6. На этом базовые приготовления закончены, поэтому возвращаемся для работы в наш корневой документ через панель Object & Timeline.

9

7. Выделяем второй текстовый блок и применяем к нему созданный стиль.

10

Стиль текстового поля для ввода

Выделяем теперь текстовое поле для ввода и в меню Object выбираем Edit Style – > Create Empty. Задаем ему имя TextBoxInGrid, размещаем в Application.

Для Margin –используем ресурс MarginToGrid, для размера текста FontSizeNormal и для семейства шрифта – FontFamilyNormal. Задаем еще свойство минимальной ширины и конвертируем его в ресурс FieldMinWidth.

11

Возвращаемся для работы в наш корневой документ через панель Object & Timeline.

Получившийся стиль:

<Style x:Key="TextBoxInGrid" TargetType="TextBox">
	<Setter Property="Margin" Value="{StaticResource MarginToGrid}"/>
	<Setter Property="MinWidth" Value="{StaticResource FieldMinWidth}"/>
	<Setter Property="FontSize" Value="{StaticResource FontSizeNormal}"/>
	<Setter Property="FontFamily" Value="{StaticResource FontFamilyNormal}"/>
</Style>

Стиль поля пароля

Аналогично для поля пароля делаем стиль PasswordInGrid, с теми же привязками как и для текстового поля для ввода.

Получившийся стиль:

<Style x:Key="PasswordInGrid" TargetType="PasswordBox">
	<Setter Property="MinWidth" Value="{StaticResource FieldMinWidth}"/>
	<Setter Property="FontSize" Value="{StaticResource FontSizeNormal}"/>
	<Setter Property="FontFamily" Value="{StaticResource FontFamilyNormal}"/>
	<Setter Property="Margin" Value="{StaticResource MarginToGrid}"/>
</Style>

Стиль кнопки

Стиль для кнопки – ButtonInGrid – те же привязки, с добавление только нового свойства – горизонтального выравнивания и занесением его в ресурс ButtonAlignment.

<Style x:Key="ButtonInGrid" TargetType="Button">
	<Setter Property="Margin" Value="{StaticResource MarginToGrid}"/>
	<Setter Property="FontSize" Value="{StaticResource FontSizeNormal}"/>
	<Setter Property="FontFamily" Value="{StaticResource FontFamilyNormal}"/>
	<Setter Property="HorizontalAlignment" Value="{StaticResource ButtonAlignment}"/>
</Style>

 

Итого:

Файл ресурсов:

<Application
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:System="clr-namespace:System;assembly=mscorlib"
	x:Class="SimpleStyles.App">
	<Application.Resources>
		<!-- Resources scoped at the Application level should be defined here. -->		
		<System:Double x:Key="FontSizeNormal">12</System:Double>
		<FontFamily x:Key="FontFamilyNormal">Segoe UI</FontFamily>
		<Thickness x:Key="MarginToGrid">5</Thickness>
		<System:Double x:Key="FieldMinWidth">120</System:Double>
		<HorizontalAlignment x:Key="ButtonAlignment">Left</HorizontalAlignment>
		<Style x:Key="TextBlockInGrid" TargetType="TextBlock">
			<Setter Property="FontFamily" Value="{StaticResource FontFamilyNormal}"/>
			<Setter Property="FontSize" Value="{StaticResource FontSizeNormal}"/>
			<Setter Property="Margin" Value="{StaticResource MarginToGrid}"/>
		</Style>		
		<Style x:Key="TextBoxInGrid" TargetType="TextBox">
			<Setter Property="Margin" Value="{StaticResource MarginToGrid}"/>
			<Setter Property="MinWidth" Value="{StaticResource FieldMinWidth}"/>
			<Setter Property="FontSize" Value="{StaticResource FontSizeNormal}"/>
			<Setter Property="FontFamily" Value="{StaticResource FontFamilyNormal}"/>
		</Style>
		<Style x:Key="PasswordInGrid" TargetType="PasswordBox">
			<Setter Property="MinWidth" Value="{StaticResource FieldMinWidth}"/>
			<Setter Property="FontSize" Value="{StaticResource FontSizeNormal}"/>
			<Setter Property="FontFamily" Value="{StaticResource FontFamilyNormal}"/>
			<Setter Property="Margin" Value="{StaticResource MarginToGrid}"/>
		</Style>		
		<Style x:Key="ButtonInGrid" TargetType="Button">
			<Setter Property="Margin" Value="{StaticResource MarginToGrid}"/>
			<Setter Property="FontSize" Value="{StaticResource FontSizeNormal}"/>
			<Setter Property="FontFamily" Value="{StaticResource FontFamilyNormal}"/>
			<Setter Property="HorizontalAlignment" Value="{StaticResource ButtonAlignment}"/>
		</Style>
	</Application.Resources>
</Application>

Всего 28 строк для стилей и ресурсов и довольно таки значительная универсализация.

Блок разметки:

<Grid x:Name="LoginForm">
	<Grid.RowDefinitions>
		<RowDefinition />
		<RowDefinition />
		<RowDefinition />
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="0.4*" />
		<ColumnDefinition Width="0.6*" />
	</Grid.ColumnDefinitions>
	<TextBlock  Text="Username" Style="{StaticResource TextBlockInGrid}" />
	<TextBlock  Text="Password" Grid.Row="1" Style="{StaticResource TextBlockInGrid}" />					
	<TextBox x:Name="textBox" Grid.Column="1" Style="{StaticResource TextBoxInGrid}" />					
	<PasswordBox Grid.Column="1"  Grid.Row="1" Style="{StaticResource PasswordInGrid}" />
	<Button Content="Log In"  Grid.Row="2" Grid.Column="1" Style="{StaticResource ButtonInGrid}" />					
</Grid>

 

Внешний вид: намного аккуратнее, стили и ресурсы можно использовать для других подобных элементов, расположенных в контейнере Grid.

13

P.S. Как штрих-дополнение, можно в стиль текстового блока добавить вертикальное выравнивание по центру.

Исходный проект

Expression Pattern Library

Если вдруг кто-то пропустил интересную коллекцию “Pattern Library” из “Expression Gallery”, то советую сюда заглянуть. Возможно в этой небольшой, но пополняемой библиотеке примеров “XAML + code” вы найдете интересные идеи для своих проектов, а может даже и опубликуете какие-то свои наработки или образцы, которые тоже могут кому-то помочь.

 1 Сейчас доступны следующие подкатегории:

  • Backgrounds and Blends
  • Buttons
  • Calendars and Time
  • Charts, Graphs, and Gauges
  • Forms and Dialogs
  • Indicators
  • Layout
  • Lists
  • More Patterns
  • Navigation
  • Pagination
  • Ratings
  • Touch and Gestures
  • Transitions
  • Windows Chrome
Arrow Buttons

Представляю небольшой наборчик масштабируемых кнопок-стрелочек в 4 стилях: ArrowLight, ArrowDark, ArrowLightColor, ArrowDarkColor. Кнопки в стиле стрелочек можно применять для различных случаев: управление прокруткой галереи изображений, переход на новые страницы приложения, отображение детальной информации, можно даже в уменьшенном варианте использовать как стрелки для скроллинга списков и т.д.

1

Описание стилей:

ArrowLight

Использует для фона кнопки всего один цвет, который можно задать в качестве свойства Background="White". Состояния изменяются за счет увеличения-уменьшения прозрачности и/или отображением белой тени. Стиль идеален для расположения на темных или ярких поверхностях.

ArrowDark

Использует для фона кнопки всего один темный/яркий цвет, который можно задать в качестве свойства Background. Например Background="#FFFCCE56". Состояния изменяются за счет увеличения-уменьшения прозрачности и/или отображением серой тени. Стиль идеален для расположения на белой или светлых поверхностях.

ArrowLightColor

Для фона кнопки используется два цвета, за счет указания свойства Background передается цвет в состоянии Normal, а свойства Foreground – в состоянии MouseOver. (Для примера White и #FF269B7B). Состояния изменяются за счет увеличения-уменьшения прозрачности обоих цветов и/или отображением белой тени. Стиль идеален для расположения на темных или ярких поверхностях. В качестве цвета для наведения рекомендуется использовать более темные оттенки фона, на котором располагается кнопка.

ArrowDarkColor

Для фона кнопки используется два цвета, за счет указания свойства Background передается цвет в состоянии Normal, а свойства Foreground – в состоянии MouseOver. (Для примера #FF269D7B и #FFFCCE56). Состояния изменяются за счет увеличения-уменьшения прозрачности обоих цветов и/или отображением серой тени. Стиль идеален для расположения на белой или светлых поверхностях. В качестве цветов для двух состояний рекомендуется использовать яркие, противоположные цвета.

Материалы:

WP7 MINI icons

Как-то попросили создать инвертированный набор иконок SNA MINI. Меня также посетила мысль что эти иконки очень даже в стиле “METRO” и подходят для разработки приложений под WP7. Поэтому немного доработанная версия получила название “WP7 MINI”. Набор использует новые размеры 48x48 .png как и WP7 Application Bar Icons и поставляется в двух цветовых темах dark и light. Expression Design file с нарезкой также прилагается.

WP7_mini

Ответы на вопросы: Лишняя колонка в DataGrid

Возможно эти небольшие заметки помогут кому-то при поиске ответов на казалось бы простые и часто возникающие вопросы.

Вопрос: как убрать пустую последнюю колонку в DataGrid?

Детально: Если DataGrid занимает всю доступную ширину пространства, а кол-во колонок и контента в них по ширине не превышает ширину DataGrid, то появляется пустая “лишняя” колонка справа.

1

Ответ:

1 вариант. Необходимо явно задать пропорциональную ширину колонок, чтоб в сумме они давали 100%.

2

<sdk:DataGridTextColumn Binding="{Binding Number}" Header="Number" Width="0.2*"/>
<sdk:DataGridTextColumn Binding="{Binding Name}" Header="Name" Width="0.3*"/>
<sdk:DataGridTextColumn Binding="{Binding Company}" Header="Company" Width="0.5*"/>

2 вариант. Когда неизвестно кол-во и необходимая ширина колонок, то достаточно задать ширину только для последней колонки Width="*".

3

Визуально это можно также сделать, выбрав необходимую колонку-элемент в панели Objects & Timeline и в категории Layout панели Properties для ширины выбрать из списка значение Star.

4

Примечание: для WPF работает тот же принцип. Только визуально для ширины необходимо выставить *, так как выпадающего списка нет.

5

Microsoft Expression Blend 4 Step by Step

mebsbs Идея написать свою книгу в мыслях была давно. О дизайне интерфейсов, о продуктах Microsoft Expression … В этом году мне в некотором смысле удалось осуществить эту задумку. И сегодня я хочу сделать небольшой анонс своей первой книги - Microsoft® Expression Blend 4 Step by Step, которая, как я надеюсь, выйдет этот осенью.

Для кого эта книга?

Как вы догадались, серия “Step by Step” наилучшим образом подходит тем, кто еще не знаком с Expression Blend 4, либо желает расширить свои знания и познакомиться с возможностями 4-ки. Также  акцент сделан на начинающих RIA дизайнеров, на дизайнеров, работающих с продуктами Adobe, но еще не знакомых с Expression, и разработчиков, которые хотят для себя открыть проектирование интерфейсов в дизайнерской среде. С самого начала, шаг за шагом, Вы сможете освоить Microsoft® Expression Blend 4 по этой книге.

Что в книге?

Общее знакомство с интерфейсом продукта, основы XAML и представление о C#, прототипирование с помощью SketchFlow, скиннинг элементов управления, работа с данными, использование поведений и много других интересных моментов.

Авторы

Также мне хотелось бы представить вам моего соавтора и замечательного друга. Chris Leeds является Microsoft MVP: Expression Web и также известен как автор книг по Microsoft Expression Web.

Язык издания

Книга издается на английском языке

Предзаказать книгу Microsoft® Expression Blend 4 Step by Step можно на Amazon.com.

 

С уважением,
Алена Косинская
UX designer
Microsoft MVP: Expression Blend

Більше повідомлень Наступна сторінка »