Skip to content
February 8, 2012 / ahriman hpc mode

Silverlight и иконки на кнопках и в DataGrid (DataGridTemplate…)

Очередная рецептура по Silverlight. Часа два у меня заняло конфигурирование в XAML отрисовки картинки в DataGridTemplateColumn по определённому условию. Заработал, как обычно, самый простой способ – положил на StackPanel компонент Image и привязал к нему конвертер. Приведу способы, которыми я пробовал сделать картинку.

 

Расположение картинки в Grid и на кнопках

Самый простой способ и гарантированно рабочий способ:

<Button x:Name="Button">

<Button.Content>

<StackPanel Orientation="Horizontal">

<Image Source="new.png"/>

</StackPanel>

</Button.Content>

</Button>

Жирным выделен необходимый код. Им же можно воспользоваться при расположении картинки в DataGrid. Обратите внимание на путь картинки – используется картинка, лежащая в корне проекта Silverlight.

Небольшие пояснения по кнопке – контрол кнопки является контролом с содержимым (наследуясь от System.Windows.Controls.ContentControl, в случае же кнопки это класс ButtonBase, сам потомок ContentControl). Отсюда возникает свойство Content, которым можно “оборачивать” любые значения, в том числе другие контролы. Свойство Content является так называемым attached property (http://msdn.microsoft.com/en-us/library/ms749011.aspx)

По остальному коду понятно – используется Layout-компонент StackPanel, один из трех компонентов, использующихся в SL.

Смена картинки по условию с помощью IValueConverter

Кнопку расположили, однако это не очень интересно. Гораздо интереснее менять кнопку по какому-то условию. Сперва в голову пришла идея делать это в Code Behind, используя UserControl.Resources. Так делать можно, но не в случае с условной сменой элементов. Однако приведу код, мало ли, вдруг кому пригодится.

<UserControl.Resources>
        <DataTemplate x:Key="idetnabor">

           <StackPanel Orientation="Horizontal">

                <Image Source="new.png"/>

                 </StackPanel>
        </DataTemplate>
    </UserControl.Resources>
 

Привязывая этот DataTemplate к DataGridTemplateColumn, мы можем переиспользовать этот DataTemplate много раз.

Однако это не поможет нам с нашей задачей. Справиться с ней нам поможет конвертер, наследующийся от IValueConverter.

 

namespace catalog

{

    public class ImageConverter : IValueConverter
    {
        #region IValueConverter Members

        public object Convert(object value, Type targetType,
         object parameter, System.Globalization.CultureInfo culture)
        {
            CourseTitles ob = value as CourseTitles;
            Image img = new Image();
            switch (ob.is_soon)
            {
                case true:

                    img.Source = new System.Windows.Media.Imaging.BitmapImage
                 (new Uri("new.png", UriKind.Relative));
                    img.Width = 50;
                    img.Height = 50;
                    return img;

                case false:

                   TextBlock t1= new TextBlock();
                    t1.Text = "";
                    return t1;

                default:
                    TextBlock t2= new TextBlock();
                    t2.Text = "";
                    return t2;
            }
        }

        public object ConvertBack(object value, Type targetType,
         object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }

        #endregion

    }
 
}

Наследуясь от IValueConverter, мы создаем класс ImageFormatter. Данный класс имеет основной необходимый нам метод Convert, принимающий несколько аргументов, включая значение, от которого будет зависеть результат, тип, культура и так далее. В нашем случае нас интересует только value.

После этого в case if мы проверяем, какое значение имеет свойство is_soon объекта CourseTitles ob (это value), и возвращаем необходимый для отображения результат. Обратите внимание, что конвертеры можно использовать для совершенно различных целей, включая стили и так далее.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: