НОУ ИНТУИТ | Методика создания интерактивных приложений Silverlight. Лекция 1: Практикум

Опубликован: 01.03.2010 | Уровень: специалист | Доступ: платный

Создание элементов управления

Целью данного практического занятия является создание пользовательских "богатых" элементов управления на основе стандартных. Здесь мы воспользуемся возможностью Silverlight по созданю шаблонов и стилей для стандартных элементов управления. Для выполнения задания необходима Visual Studio.

Задание

Создать пользовательские элементы управления Button, ComboBox и ListBox. Разместить элементы каждый на отдельной странице. Создать меню для навигации по страницам с пользовательскими элементами управления. В проекте SilverlightControls добавим папку \Controls, куда поместим пользовательские элементы управления. В папке Views разместим страницы с этими элементами.

Создаем проект Silverlight, как в разделе "Создание простого приложения Silverlight", согласно рис. P.1, рис. P.2 и рис. P.3. Называем его SilverlightControls. Разница лишь в том, что используем шаблон Silverlight Navigation Application.

увеличить изображение
Рис. P.5. Создание проекта по шаблону Silverlight Navigation Application

Шаблон создаст 2 пункта меню в MainPage.xaml, таких как About и Home, мы его расширяем пунктами Button, ComboBox, ListBox:

<Border x:Name="LinksBorder" 
        Style="{StaticResource LinksBorderStyle}">
    <StackPanel 
        x:Name="LinksStackPanel" 
        Style="{StaticResource LinksStackPanelStyle}">
        <HyperlinkButton 
            x:Name="Link1" 
            Style="{StaticResource LinkStyle}" 
            NavigateUri="/Home" 
            TargetName="ContentFrame" 
            Content="home"/>
        <Rectangle Style="{StaticResource DividerStyle}"/>                    
        <HyperlinkButton 
            x:Name="Link2" Style="{StaticResource LinkStyle}" 
            NavigateUri="/About" 
            TargetName="ContentFrame" 
            Content="about"/>                    
        <Rectangle Style="{StaticResource DividerStyle}"/>                    
        <HyperlinkButton 
            x:Name="Link3" 
            Style="{StaticResource LinkStyle}"                                      
            NavigateUri="/ButtonPage" 
            TargetName="ContentFrame" 
            Content="Button"/>
        <Rectangle Style="{StaticResource DividerStyle}"/>                    
        <HyperlinkButton 
            x:Name="Link4" 
            Style="{StaticResource LinkStyle}" 
            NavigateUri="/ComboBoxPage" 
            TargetName="ContentFrame" 
            Content="ComboBox"/>
        <Rectangle Style="{StaticResource DividerStyle}"/>                    
        <HyperlinkButton 
            x:Name="Link5" 
            Style="{StaticResource LinkStyle}" 
            NavigateUri="/ListBoxPage" 
            TargetName="ContentFrame" 
            Content="ListBox"/>
    </StackPanel>
</Border>

Далее необходимо создать страницы и сами элементы управления.

Элемент Button

Добавляем новый пользовательский элемент управления ButtonControl.xaml (Add/New Item). Размещаем его в каталоге \Controls. Туда же добавим рисунки 4.jpg и SL.png.

увеличить изображение
Рис. P.6. Создание пользовательского элемента управления Button

Добавим стандартный элемент Button

<Button 
    x:Name="button1"             
    Content="Button1" 
    Click="Button_Click"
    Style="{StaticResource ImageButton}" 
    HorizontalAlignment="Left" Width="77"/>

и улучшим его внешний вид с помощью стиля:

<UserControl.Resources>
   <Style x:Key="TextBlockStyle" TargetType="TextBlock"> 
      <Setter Property="FontFamily" Value="Comic Sans Ms"/>
      <Setter Property="Text" Value="Click!"/>
      <Setter Property="Foreground" Value="MediumBlue"/>
      <Setter Property="FontSize" Value="15"/>
   </Style>
   <Style x:Key="ImageButton" TargetType="Button">
      <Setter Property="Template">
         <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Button>
                   <StackPanel Orientation="Vertical">
                      <Image 
                          Source="SL.png" 
                          Height="65" 
                          Width="65" 
                          Stretch="Fill"/>
                      <TextBlock 
                          Style="{StaticResource TextBlockStyle}" 
                          HorizontalAlignment="Center"/>
                   </StackPanel>
                </Button>
            </ControlTemplate>
         </Setter.Value>
      </Setter>
   </Style>
</UserControl.Resources>

Т.е. кнопка будет состоять из кнопки <Button/>. Эта кнопка является контейнером для <StackPanel/>, которая в свою очередь содержит <Image/> и <TextBlock/>. К текстовому блоку привязан стиль TextBlockStyle. К самой кнопке привязан стиль ImageButton.

Добавляем страницу ButtonPage.xaml для размещения этого элемента, страницу поместим в каталог \Views проекта.

увеличить изображение
Рис. P.7. Создание страницы для элемента управления Button

На странице ButtonPage.xaml добавляем пространство имен класса SilverlightControls:

xmlns:local="clr-namespace:SilverlightControls"

и в сетку страницы сам элемент управления Button:

<local:ButtonControl 
    VerticalAlignment="Top" 
    HorizontalAlignment="Center"/>

После запуска мы получим:

увеличить изображение
Рис. P.8. Внешний вид пользовательского элемента управления Button

Элемент ComboBox

Добавляем новый пользовательский элемент управления ComboBoxControl.xaml (Add/New Item). Размещаем его в каталоге \Controls. Туда же добавим рисунки 1.jpg, 2.jpg и 3.jpg.

увеличить изображение
Рис. P.9. Создание пользовательского элемента управления ComboBox

Добавим стандартный элемент ComboBox:

<ComboBox 
   Margin="37,0,0,119" 
   Height="22" 
   VerticalAlignment="Bottom" 
   HorizontalAlignment="Left" 
   Width="65"/>

Добавим три элемента, улучшим вид каждого элемента, с помощью шаблона:

<ComboBox 
    Margin="37,0,0,119" 
    Height="22" 
    VerticalAlignment="Top" 
    HorizontalAlignment="Left" 
    Width="65">
    <ComboBoxItem>
        <StackPanel Orientation="Horizontal">
            <Image 
                Height="100" 
                Width="100" 
                Source="1.jpg"/>
            <TextBlock 
                Text="Ferrari F430" 
                HorizontalAlignment="Right" 
                VerticalAlignment="Center"/>
        </StackPanel>
    </ComboBoxItem>
    <ComboBoxItem>
        <StackPanel Orientation="Horizontal">
            <Image 
                Height="100" 
                Width="100" 
                Source="2.jpg"/>
            <TextBlock 
                Text="Fisker Karma" 
                HorizontalAlignment="Right" 
                VerticalAlignment="Center"/>
        </StackPanel>
    </ComboBoxItem>
    <ComboBoxItem>
        <StackPanel Orientation="Horizontal">
            <Image 
                Height="100" 
                Width="100" 
                Source="3.jpg"/>
            <TextBlock 
                Text="Lamborghini Murcielago LP 640" 
                HorizontalAlignment="Right" 
                VerticalAlignment="Center"/>
        </StackPanel>
    </ComboBoxItem>
</ComboBox>

Каждый пункт списка содержит вложенную панель <StackPanel/>, в которую вложены элементы <Image/> и <TextBlock/>.

Добавляем страницу ComboBoxPage.xaml для размещения этого элемента, страницу поместим в каталог \Views проекта.

увеличить изображение
Рис. P.10. Создание страницы для элемента управления ComboBox

На странице ComboBoxPage.xaml добавляем пространство имен класса SilverlightControls:

xmlns:local="clr-namespace:SilverlightControls"

и в сетку страницы сам элемент управления ComboBox:

<local:ComboBoxControl 
    VerticalAlignment="Top" 
    HorizontalAlignment="Center"/>

После компиляции проекта мы увидим ниспадающий список автомобилей с их изображениями:

увеличить изображение
Рис. P.11. Внешний вид пользовательского элемента управления ComboBox

Дальше >>

Программирование на С#

Методика создания интерактивных приложений Silverlight

Практикум

Создание элементов управления

Задание

Меню

Элемент Button

Элемент ComboBox

Вопросы и ответы

Студенты

Авторизоваться

Программирование на С#

Методика создания интерактивных приложений Silverlight

Практикум

Создание элементов управления

Задание

Меню

Элемент Button

Элемент ComboBox

Вопросы и ответы

Студенты