質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.03%

ストアアプリで使える、WrapPanelのようなものはありますか?

受付中

回答 4

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 3,252

score 205

VisualStudio2015、ストアアプリに関してですが、

WPFでいうところの、WrapPanelってありますか?
StackPanelを使っていたのですが折り返しができなくて><、

textblockでいう、wrappingみたいに、
指定した大きさ内で、折り返して表示させたいです。

具体的なサンプルコードは、
(xaml)
<StackPanel Height="50" Width="100" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top" >
                            <TextBlock Text="12" Style="{StaticResource Numeric}"/>
                            <TextBlock Text="時と" Style="{StaticResource String}"/>
                            <TextBlock Text="15" Style="{StaticResource Numeric}"/>
                            <TextBlock Text="時はおなかがへって力が出ない" Style="{StaticResource String}"/>
</StackPanel>
Runを使わない理由は、Styleを使えないからです。


StackPanel
 水平方向、或いは垂直方向にただただ配置するパネル。
やる事、やれる事がシンプルなので軽い。Gridよりは軽い。
StackPanelはそれ(軽さ)で重宝される。

WrapPanel
 折り返しができるStackPanel。折り返しができるのがポイント。
折り返せることに意味がある。

宜しくお願い致します。
------------------------------追記------------------------------
こうしたい↓
イメージ説明
こうなる(現状)↓
イメージ説明
枠からはみ出るのを、白い枠内で折り返したい。
TextAlignmentでしょうか?
違うような...

回答を参考にしようと試みるも、
エラーが・・・
イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+1

ItemsWrapGrid はどうでしょう?
ItemsWrapGrid class - Windows app development

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/18 14:19

    回答有難うございます。
    該当箇所がどこかわからず、、
    <ItemsControl Grid.Column="1">
    <ItemsWrapGrid Grid.Column="1"/>
    </ItemsControl>
    と書いてみましたが、波線エラーが出ております。
    質問欄に追記しましたので、ご確認の程宜しくお願い致します。
    低レベルですみません。

    キャンセル

0

こんにちは。

shoさんが仰っているとおりItemsWrapGridを使用するのが
定石だと思います。

調べてみるとカスタマイズしたWrapPanelを実装するサンプルがあったので
こちらもご紹介しておきますね。

http://www.codeproject.com/Articles/463860/WinRT-Custom-WrapPanel

検証してないですが、机上でコードを見た感じいけそうな気がします。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/18 14:21

    お世話になります。
    英語のページを普通に読まれるんですね。。
    エンジニアはみなさん通る道なのでしょうか?
    解読できず、申し訳ありません。
    WrapPanel を見つけられませんでした。


    また、拾ってきた記事で、
    デフォルトの GridView の ItemsPanel に設
    定されている ItemsWrapGrid は、GroupStyle の Panel で定義された Margin を無視する挙動にな
    るため、グループ間に隙間を設けたい場合は、GridView の ItemsPanel プロパティもあわせて設
    定します。
    ヘッダーに、グループを表すアルファベット一文字を表示して、グループを横並びにある程度
    間隔をあけて表示する GroupStyle の定義を以下に示します。
    106
    このページを見る
    <GridView
    Grid.Row="1"
    ItemsSource="{Binding Source={StaticResource dataSource}}"
    ItemTemplate="{StaticResource PersonDataTemplate}">
    <GridView.GroupStyle>
    <GroupStyle>
    <GroupStyle.HeaderTemplate>
    <!-- グループ単位のヘッダーの見た目を定義します。 -->
    <DataTemplate>
    <TextBlock
    Text="{Binding FirstCharacter}"
    Style="{ThemeResource SubheaderTextBlockStyle}"/>
    </DataTemplate>
    </GroupStyle.HeaderTemplate>
    <GroupStyle.Panel>
    <!-- グループは横並びに、右に80pxの余白をあけてグループ間を離して配置する
    -->
    <ItemsPanelTemplate>
    <VariableSizedWrapGrid Margin="0,0,80,10"/>
    </ItemsPanelTemplate>
    </GroupStyle.Panel>
    </GroupStyle>
    </GridView.GroupStyle>
    </GridView>

    グループ同士は横並びに表示したいため、GridView の ItemsPanel に VirtualizingStackPanel を
    設定します。XAML を以下に示します。
    <GridView.ItemsPanel>
    <ItemsPanelTemplate>
    <VirtualizingStackPanel Orientation="Horizontal" />
    </ItemsPanelTemplate>
    </GridView.ItemsPanel>


    というのがありましたが、参考になりますでしょうか?

    質問欄に追記しましたので、ご確認の程宜しくお願い致します。
    低レベルですみません。

    キャンセル

0

こんにちは。

先日の質問「空白space文字コード教えてください」と
今回の質問とその追記を見て、回答します。

ぐぐっと難易度があがりますが、
RichTextBlockを使ってみてはいかがでしょうか。
https://msdn.microsoft.com/ja-jp/library/windows/apps/windows.ui.xaml.controls.richtextblock.aspx

WrapPanelを使おうとしていた箇所は、RichTextBlockのTextWrappingプロパティで対応します。
どうしても文中にStyleを使いたいときは、InlineUIContainerの使用を検討してみてください。

以上です。
できなかったらごめんなさい。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

こんばんは。

コードを書いて確認してみたのですが、TextBlock(Runを使わない)で組み立てていくと
文としてきれいな形にするのはなかなか大変なように思えました。
# 方法を知らないだけかも知れませんが。。

試した方法は、daichanさんから頂いているのと同じRichTextBlockです。
TextBlockを使って、文字と数値で異なるStyleを適用しています。
    <Page.Resources>
        <!-- Styleの定義 -->
        <Style x:Key="String" TargetType="TextBlock">
            <Setter Property="FontSize" Value="15"/>
            <Setter Property="TextWrapping" Value="Wrap"/>
            <Setter Property="Foreground" Value="Green"/>
        </Style>
        <Style x:Key="Numeric" TargetType="TextBlock">
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="Foreground" Value="Red"/>
        </Style>
    </Page.Resources>

<!-- 省略 -->

        <!-- RichTextBlock -->
        <RichTextBlock HorizontalAlignment="Left" Height="319" Margin="169,197,0,0" VerticalAlignment="Top" Width="472">
            <Paragraph>
                <InlineUIContainer>
                    <TextBlock Style="{StaticResource Numeric}">12</TextBlock>
                </InlineUIContainer>
                <InlineUIContainer>
                    <TextBlock Style="{StaticResource String}">時と</TextBlock>
                </InlineUIContainer>
                <InlineUIContainer>
                    <TextBlock Style="{StaticResource Numeric}">15</TextBlock>
                </InlineUIContainer>
                <InlineUIContainer>
                    <TextBlock Style="{StaticResource String}">時はおなかがへって力が出ない</TextBlock>
                </InlineUIContainer>
                <InlineUIContainer>
                    <TextBlock Style="{StaticResource String}">テキストブロックを並べるように配置していくと、改行が必要になったときに思わない所で改行される事がありそう</TextBlock>
                </InlineUIContainer>
                <InlineUIContainer>
                    <TextBlock Style="{StaticResource Numeric}">123</TextBlock>
                </InlineUIContainer>
                <InlineUIContainer>
                    <TextBlock Style="{StaticResource String}">こういった形になるのが嫌なパターン。。。。。</TextBlock>
                </InlineUIContainer>
            </Paragraph>
        </RichTextBlock>

デザイン画面のスクリーンショット
イメージ説明TextBlockが矩形なので、文字として詰められてないんですよね。。。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/18 22:54

    意外といい感じにいけそうですね。

    > テキストブロックを並べるように配置していくと、・・・
    InlineUIContainerの使用は最低限にしてみてはいかがでしょうか。

    たとえば、
    RichTextBlockのStyleに"String"を適用し、
    数字の箇所だけInlineUIContainerを使用して"Numeric"のStyleを適用する、
    といった感じです。

    キャンセル

  • 2015/09/19 00:19

    daichanさん、コメントありがとうございます。
    なるほど、記述から冗長な作りになっていたかも知れませんね。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る