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

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

新規登録して質問してみよう
ただいま回答率
85.50%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

XAML

XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

teratail

teratail(テラテイル)は、プログラミングに特化した日本語Q&Aサイトです。

Visual Studio 2013

Microsoft Visual Studio 2013は、Microsoftによる統合開発環境(IDE)であり、多種多様なプログラミング言語に対応しています。 Visual Studio 2012の次のバージョンです

Q&A

4回答

4588閲覧

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

b1ackc0ffee

総合スコア267

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

XAML

XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

teratail

teratail(テラテイル)は、プログラミングに特化した日本語Q&Aサイトです。

Visual Studio 2013

Microsoft Visual Studio 2013は、Microsoftによる統合開発環境(IDE)であり、多種多様なプログラミング言語に対応しています。 Visual Studio 2012の次のバージョンです

0グッド

1クリップ

投稿2015/09/18 03:49

編集2022/01/12 10:55

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

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

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

具体的なサンプルコードは、
(xaml)

xaml

1<StackPanel Height="50" Width="100" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top" > 2 <TextBlock Text="12" Style="{StaticResource Numeric}"/> 3 <TextBlock Text="時と" Style="{StaticResource String}"/> 4 <TextBlock Text="15" Style="{StaticResource Numeric}"/> 5 <TextBlock Text="時はおなかがへって力が出ない" Style="{StaticResource String}"/> 6</StackPanel>

Runを使わない理由は、Styleを使えないからです。

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

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

宜しくお願い致します。
------------------------------追記------------------------------
こうしたい↓
イメージ説明

こうなる(現状)↓
イメージ説明

枠からはみ出るのを、白い枠内で折り返したい。
TextAlignmentでしょうか?
違うような...

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

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

投稿2015/09/18 04:14

sho_cs

総合スコア3541

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

b1ackc0ffee

2015/09/18 05:19

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

0

こんばんは。

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

方法を知らないだけかも知れませんが。。

試した方法は、daichanさんから頂いているのと同じRichTextBlockです。
TextBlockを使って、文字と数値で異なるStyleを適用しています。

XAML

1 <Page.Resources> 2 <!-- Styleの定義 --> 3 <Style x:Key="String" TargetType="TextBlock"> 4 <Setter Property="FontSize" Value="15"/> 5 <Setter Property="TextWrapping" Value="Wrap"/> 6 <Setter Property="Foreground" Value="Green"/> 7 </Style> 8 <Style x:Key="Numeric" TargetType="TextBlock"> 9 <Setter Property="FontSize" Value="18"/> 10 <Setter Property="Foreground" Value="Red"/> 11 </Style> 12 </Page.Resources> 13 14<!-- 省略 --> 15 16 <!-- RichTextBlock --> 17 <RichTextBlock HorizontalAlignment="Left" Height="319" Margin="169,197,0,0" VerticalAlignment="Top" Width="472"> 18 <Paragraph> 19 <InlineUIContainer> 20 <TextBlock Style="{StaticResource Numeric}">12</TextBlock> 21 </InlineUIContainer> 22 <InlineUIContainer> 23 <TextBlock Style="{StaticResource String}">時と</TextBlock> 24 </InlineUIContainer> 25 <InlineUIContainer> 26 <TextBlock Style="{StaticResource Numeric}">15</TextBlock> 27 </InlineUIContainer> 28 <InlineUIContainer> 29 <TextBlock Style="{StaticResource String}">時はおなかがへって力が出ない</TextBlock> 30 </InlineUIContainer> 31 <InlineUIContainer> 32 <TextBlock Style="{StaticResource String}">テキストブロックを並べるように配置していくと、改行が必要になったときに思わない所で改行される事がありそう</TextBlock> 33 </InlineUIContainer> 34 <InlineUIContainer> 35 <TextBlock Style="{StaticResource Numeric}">123</TextBlock> 36 </InlineUIContainer> 37 <InlineUIContainer> 38 <TextBlock Style="{StaticResource String}">こういった形になるのが嫌なパターン。。。。。</TextBlock> 39 </InlineUIContainer> 40 </Paragraph> 41 </RichTextBlock> 42

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

投稿2015/09/18 12:44

sgr-2

総合スコア294

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

daichan

2015/09/18 13:54

意外といい感じにいけそうですね。 > テキストブロックを並べるように配置していくと、・・・ InlineUIContainerの使用は最低限にしてみてはいかがでしょうか。 たとえば、 RichTextBlockのStyleに"String"を適用し、 数字の箇所だけInlineUIContainerを使用して"Numeric"のStyleを適用する、 といった感じです。
sgr-2

2015/09/18 15:19

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

0

こんにちは。

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

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

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

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

投稿2015/09/18 07:33

daichan

総合スコア225

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

こんにちは。

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

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

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

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

投稿2015/09/18 04:20

Tak1wa

総合スコア4791

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

b1ackc0ffee

2015/09/18 05: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> というのがありましたが、参考になりますでしょうか? 質問欄に追記しましたので、ご確認の程宜しくお願い致します。 低レベルですみません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問