ヴィジュアル、サウンド、テキスト、コードの間を彷徨いながら、感じたこと考えたことを綴ります。

Mango 対応 Silverlight 検索アプリケーションの作成(5)item3のレイアウト~検索フォームの作成~

»

Mango 対応 Silverlight 検索アプリケーションの作成、前回からの続きです。

今回は、item3のレイアウトについて説明します。これは、検索用の入力フォームです。

このサンプルでは、次の3つの組み合わせによる検索を実装します。

(1)分類
「すべての分類、ご飯物、パン、めん、主菜、副菜、汁物、おやつ」から選択。

(2)追加したい食材
「肉・畜肉加工品、魚介類・練り製品、乳・乳製品、卵・卵加工品」にチェック。複数選択可。

(3)キーワード入力
任意の検索キーを入力。Mangoでは日本語入力が可能です。「Windows Phone 7.0」(RTW)の場合は日本語入力ができませんので、本サンプルでは、この部分のみ機能しません。

前回の<controls:PanoramaItem Header="季節の料理" Foreground="darkgreen">~</controls:PanoramaItem>の後に、並列になるように、<controls:PanoramaItem Header="一品検索" Foreground="Olive"></controls:PanoramaItem>を配置します。その中に<Grid>を配置し、さらに次のようにコントロールを配置して、プロパティを設定します。

ご飯物や主菜などの分類選択部分には、<ListBox>を使っています。
また、肉や魚介など、肉食用の追加オプションは、<CheckBox>を用いて、複数選択できるようにします。
フリーキーワードの入力ボックスには、<TextBox>を使っています。Buttonコントロールを2個配置して、検索を実行したり、フリーキーワードをクリアできるようにします。
Buttonは検索対象とするXML文書ファイルが読み込まれるまで、IsEnabled="False"を指定して操作不可としておきます。

5_0

            <controls:PanoramaItem Header="一品検索" Foreground="Olive">
                <Grid>
                    <ListBox Height="310" HorizontalAlignment="Left" Name="ListBox3" VerticalAlignment="Top" Width="190" Padding="15" FontSize="25" Margin="0,0,0,0" Background="Cornsilk" Foreground="#FF555555" BorderBrush="Khaki" BorderThickness="1" />
                        <TextBlock Height="50" HorizontalAlignment="Left" Margin="215,15,0,0" Name="TextBlock7" Text="追加したい食材" VerticalAlignment="Top" Foreground="#FF555555" FontSize="25" Width="207" />
                        <CheckBox Content="肉・畜肉加工品" Height="80" HorizontalAlignment="Left" Margin="200,50,0,0" Name="CheckBox1" VerticalAlignment="Top" Foreground="#FF555555" FontSize="20" Background="Salmon" />
                        <CheckBox Content="魚介類・練り製品" Height="80" HorizontalAlignment="Left" Margin="200,110,0,0" Name="CheckBox2" VerticalAlignment="Top" Foreground="#FF555555" FontSize="20" Background="LightBlue" />
                        <CheckBox Content="乳・乳製品" Height="80" HorizontalAlignment="Left" Margin="200,170,0,0" Name="CheckBox3" VerticalAlignment="Top" Foreground="#FF555555" FontSize="20" Background="LightGreen" />
                        <CheckBox Content="卵・卵加工品" Height="80" HorizontalAlignment="Left" Margin="200,230,0,0" Name="CheckBox4" VerticalAlignment="Top" Foreground="#FF555555" FontSize="20" Background="Gold" />
                    <TextBox Height="73" HorizontalAlignment="Left" Margin="0,320,0,0" Name="TextBox1" Text="" VerticalAlignment="Top" Width="400" MaxLength="30" BorderBrush="DarkKhaki" BorderThickness="1" />
                    <Button Content="検索" Height="72" HorizontalAlignment="Left" Margin="0,390,0,0" Name="Button1" VerticalAlignment="Top" Width="140" Foreground="Cornsilk" Background="Olive" BorderBrush="DarkKhaki" BorderThickness="1" IsEnabled="False" />
                    <Button Content="検索文字列クリア" Height="72" HorizontalAlignment="Left" Margin="130,390,0,0" Name="Button2" VerticalAlignment="Top" Width="270" Foreground="#FF555555" Background="Cornsilk" BorderBrush="DarkKhaki" BorderThickness="1" IsEnabled="False" />
                </Grid>
            </controls:PanoramaItem>

以上を配置しても、分類選択用の<ListBox>には、何も表示されません。

5_1_2 

なぜなら、分類項目は、小さなXML文書ファイル(CookKey.xml)として作成し、ローカルで読み込んで使っているからです。
ここをクリック」してダウンロードしてください。文字コードはutf-8です。

このCookKey.xmlを追加します。プロジェクト名を右クリックして「追加/新規フォルダ」を選択し、dataという名前のフォルダを作成します。作成したフォルダを右クリックして「既存のアイテム」を選択し、CookKey.xmlを追加しておきます。

5_2

「デバッグ/デバッグ開始」で、一度表示してみましょう。分類選択用の<ListBox>には選択候補は表示されませんし、2個のButtonも表示されませんが、以上で検索フォームの形はできあがりました。

5_3

次回に続きます。

Comment(0)

コメント

コメントを投稿する