2

WinJS 開発は初めてで、次のようなレイアウトの良い例が見つかりません。

1 行の WinJS レイアウト

理想的には、3 つまたは 4 つの「列」を持つレイアウトを作成できるように、各項目はパーセンテージ ベースになります。誰かが私を正しい方向に向けることができますか? ありがとう！

4

2 に答える 2

2

選択、グループ化、並べ替えなどの豊富な機能を使用する場合は、@ Louis_PIG が回答したソリューションを使用してください。そのような非常に基本的な水平レイアウトが必要な場合は、disply:-ms-flexboxCSS 表示プロパティを使用します。div を作成して設定すると、そのすべての子が水平に配置されます。その後、子とそのサイズと位置をあらゆる種類で制御できます。相対的な幅を設定したり、均等に分散したり、引き伸ばしたりすることができます。フレックスボックスに関する多くの情報については、これを参照してください。

これがフレックスボックスのサンプルです...

<!-- HTML snippet -->    
<div class="flex">
    <div></div>
    <div></div>
    <div></div>
</div

/* CSS snippet */
.flex {
    display: -ms-flexbox;
}
于 2013-01-02T16:02:37.737 に答える
0

GridLayout.maxRow物件をお探しの方も多いでしょう。

<!-- This doesn't work, see NOTE below -->
<div data-win-control="WinJS.UI.ListView"
 data-win-options="{layout: {type: WinJS.UI.GridLayout, maxRows: value}}">
</div>

参照: http://msdn.microsoft.com/en-us/library/windows/apps/br211750.aspx

注:上記のスニペットは機能しませんが、更新されたJavascriptコードは同じ目的で機能するはずです。

表示する項目が増えると仮定するとviewport、画面の幅に応じて 3 つまたは 4 つの項目のみを保持する必要があります。次に、CSS Media Query を使用して、さまざまなスタイルをさまざまな画面幅に適用できます。または、実行時に画面サイズに応じてアイテムのサイズを計算し、ListView.itemTempalte. 正確に何を探しているかについて、より多くの情報を提供していただけますか?

私自身の意見では、WinJS.UI.ListViewコントロールは「パノラマ」ビューを導入します。これは通常、意図的に「スクロールする必要がある」という兆候を残します。そのため、「一定の」数のアイテムを に表示するListViewことは好ましくない場合があります。ユーザーは、 の外にさらにアイテムが存在することに気付かない可能性があるからviewportです。

更新：

@rattrick1 が指摘したように、HTMLMSDN のものと同じコードであっても、上記のスニペットは機能しません。によって作成されたデフォルト アプリケーションのコードを変更しましたが、Visual Studioそれでも 2 行が表示されます。誰かが上記の何が問題なのかを指摘できれば、それは素晴らしいことです!

だから私はプロパティを設定しようとしましたがJavascript、それは私のために働きます:

のApp1\pages\groupedItems\groupedItems.js

    _initializeLayout: function (listView, viewState) {
            listView.itemDataSource = Data.items.dataSource;
            listView.groupDataSource = Data.groups.dataSource;
            listView.layout = new ui.GridLayout();
            // limit the List View to display only 1 row
            listView.layout.maxRows = 1;
    }

これが機能しない場合はお知らせください。

于 2013-01-02T05:44:20.663 に答える