Silverlight DataForm: Замена иконок в панели навигации. Часть 2.
Продолжаем тему замены иконок в панели навигации Silverlight DataForm. Настал черед добавления кнопок-иконок для новой функциональности. Например, Вы хотите расположить кнопки поиска, фильтрации, экспорта данных в формат xls, да мало ли что может потребоваться. (По просьбам в набор “SNA Mini v2” добавила еще 4 иконки).
Конечно, кнопки с необходимым функционалом можно вынести за пределы DataForm, но, как по мне, лучше держать это все в одном месте – в так называемом icons panel (введем это понятие для удобства и расширения navigation panel).
Часть 2. Добавление новых иконок в навигационную панель.
Для того чтобы добавить не просто значки иконок в шаблон, а и повесить на них необходимые обработчики событий, предлагаю воспользоваться cозданием Custom DataForm.
CustomDataForm
Добавим в наш проект новый класс - CustomDataForm.cs и в нем пронаследуемся от DataForm
public class CustomDataForm : DataForm
{
}
Размещаем на нашу страницу наш новый элемент управления (можно для сравнения - уже после существующего на странице Services.xaml):
<local:CustomDataForm DescriptionViewerPosition="BesideLabel" AutoCommit="True" CommitButtonContent="Save" CommandButtonsVisibility="Navigation,Add,Delete,Commit,Cancel" CancelButtonContent="Cancel" />
Наполняем данными
Чтоб было что отображать в CustomDataForm - добавим в проект образец данных для тестирования – коллекцию Company с полями Name, Street, WWW.
И укажем в качестве исходных данных для нашего local:CustomDataForm свойство ItemsSource="{Binding Company, Mode=OneWay}"
Запустите проект и убедитесь что форма и навигация по ней работает.
Шаблон для CustomDataForm
По аналогии с предыдущей частью создаем копию шаблона для нашего элемента управления и называем его CustomDataFormStyleNew, разместив в Resource dictionary - Forms.xaml
Снова идем по дереву шаблона в панели Objects & Timeline, находим StackPanel c группой элементов FirstItemButton, etc. Будем расширять эту панель своими кнопками.
Добавляем разделитель.
Как мы видим, в той же панели находятся кроме кнопок еще и разделители вида
<Border x:Name="ButtonSeparator" Margin="2,4,2,4" Width="3" Opacity="0.2" Background="{TemplateBinding BorderBrush}" BorderBrush="#59FFFFFF" BorderThickness="1,0,1,0"/>
Это маленькая палочка, которая визуально отделяет группы кнопок навигации, редактирования, добавления и т.д. Скопируем эту кнопку, изменив название на x:Name="ButtonSeparator2" и вставим ее перед элеменом FirstItemButton.
Новая кнопка в шаблоне (*).
За образец для нашей новой кнопки можно взять какую-то из готовых, например, NextItemButton и изменить ее имя на SearchButton.
<Button x:Name="SearchButton" Style="{StaticResource ButtonGeneric}">
<Path Fill="{TemplateBinding Foreground}" Stretch="Fill" Height="13" Margin="2,3,3,3" Width="16" Opacity="0.85" Data="F1 M 67.9714,119.322C 67.44,120.046 66.4185,120.199 65.6947,119.664L 61.455,116.513C 59.8991,117.666 57.7977,118.009 55.8766,117.234C 52.9368,116.05 51.5074,112.694 52.6931,109.755C 53.267,108.33 54.3613,107.214 55.7741,106.613C 57.1873,106.012 58.7495,105.998 60.1725,106.573C 61.5976,107.145 62.7119,108.239 63.3136,109.652C 63.8937,111.017 63.924,112.52 63.4083,113.905L 67.6296,117.044C 68.3532,117.578 68.5067,118.598 67.9714,119.322 Z M 62.1484,113.563C 62.5918,112.463 62.5801,111.255 62.1152,110.162C 61.6493,109.07 60.7869,108.224 59.6848,107.78C 58.5854,107.337 57.3759,107.348 56.2853,107.812C 55.192,108.277 54.3457,109.14 53.9012,110.241C 52.9856,112.514 54.0893,115.109 56.3639,116.026C 58.6362,116.942 61.2303,115.838 62.1484,113.563 Z ">
<Path.Effect>
<DropShadowEffect BlurRadius="8" Color="#FFFFFFFF" Direction="100" ShadowDepth="0"/>
</Path.Effect>
<Path.OpacityMask>
<LinearGradientBrush EndPoint="0.6,1" StartPoint="0.4,0">
<GradientStop Color="#7F000000" Offset="0"/>
<GradientStop Color="#BF000000" Offset="0.25"/>
<GradientStop Color="#FF000000" Offset="1"/>
</LinearGradientBrush>
</Path.OpacityMask>
</Path>
</Button>
Замена контура (**)
Выбираем в Expression Design необходимую иконку,
и по аналогии с предыдущей частью заменяем контур Path на свой собственный, меняем ширину, высоту и отступы.
Повторить действия (*) и (**) до тех пор пока нужное кол-во кнопок не будет достигнуто :)
Протестировав приложение, видим результат на панели:
Кнопочки очень органично вписались.
Навешиваем функционал
Осталось сделать так, чтоб что-то происходило при нажатии на эти кнопки. Для этого, мы возвращаемся в наш класс CustomDataForm.
Добавим следующий кусочек кода, в котором переопределим метод OnApplyTemplate() и получим возможность работать с обработчиком события OnSearchButtonClick для кнопки SearchButton.
private ButtonBase _searchButton;
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
if (this._searchButton != null)
{
this._searchButton.Click -= new RoutedEventHandler(this.OnSearchButtonClick);
}
this._searchButton = base.GetTemplateChild("SearchButton") as ButtonBase;
if (this._searchButton != null)
{
this._searchButton.Click += new RoutedEventHandler(this.OnSearchButtonClick);
}
}
private void OnSearchButtonClick(object sender, RoutedEventArgs e)
{
}
Предлагаю для теста создать некоторое модальное диалоговое окно – добавим в проект ChildWindow, и назовем его SearchWindow.xaml.
И в обработчике OnSearchButtonClick создадим его экземпляр и покажем.
private void OnSearchButtonClick(object sender, RoutedEventArgs e)
{
SearchWindow ch = new SearchWindow();
ch.Show();
}
В результате при нажатии на кнопку поиска – получаем наше окошко.
Думаю с остальными кнопками механизм понятен – действия можно сделать любые.
Понажимать кнопочку можно тут :)