InputMan for ASP.NET オンラインデモ

using System;
using System.Drawing;
using GrapeCity.Web.Input.IMFunctionKey;

public partial class KeyOperation_GcFunctionKey : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        // ボタンの設定値を入力フィールドに表示します。
        FunctionKeyButton fb = GcFunctionKey1.FunctionKeyButtons[DropDownList1.SelectedIndex];

        GcTextBox1.Text = fb.Text;
        GcTextBox2.Text = fb.ToolTipText;
        CheckBox1.Checked = fb.ForbidReservedKeyBehavior;
        DropDownList2.SelectedIndex = (int)fb.DisplayStyle;
        GcColorPicker1.SelectedIndex = GcColorPicker1.FindStringExact(0, fb.BackColor.Name, 0);
        GcColorPicker2.SelectedIndex = GcColorPicker2.FindStringExact(0, fb.ForeColor.Name, 0);
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        // ファンクションキーボタンを設定します。
        FunctionKeyButton fb = GcFunctionKey1.FunctionKeyButtons[DropDownList1.SelectedIndex];

        fb.Text = GcTextBox1.Text;
        fb.ToolTipText = GcTextBox2.Text;
        fb.ForbidReservedKeyBehavior = CheckBox1.Checked;
        fb.DisplayStyle = (DisplayStyle)DropDownList2.SelectedIndex;
        if( GcColorPicker1.SelectedIndex < 0 )
        {
            fb.BackColor = Color.Empty;
        }
        else
        {
            fb.BackColor = GcColorPicker1.SelectedColor;
        }
        
        if( GcColorPicker2.SelectedIndex < 0 )
        {
            fb.ForeColor = Color.Empty;
        }
        else
        {
            fb.ForeColor = GcColorPicker2.SelectedColor;
        }
    }
}

Imports GrapeCity.Web.Input.IMFunctionKey
Imports System.Drawing

Partial Class KeyOperation_GcFunctionKey
    Inherits System.Web.UI.Page

    Protected Sub DropDownList1_SelectedIndexChanged(sender As Object, e As System.EventArgs) Handles DropDownList1.SelectedIndexChanged
        ' ボタンの設定値を入力フィールドに表示します。
        Dim fb As FunctionKeyButton = GcFunctionKey1.FunctionKeyButtons(DropDownList1.SelectedIndex)

        GcTextBox1.Text = fb.Text
        GcTextBox2.Text = fb.ToolTipText
        CheckBox1.Checked = fb.ForbidReservedKeyBehavior
        DropDownList2.SelectedIndex = fb.DisplayStyle
        GcColorPicker1.SelectedIndex = GcColorPicker1.FindStringExact(0, fb.BackColor.Name, 0)
        GcColorPicker2.SelectedIndex = GcColorPicker2.FindStringExact(0, fb.ForeColor.Name, 0)
    End Sub

    Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click
        ' ファンクションキーボタンを設定します。
        Dim fb As FunctionKeyButton = GcFunctionKey1.FunctionKeyButtons(DropDownList1.SelectedIndex)

        fb.Text = GcTextBox1.Text
        fb.ToolTipText = GcTextBox2.Text
        fb.ForbidReservedKeyBehavior = CheckBox1.Checked
        fb.DisplayStyle = DropDownList2.SelectedIndex
        If GcColorPicker1.SelectedIndex < 0 Then
            fb.BackColor = Color.Empty
        Else
            fb.BackColor = Color.FromName(GcColorPicker1.SelectedItem.Text)
        End If

        If GcColorPicker2.SelectedIndex < 0 Then
            fb.ForeColor = Color.Empty
        Else
            fb.ForeColor = Color.FromName(GcColorPicker2.SelectedItem.Text)
        End If
    End Sub
End Class

<%@ page title="" language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true" inherits="KeyOperation_GcFunctionKey, App_Web_fxhfs2zs" stylesheettheme="SkinFile" %>

<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMFunctionKey" tagprefix="im_functionkey" %>
<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMEdit" tagprefix="im_edit" %>
<%@ Register assembly="GrapeCity.Web.Input.ColorPicker.v100" namespace="GrapeCity.Web.Input.IMColorPicker" tagprefix="im_ColorPicker" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">
        function GcFunctionKey1_FunctionKeyDown(sender, eArgs) {
            var keyname;
            switch (eArgs.FunctionKey) {
                case FunctionKeys.F1:
                    keyname = "F1";
                    break;
                case FunctionKeys.F2:
                    keyname = "F2";
                    break;
                case FunctionKeys.F3:
                    keyname = "F3";
                    break;
                case FunctionKeys.F4:
                    keyname = "F4";
                    break;
                case FunctionKeys.F5:
                    keyname = "F5";
                    break;
                case FunctionKeys.F6:
                    keyname = "F6";
                    break;
                case FunctionKeys.F7:
                    keyname = "F7";
                    break;
                case FunctionKeys.F8:
                    keyname = "F8";
                    break;
                case FunctionKeys.Shift | FunctionKeys.F9:
                    keyname = "Shift + F9";
                    break;
                case FunctionKeys.Shift | FunctionKeys.F10:
                    keyname = "Shift + F10";
                    break;
                case FunctionKeys.Shift | FunctionKeys.F11:
                    keyname = "Shift + F11";
                    break;
                case FunctionKeys.Shift | FunctionKeys.F12:
                    keyname = "Shift + F12";
                    break;
                case FunctionKeys.Control | FunctionKeys.Home:
                    keyname = "Ctrl + Home";
                    break;
                case FunctionKeys.Control | FunctionKeys.End:
                    keyname = "Ctrl + End";
                    break;
                case FunctionKeys.Alt | FunctionKeys.PageUp:
                    keyname = "Alt + PageUp";
                    break;
                case FunctionKeys.Alt | FunctionKeys.PageDown:
                    keyname = "Alt + PageDown";
                    break;
                default:
            }
            document.getElementById("<% =this.Label2.ClientID %>").innerText = "「" + keyname + "」キーが押されました。";

        }

        // ボタンに表示する文字列を設定します。
        function GcTextBox1_TextChanged(sender, eArgs) {
            if (!document.getElementById("isClient").checked) return;

            var button = FindIMControl("<% =GcFunctionKey1.ClientID %>").GetFunctionKeyButton(document.getElementById("<% =DropDownList1.ClientID %>").selectedIndex);
            button.SetText(sender.GetText());
        }
        // ボタンのツールチップテキストを設定します。
        function GcTextBox2_TextChanged(sender, eArgs) {
            if (!document.getElementById("isClient").checked) return;

            var button = FindIMControl("<% =GcFunctionKey1.ClientID %>").GetFunctionKeyButton(document.getElementById("<% =DropDownList1.ClientID %>").selectedIndex);
            button.SetToolTipText(sender.GetText());
        }
        // ボタンの背景色を設定します。
        function GcColorPicker1_SelectedIndexChanged(sender, eArgs) {
            if (!document.getElementById("isClient").checked) return;

            var color = sender.GetText();
            var button = FindIMControl("<% =GcFunctionKey1.ClientID %>").GetFunctionKeyButton(document.getElementById("<% =DropDownList1.ClientID %>").selectedIndex);
            button.SetBackColor(color);
        }
        // ボタンの文字色を設定します。
		function GcColorPicker2_SelectedIndexChanged(sender, eArgs) {
		    if (!document.getElementById("isClient").checked) return;

		    var color = sender.GetText();
		    var button = FindIMControl("<% =GcFunctionKey1.ClientID %>").GetFunctionKeyButton(document.getElementById("<% =DropDownList1.ClientID %>").selectedIndex);
		    button.SetForeColor(color);
		}
        // ボタンに表示する内容を設定します。
        function SetStyle(style) {
            if (!document.getElementById("isClient").checked) return;

            var button = FindIMControl("<% =GcFunctionKey1.ClientID %>").GetFunctionKeyButton(document.getElementById("<% =DropDownList1.ClientID %>").selectedIndex);
            button.SetDisplayStyle(style);
        }
        // 予約キーの動作を設定します。
        function SetReservedKey(obj) {
            if (!document.getElementById("isClient").checked) return;

            var button = FindIMControl("<% =GcFunctionKey1.ClientID %>").GetFunctionKeyButton(document.getElementById("<% =DropDownList1.ClientID %>").selectedIndex);
            button.SetForbidReservedKeyBehavior(obj.checked);
        }
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <p>ファンクションキーまたは修飾キー(Shift、Alt、Ctrlキー)を押してください。</p>
    <div class="sample">
        <im_functionkey:GcFunctionKey ID="GcFunctionKey1" runat="server" 
            Font-Names="メイリオ" HasLoadFromXml="True" Height="37px" Width="100%">
            <ClientEvents FunctionKeyDown="GcFunctionKey1_FunctionKeyDown" />
            <functionkeybutton functionkey="F1" height="29px" text="F1" width="120px" tooltiptext="F1キーを押してください"></functionkeybutton>
            <functionkeybutton functionkey="F2" height="29px" text="F2" width="65px" tooltiptext="F2キーを押してください"></functionkeybutton>
            <functionkeybutton functionkey="F3" height="29px" text="F3" width="65px" tooltiptext="F3キーを押してください"></functionkeybutton>
            <functionkeybutton functionkey="F4" height="29px" text="F4" width="65px" tooltiptext="F4キーを押してください"></functionkeybutton>
            <functionkeybutton functionkey="F5" height="29px" text="F5" width="65px" tooltiptext="F5キーを押してください"></functionkeybutton>
            <functionkeybutton functionkey="F6" height="29px" text="F6" width="65px" tooltiptext="F6キーを押してください"></functionkeybutton>
            <functionkeybutton functionkey="F7" height="29px" text="F7" width="65px" tooltiptext="F7キーを押してください"></functionkeybutton>
            <functionkeybutton functionkey="F8" height="29px" text="F8" width="65px" tooltiptext="F8キーを押してください"></functionkeybutton>
            <functionkeybutton functionkey="F9, Shift" height="29px" text="Shift+F9" width="108px" tooltiptext="Shift+F9キーを押してください"></functionkeybutton>
            <functionkeybutton functionkey="F10, Shift" height="29px" text="Shift+F10" width="117px" tooltiptext="Shift+F10キーを押してください"></functionkeybutton>
            <functionkeybutton functionkey="F11, Shift" height="29px" text="Shift+F11" width="117px" tooltiptext="Shift+F11キーを押してください"></functionkeybutton>
            <functionkeybutton functionkey="F12, Shift" height="29px" text="Shift+F12" width="117px" tooltiptext="Shift+F12キーを押してください"></functionkeybutton>
            <functionkeybutton functionkey="Home, Control" height="29px" text="Ctrl+Home" width="132px" tooltiptext="Ctrl+Homeキーを押してください"></functionkeybutton>
            <functionkeybutton functionkey="End, Control" height="29px" text="Ctrl+End" width="110px" tooltiptext="Ctrl+Endキーを押してください"></functionkeybutton>
            <functionkeybutton functionkey="PageUp, Alt" height="29px" text="Alt+PageUp" width="149px" tooltiptext="Alt+PageUpキーを押してください"></functionkeybutton>
            <functionkeybutton functionkey="PageDown, Alt" height="29px" text="Alt+PageDown" width="183px" tooltiptext="Alt+PageDownキーを押してください"></functionkeybutton>
        </im_functionkey:GcFunctionKey>
        <br />
        <asp:Label ID="Label2" runat="server" Font-Bold="True" Font-Size="10pt" ForeColor="#0066FF"></asp:Label>
    </div>
            
    <table class="inputTable">
        <tr>
            <td colspan="2" align="center">
                設定するファンクションキーボタンを選択してください。
                <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" 
                    onselectedindexchanged="DropDownList1_SelectedIndexChanged">
                    <asp:ListItem>F1</asp:ListItem>
                    <asp:ListItem>F2</asp:ListItem>
                    <asp:ListItem>F3</asp:ListItem>
                    <asp:ListItem>F4</asp:ListItem>
                    <asp:ListItem>F5</asp:ListItem>
                    <asp:ListItem>F6</asp:ListItem>
                    <asp:ListItem>F7</asp:ListItem>
                    <asp:ListItem>F8</asp:ListItem>
                    <asp:ListItem>Shift+F9</asp:ListItem>
                    <asp:ListItem>Shift+F10</asp:ListItem>
                    <asp:ListItem>Shift+F11</asp:ListItem>
                    <asp:ListItem>Shift+F12</asp:ListItem>
                    <asp:ListItem>Ctrl+Home</asp:ListItem>
                    <asp:ListItem>Ctrl+End</asp:ListItem>
                    <asp:ListItem>Alt+PageUp</asp:ListItem>
                    <asp:ListItem>Alt+PageDown</asp:ListItem>
            </asp:DropDownList>
            <br /><br />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <label><input type="checkbox" id="isClient" checked="checked" /> クライアント側の設定を有効にする</label>
            </td>
        </tr>
        <tr>
            <th class="inputTh">表示テキスト</th>
            <td class="inputTd">
                <im_edit:GcTextBox ID="GcTextBox1" runat="server" HasLoadFromXml="True" 
                    Text="F1" Width="200px"><clientevents textchanged="GcTextBox1_TextChanged"></clientevents></im_edit:GcTextBox>
            </td>
        </tr>
        <tr>
            <th class="inputTh">ツールチップテキスト</th>
            <td class="inputTd">
                <im_edit:GcTextBox ID="GcTextBox2" runat="server" HasLoadFromXml="True" 
                    Text="F1キーを押してください" Width="200px"><clientevents textchanged="GcTextBox2_TextChanged"></clientevents></im_edit:GcTextBox>
            </td>
        </tr>
        <tr>
            <th class="inputTh">背景色</th>
            <td class="inputTd">
                <im_ColorPicker:GcColorPicker ID="GcColorPicker1" runat="server" Width="200px">
                    <clientevents selectedindexchanged="GcColorPicker1_SelectedIndexChanged"></clientevents>
                </im_ColorPicker:GcColorPicker>
            </td>
        </tr>
        <tr>
            <th class="inputTh">文字色</th>
            <td class="inputTd">
                <im_ColorPicker:GcColorPicker ID="GcColorPicker2" runat="server" Width="200px">
                    <clientevents selectedindexchanged="GcColorPicker2_SelectedIndexChanged"></clientevents>
                </im_ColorPicker:GcColorPicker>
            </td>
        </tr>
        <tr>
            <th class="inputTh">ボタンの表示内容</th>
            <td class="inputTd">
                <asp:DropDownList ID="DropDownList2" runat="server" Width="200px" onchange="SetStyle(this.value);">
                    <asp:ListItem Value="none">表示なし</asp:ListItem>
                    <asp:ListItem Value="text">テキストのみ</asp:ListItem>
                    <asp:ListItem Value="image">画像のみ</asp:ListItem>
                    <asp:ListItem Value="imageandtext" Selected="True">画像とテキスト</asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <th class="inputTh">予約キーの動作</th>
            <td class="inputTd">
                <asp:CheckBox ID="CheckBox1" runat="server" Checked="True" Text="禁止する" onclick="SetReservedKey(this);"/>
            </td>
        </tr>
    </table>
    <center>
        <asp:Button ID="Button1" runat="server" CssClass="setButton" Text="設定" 
            onclick="Button1_Click" />
    </center>
</asp:Content>