SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)

縮小タイプのツールボックスを持ったSilverlightアプリケーションの作成

ComponentOne Studio for SilverlightのC1Accordionコントロールを使ったWebページの作成

  • このエントリーをはてなブックマークに追加

ビハインドコードの作成

 ビハインドコードでは、主にC1Accordionコントロールでヘッダーペインにマウスポインタを重ねるとコンテンツペインが展開する処理と、コンテンツペインに配置した各コントロールのイベントハンドラの処理を作成します。

コンテンツペインが展開する処理の作成

 この処理は、C1AccordionコントロールのIsMouseOverChangedイベントハンドラで行います。このイベントハンドラは、ヘッダーペインにマウスポインタが重なると呼び出されます。コードからコンテンツペインを展開・縮小するには、IsExpandedプロパティを使用します。プロパティに「True」をセットするとコンテンツペインは展開し、「False」で閉じます。これを、メンバ変数を使って切り替えていきます。

Visual Basic
Private flag As Boolean = True
Private Sub accitem1_IsMouseOverChanged(ByVal sender As System.Object, ByVal e As C1.Silverlight.PropertyChangedEventArgs(Of System.Boolean))
    If flag = True Then
        accitem1.IsExpanded = True
        flag = False
    Else
        accitem1.IsExpanded = False
        flag = True
    End If
End Sub
C#
private Boolean flag = true;
private void accitem1_IsMouseOverChanged(object sender, C1.Silverlight.PropertyChangedEventArgs<bool> e)
{
    if (flag == true)
    {
        accitem1.IsExpanded = true;
        flag = false;
    }
    else
    {
        accitem1.IsExpanded = false;
        flag = true;
    }
}

コンテンツペインに配置した各コントロールの処理

 これは、それぞれのコントロールのClickイベントハンドラで行います。処理そのものはごく簡単な処理で、テキストボックスに入力されたテキストのコピーやクリア、文字数のカウントを行います。

Visual Basic
Partial Public Class MainPage
    Inherits UserControl

    Public col1 As Brush
    Public col2 As Brush

    Public Sub New()
        InitializeComponent()
        col1 = text1.Background
        col2 = text2.Background
    End Sub

    Private Sub button1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        text1.SelectAll()
    End Sub

    Private Sub button2_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        Dim s As String = text1.SelectedText

        text2.Text = s
    End Sub

    Private Sub button3_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        text1.Text = ""
        text2.Text = ""
    End Sub

    Private Sub button4_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        MessageBox.Show("文字数は" & text1.SelectionLength & "文字です", "文字数の表示", MessageBoxButton.OK)
    End Sub

    Private Sub check1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        If check1.IsChecked = False Then
            text1.Background = New SolidColorBrush(Colors.Transparent)
            text2.Background = New SolidColorBrush(Colors.Transparent)
        Else
            text1.Background = col1
            text2.Background = col2
        End If
    End Sub
End Class
C#
namespace sl_accordion_cs
{
    public partial class MainPage : UserControl
    {
        public Brush col1;
        public Brush col2;
        public MainPage()
        {
            InitializeComponent();
            col1 = text1.Background;
            col2 = text2.Background;
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            text1.SelectAll();
        }

        private void button2_Click(object sender, RoutedEventArgs e)
        {
            String s = text1.SelectedText;

            text2.Text = s;
        }

        private void button3_Click(object sender, RoutedEventArgs e)
        {
            text1.Text = "";
            text2.Text = "";
        }

        private void button4_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("文字数は" + text1.SelectionLength + "文字です", "文字数の表示", MessageBoxButton.OK);
        }

        private void check1_Click(object sender, RoutedEventArgs e)
        {
            if (check1.IsChecked == false)
            {
                text1.Background = new SolidColorBrush(Colors.Transparent);
                text2.Background = new SolidColorBrush(Colors.Transparent);
            }
            else
            {
                text1.Background = col1;
                text2.Background = col2;
            }
        }
    }
}

まとめ

 C1Accordionコントロールは、コンテンツペインを閉じたり広げたりできるので、Webページの操作系をだらだらと表示してページが乱雑になるのを防ぎ、すっきりとまとめることができます。Silverlight特有のアニメーション機能も使っているため、ページのデザインで苦労している方は一度試してみてはいかがでしょうか。

参考文献

製品情報

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5867 2011/10/13 16:35

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング