C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

特定個数で折り返す横並びのリスト

[トピック内 3 記事 (1 - 3 表示)]  << 0 >>

■89128 / inTopicNo.1)  特定個数で折り返す横並びのリスト
  
□投稿者/ りんく (8回)-(2018/11/01(Thu) 09:12:14)

分類:[.NET 全般] 

Visual Studio 2017
C#
WPF

アルファベットを横並びで1セルずつ表示し、
1つ1つを選択できるリストを作りたいです。

例
A B C D E F G H ※ここで折り返し(8個ごとに折り返し)
I J K L M N O P ※ここで折り返し(8個ごとに折り返し)
Q R S T U V W X ※ここで折り返し(8個ごとに折り返し)
Y Z
画面には4個までしか表示されないため、横スクロールバーを表示する

今は ListView を使用して横表示で実現しようと試みています。
ただ、これで8個ごとに折り返す方法がわかりません。
折り返しの個数を指定することはできますか?
実現させるには ListView ではだめでしょうか?

<ListView ItemsSource="{Binding Alphabets}">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Height" Value="25"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Alpha}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

引用返信 編集キー/
■89130 / inTopicNo.2)  Re[1]: 特定個数で折り返す横並びのリスト
□投稿者/ Hongliang (717回)-(2018/11/01(Thu) 09:47:59)
TextBlockにもListViewItemにもWidthが指定されていないのは意図的でしょうか。
WrapPanelで並べる場合、使用するフォントによっては1行目8個2行目7個みたいなことになりかねませんが。

WrapPanelを使用する場合、<WrapPanel Width="..." .../>のようにパネル自体の横幅を固定すればいいかと思います。
幅ベースではなく個数ベースということなら、WrapPanelに代えてUniformGridを使うのも一案です。
<UniformGrid Columns="8" VerticalAlignment="Top"/>
引用返信 編集キー/
■89131 / inTopicNo.3)  Re[2]: 特定個数で折り返す横並びのリスト
□投稿者/ りんく (9回)-(2018/11/01(Thu) 10:22:42)
No89130 (Hongliang さん) に返信
ご返信ありがとうございます。

> TextBlockにもListViewItemにもWidthが指定されていないのは意図的でしょうか。
> WrapPanelで並べる場合、使用するフォントによっては1行目8個2行目7個みたいなことになりかねませんが。
等幅フォントを使用しているのでItemごとの幅は同じになるようにしています。


> WrapPanelを使用する場合、<WrapPanel Width="..." .../>のようにパネル自体の横幅を固定すればいいかと思います。
Alphabets が A B C までしか存在しなかった場合にスクロールバーを表示したくないので
<WrapPanel MaxWidth="..." .../>として期待する動作になりました。
ありがとうございました。

解決済み
引用返信 編集キー/

このトピックをツリーで一括表示


トピック内ページ移動 / << 0 >>

このトピックに書きこむ