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

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

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

WPF ListViewでLargeIcon風に表示

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

■86078 / inTopicNo.1)  WPF ListViewでLargeIcon風に表示
  
□投稿者/ きみのぶ (1回)-(2017/12/16(Sat) 11:02:37)

分類:[.NET 全般] 

WPF ListViewでLargeIcon風に表示する方法が分かりません。

例)
        <ListView Name="listView1" HorizontalAlignment="Stretch" Grid.Row="1" VerticalAlignment="Stretch" ItemsSource="{Binding IconBitmapCollection, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"  >
            <ListView.View>
                <GridView>
                    <GridViewColumn>
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Vertical">
                                    <Image Source="{Binding BitmapSource}" />
                                    <TextBlock Text="{Binding Index}" />
                                </StackPanel>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>

これだとエクスプローラの詳細表示のように、1行に1つのアイテムしか表示されません。エクスプローラのアイコン表示のように、1行に複数のアイテムを表示する方法を模索しています。
多分、GridViewを使わない方法になると思うのですが。

どなたか、ご教示願います。

引用返信 編集キー/
■86080 / inTopicNo.2)  Re[1]: WPF ListViewでLargeIcon風に表示
□投稿者/ Hongliang (580回)-(2017/12/16(Sat) 11:25:27)
ListView.Viewを設定しなければいいです。
各アイテムの表示内容は、ListView.ItemTemplateで設定します。
引用返信 編集キー/
■86081 / inTopicNo.3)  Re[2]: WPF ListViewでLargeIcon風に表示
□投稿者/ きみのぶ (3回)-(2017/12/16(Sat) 11:39:24)
No86080 (Hongliang さん) に返信
> ListView.Viewを設定しなければいいです。
> 各アイテムの表示内容は、ListView.ItemTemplateで設定します。

下記のようにしてみました。

<ListView Name="listView1" HorizontalAlignment="Stretch" Grid.Row="1" VerticalAlignment="Stretch" ItemsSource="{Binding IconBitmapCollection, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Width="40" Height="40">
<Image Source="{Binding BitmapSource}" Width="40" Height="40"/>
<TextBlock Text="{Binding Index}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

すると、行は作成されるようですが、何も表示されません。
何がいけないのでしょうか?
引用返信 編集キー/
■86083 / inTopicNo.4)  Re[3]: WPF ListViewでLargeIcon風に表示
□投稿者/ Hongliang (581回)-(2017/12/16(Sat) 20:49:21)
すいません、横方向優先で並べて、かつ横幅で自動折り返しを行う、という並べ方をする場合、
・ListViewのScrollViewrer.HorizontalScrollBarVisiibility添付プロパティをDisabledにする
<ListView ScrollViewrer.HorizontalScrollBarVisibility="Disabled">
・ItemsPanelにWrapPanelを設定する
<ListView.ItemsPanel>
  <ItemsPanelTemplate>
    <WrapPanel />
という2つの記述が必要でした。

> 行は作成されるようですが、何も表示されません。
なにも表示されない、というのは、DataTemplate内の記述が間違っていると思われます。
単純に
<DataTemplate><TextBlock Text={Binding}/></DataTemplate>
だけにした場合、コレクション内の個々の要素は表示されますか?
// ToStringをオーバーライドしていない限り、型名がそのまま表示されるはず。

引用返信 編集キー/
■86085 / inTopicNo.5)  Re[4]: WPF ListViewでLargeIcon風に表示
□投稿者/ きみのぶ (5回)-(2017/12/17(Sun) 00:32:48)
No86083 (Hongliang さん) に返信
度々申し訳ございません。下記のように記述してみました。

        <ListView Name="listView1" HorizontalAlignment="Stretch" Grid.Row="1" VerticalAlignment="Stretch" 
                  ItemsSource="{Binding IconBitmapCollection, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"  >
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel>
                        <StackPanel Orientation="Vertical" Width="40" Height="40">
                            <Image Source="{Binding BitmapSource}" Width="40" Height="40"/>
                            <TextBlock Text="{Binding Index}" />
                        </StackPanel>
                    </WrapPanel>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
        </ListView>

すると、『InvalidOperationException: ItemsControl の ItemsPanel として使用される Panel の Children コレクションを、明示的に変更することはできません。ItemsControl は、Panel の子要素を生成します。』と言うエラーメッセージが表示されました。
ネットで調べたところ『ItemsPanel の子供達は ItemsSource を与えると中で自動で作成されるので、そこに別の子(Line)を手動で追加するロジックがあるとエラーになってしまう。』と言う記述を見つけました。
そこで、WrapPanelの子要素であるStackPanel以下の記述を削除すると、今度は行も生成されず、何も表示されません。
何がいけないのでしょうか?
重ね重ねすみません。出来たらご教示願います。

引用返信 編集キー/
■86086 / inTopicNo.6)  Re[5]: WPF ListViewでLargeIcon風に表示
□投稿者/ Hongliang (582回)-(2017/12/17(Sun) 09:45:47)
パネルのテンプレートとアイテムのテンプレートは別です。
<ListView ItemsSource="..." ScrollViewrer.HorizontalScrollBarVisibility="...">
  <ListView.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel />
    </ItemsPanelTemplate>
  </ListView.ItemsPanel>
  <ListView.ItemTemplate>
    <DataTemplate>
      <StackPanel Width="40" Height="40">
        <TextBlock Text="{Binding}" />
      </StackPanel>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>
とりあえずこれでどうなりますか?

引用返信 編集キー/
■86087 / inTopicNo.7)  Re[6]: WPF ListViewでLargeIcon風に表示
□投稿者/ きみのぶ (7回)-(2017/12/17(Sun) 11:17:14)
No86086 (Hongliang さん) に返信
> パネルのテンプレートとアイテムのテンプレートは別です。
> <ListView ItemsSource="..." ScrollViewrer.HorizontalScrollBarVisibility="...">
> <ListView.ItemsPanel>
> <ItemsPanelTemplate>
> <WrapPanel />
> </ItemsPanelTemplate>
> </ListView.ItemsPanel>
> <ListView.ItemTemplate>
> <DataTemplate>
> <StackPanel Width="40" Height="40">
> <TextBlock Text="{Binding}" />
> </StackPanel>
> </DataTemplate>
> </ListView.ItemTemplate>
> </ListView>
> とりあえずこれでどうなりますか?

何度もお答えいただきありがとうございます。

上記のXAMLを試しましたが、行も生成されず、何も表示されません。

私がやりたいのは、下記のサイトのようなものです。
http://www.kanazawa-net.ne.jp/~pmansato/wpf/wpf_ctrl_viewbase.htm
抽出したアイコンの下に、そのインデックスを表示したいのです。
上記のサイトにあるように、ResourceDictionaryを生成しないと出来ないのでしょうか。
ResourceDictionaryは、今の私には難易度が高く、何とか使わずにやりたいと考えています。

お手すきの際で結構ですので、またアドバイスをお願いいたします。
引用返信 編集キー/
■86088 / inTopicNo.8)  Re[7]: WPF ListViewでLargeIcon風に表示
□投稿者/ きみのぶ (9回)-(2017/12/17(Sun) 19:26:36)
ResourceDictionaryを使った方法を試してみました。

Themesフォルダ配下にGeneric.xamlを下記のように記述しました。
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:l="clr-namespace:IconExtracter"
xmlns:local="clr-namespace:IconExtracter">


<!-- ListViewのスタイル定義 -->
<Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type l:ImageView}, ResourceId=ImageView}" TargetType="{x:Type ListView}" BasedOn="{StaticResource {x:Type ListBox}}" >
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="0.5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border Name="bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{TemplateBinding Margin}">
<ScrollViewer Margin="{TemplateBinding Padding}">
<WrapPanel ItemWidth="160" IsItemsHost="True" MinWidth="100" Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}">
</WrapPanel>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<!-- ListViewItemのスタイル定義 -->
<Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type l:ImageView}, ResourceId=ImageViewItem}" TargetType='{x:Type ListViewItem}' BasedOn='{StaticResource {x:Type ListBoxItem}}'>
<!--
<Style.Resources>
<l:UriImageConverter x:Key="uriImageConverter"/>
</Style.Resources>
-->
<Setter Property='Padding' Value='3'/>
<Setter Property='Margin' Value='5'/>
<Setter Property='HorizontalContentAlignment' Value='Center'/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Border Background="White">
<StackPanel Orientation="Vertical">
<Grid Width="150" Height="126">
<Image Margin="0,3,0,3" Source="{Binding BitmapSource}" Width="{Binding PreferredWidth}" Height="{Binding PreferredHeight}"/>
</Grid>
<TextBlock Text="{Binding Index}" TextWrapping="Wrap" HorizontalAlignment="Center" FontSize="15" Name="WordText" Foreground="Black" Margin="0,0,0,5"/>
</StackPanel>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>

</ResourceDictionary>

そして、ListViewのxamlは、下記の通りに記述しました。
<ListView Name="listView1" HorizontalAlignment="Stretch" Grid.Row="1" VerticalAlignment="Stretch" ItemsSource="{Binding IconBitmapCollection, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" >

<ListView.View>
<local:ImageView x:Name="iconView" />
</ListView.View>
</ListView>

すると行は生成されますが、何も表示されません。
ItemsSourceにBindingしているIconBitmapCollectionは、下記の通りです。
private ObservableCollection<IconBitmap> iconBitmapCollection;
public ObservableCollection<IconBitmap> IconBitmapCollection
{
get
{
return this.iconBitmapCollection;
}
set
{
this.iconBitmapCollection = value;
base.RaisePropertyChanged("IconBitmapCollection");
}
}
IconBitmapクラスは下記の通りです。
class IconBitmap
{
private BitmapSource bitmapSource;
public BitmapSource BitmapSource
{
get
{
return this.bitmapSource;
}
set
{
this.bitmapSource = value;
}
}


private int index;
public int Index
{
get
{
return this.index;
}
set
{
this.index = value;
}
}
}
プログラムをステップ毎に実行させて調べたところ、IconBitmapクラスのgetメソッドが実行されません。
何がいけないのでしょうか?
引用返信 編集キー/
■86107 / inTopicNo.9)  Re[8]: WPF ListViewでLargeIcon風に表示
□投稿者/ きみのぶ (11回)-(2017/12/18(Mon) 19:52:48)
Hongliang さん

解決しました。
アドバイス、ありがとうございました。
引用返信 編集キー/
■86121 / inTopicNo.10)  Re[9]: WPF ListViewでLargeIcon風に表示
□投稿者/ きみのぶ (17回)-(2017/12/19(Tue) 15:48:09)
No86107 (きみのぶ さん) に返信
> Hongliang さん
>
> 解決しました。
> アドバイス、ありがとうございました。
解決済み
引用返信 編集キー/

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


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

このトピックに書きこむ