Добрый день.
Для меня, моя жизнь как программиста, делится на два этапа. До того как я познакомился с WPF, и после. Мне пришлось очень плотно работать с этой технологией в рамках одного проекта, в результате чего я приобрёл некоторые знания, которыми хочу с вами поделиться. То что написано ниже, не откровения, и для тех кто знаком с WPF может показаться банальностью. Всё это описано в сети, в том или ином виде, проще или сложнее, но есть у всех этих описаний одна особенность — английский язык. Поэтому я приведу ниже очень короткий, но как мне кажется ёмкий пример того, что можно сделать при помощи Data Templates. Особенно этот пример будет интересен тем, кто только посматривает в сторону WPF.
Вот такой вот короткий файлик.
Не знаю как вам, но мне кажется, что для такого количества «текста» он делает очень много. Если вы сохраните этот код и откроете его в XAMLPad(можно и просто при помощи IE), вы увидите погоду в моём городе с gismeteo.ru. Как вы можете заметить при этом не написано ни строчки компилируемого или скриптового кода. Попробую объяснить, что и как.
Ну вначале всё ясно, создали мы грид(правда он не совсем вначале), в который будем помещать наши визуальные элементы. Поместили в него листбокс а вот дальше начинается магия. В лист бокс как бы надо поместить что-то. Вот это что-то, надо где-то взять. Погоду естественно можем взять с rss ленты gismeteo. Для этого создадим в ресурсах грида XmlDataProvider:
натравим его на нужную ленту, и укажем путь к элементу, который мы хотим представить в виде данных. В данном случае это rss лента погоды в моём городе. После этого заглянем в исходник rss ленты и увидим, что там данные о погоде представлены в виде набора элементов <item>. Вот и попробуем вставить эти данные в листбокс:
указав в качестве источника элементов байндинг на наш XmlDataProvider и задав для выборки тег item. Смотрим что получилось — О!.. Мы уже получили в нашем листбоксе, содержимое элементов <item>. Теперь, хотелось бы увидеть их в удобочитаемом виде. Нет ничего проще. Нам всего лишь нужно создать DataTemplate для типа данных item:
Тут мы создали визуальные элементы которые будут отображать содержимое элемента <itеm> и при помощи байндингов и запросов XPath сопоставили им соответствующие теги элемента <item>. Для этого мы создали контейнер StackPanel, и в него последовательно сложили три вещи — тектовый блок отображающий титул погодного элемента, тектовый блок с детальным описанием погоды, и картинку, соответвующюю нашему прогнозу. Всё, наслаждаемся прогнозом погоды в моём(вашем) городе :)
Если описать это русским языком — мы декларативно описали три вещи
1. Источник данных
2. Объект, для отображения этих данных.
3. То как, эти данные будут выглядеть.
Самый важный пункт из этих трёх, как мне кажется — третий. Вся его важность заключается в том, что мы не писали никаких алгоритмов, ифов, форов, свитчей итд, для того чтобы преобразовать внешний вид наших данных в удобоваримый для пользователя. Мы просто рассказали, как мы хотим их видеть.
UPD. В комментариях подсказывают что в IE не работает:( я делал этот файлик давно, и тогда в IE всё открывалось нормально, по всей видимости дело в настройках безопастности, с наскоку я не нашёл:( Если вам просто интересен результат — в комментариях приведен скриншот, если же хотите поиграть с кодом то лучше всего использовать www.kaxaml.com.
Для меня, моя жизнь как программиста, делится на два этапа. До того как я познакомился с WPF, и после. Мне пришлось очень плотно работать с этой технологией в рамках одного проекта, в результате чего я приобрёл некоторые знания, которыми хочу с вами поделиться. То что написано ниже, не откровения, и для тех кто знаком с WPF может показаться банальностью. Всё это описано в сети, в том или ином виде, проще или сложнее, но есть у всех этих описаний одна особенность — английский язык. Поэтому я приведу ниже очень короткий, но как мне кажется ёмкий пример того, что можно сделать при помощи Data Templates. Особенно этот пример будет интересен тем, кто только посматривает в сторону WPF.
Вот такой вот короткий файлик.
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Grid.Resources>
<XmlDataProvider x:Key="rss"
Source="http://informer.gismeteo.ua/rss/99882.xml"
XPath="/rss/channel"/>
<DataTemplate DataType="item">
<StackPanel>
<TextBlock Text="{Binding XPath=title}"/>
<TextBlock TextWrapping="Wrap" Width="360" Text="{Binding XPath=description}"/>
<Image Margin="15,15,0,0"
Stretch="None"
HorizontalAlignment="Left"
Source="{Binding XPath=enclosure/@url}" />
</StackPanel>
</DataTemplate>
</Grid.Resources>
<Border BorderBrush="Black"
BorderThickness="1" Width="360" Height="200" CornerRadius="6">
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ItemsSource="{Binding Source={StaticResource rss}, XPath=item}"/>
</Border>
</Grid>
* This source code was highlighted with Source Code Highlighter.Не знаю как вам, но мне кажется, что для такого количества «текста» он делает очень много. Если вы сохраните этот код и откроете его в XAMLPad(можно и просто при помощи IE), вы увидите погоду в моём городе с gismeteo.ru. Как вы можете заметить при этом не написано ни строчки компилируемого или скриптового кода. Попробую объяснить, что и как.
Ну вначале всё ясно, создали мы грид(правда он не совсем вначале), в который будем помещать наши визуальные элементы. Поместили в него листбокс а вот дальше начинается магия. В лист бокс как бы надо поместить что-то. Вот это что-то, надо где-то взять. Погоду естественно можем взять с rss ленты gismeteo. Для этого создадим в ресурсах грида XmlDataProvider:
<XmlDataProvider x:Key="rss"
Source="http://informer.gismeteo.ua/rss/99882.xml"
XPath="/rss/channel"/>
* This source code was highlighted with Source Code Highlighter.натравим его на нужную ленту, и укажем путь к элементу, который мы хотим представить в виде данных. В данном случае это rss лента погоды в моём городе. После этого заглянем в исходник rss ленты и увидим, что там данные о погоде представлены в виде набора элементов <item>. Вот и попробуем вставить эти данные в листбокс:
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ItemsSource="{Binding Source={StaticResource rss}, XPath=item}"/>
* This source code was highlighted with Source Code Highlighter.указав в качестве источника элементов байндинг на наш XmlDataProvider и задав для выборки тег item. Смотрим что получилось — О!.. Мы уже получили в нашем листбоксе, содержимое элементов <item>. Теперь, хотелось бы увидеть их в удобочитаемом виде. Нет ничего проще. Нам всего лишь нужно создать DataTemplate для типа данных item:
<DataTemplate DataType="item">
<StackPanel>
<TextBlock Text="{Binding XPath=title}"/>
<TextBlock TextWrapping="Wrap" Width="360" Text="{Binding XPath=description}"/>
<Image Margin="15,15,0,0"
Stretch="None"
HorizontalAlignment="Left"
Source="{Binding XPath=enclosure/@url}" />
</StackPanel>
</DataTemplate>
* This source code was highlighted with Source Code Highlighter.Тут мы создали визуальные элементы которые будут отображать содержимое элемента <itеm> и при помощи байндингов и запросов XPath сопоставили им соответствующие теги элемента <item>. Для этого мы создали контейнер StackPanel, и в него последовательно сложили три вещи — тектовый блок отображающий титул погодного элемента, тектовый блок с детальным описанием погоды, и картинку, соответвующюю нашему прогнозу. Всё, наслаждаемся прогнозом погоды в моём(вашем) городе :)
Если описать это русским языком — мы декларативно описали три вещи
1. Источник данных
2. Объект, для отображения этих данных.
3. То как, эти данные будут выглядеть.
Самый важный пункт из этих трёх, как мне кажется — третий. Вся его важность заключается в том, что мы не писали никаких алгоритмов, ифов, форов, свитчей итд, для того чтобы преобразовать внешний вид наших данных в удобоваримый для пользователя. Мы просто рассказали, как мы хотим их видеть.
UPD. В комментариях подсказывают что в IE не работает:( я делал этот файлик давно, и тогда в IE всё открывалось нормально, по всей видимости дело в настройках безопастности, с наскоку я не нашёл:( Если вам просто интересен результат — в комментариях приведен скриншот, если же хотите поиграть с кодом то лучше всего использовать www.kaxaml.com.
