WPF - Create ImageGrid with ItemsControl?

Question

sorry to bug you with a beginner question. I am trying to achieve an Image Grid (like in a comic viewer or a movie database) with WPF in C#.

Now I tried to use ListView and ListBox initially but I did not get it working to have a simple styled image grid. Then I stumbled upon an ItemsControl in combination with a WrapPanel. This worked out fine easily.

Then I tried to implement a method that opens the clicked image and I got stuck. Now I found in various articles that ItemsControl does not supply actions to read the currently selected item index.

Now I am a bit disillusioned how to go on. Do you have an example code for a simple ImageGrid or an Idea to use the ItemsControl anyway? The only idea I had was to read the Image source of the sender object and then compare it with a list of images.

Here is my XAML code:

<ItemsControl Name="ImageHistory" Margin="100" HorizontalAlignment="Center" HorizontalContentAlignment="Center">
<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel/>
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
    <DataTemplate>
        <StackPanel Margin="15" MouseUp="OpenDirectory" MouseEnter="HighlightButton" MouseLeave="UnhighlightButton">
            <Image Source="{Binding ImageData}" Height="150" Width="150" Margin="10"
                RenderOptions.BitmapScalingMode="HighQuality" Stretch="UniformToFill"/>
        </StackPanel>
    </DataTemplate>
</ItemsControl.ItemTemplate>

Thanks a lot in advance!!

Answer 1

Ok, I did it. It was quite simple as soon as I asked the right question. Removing the scroll functionality did the trick. Here is the working code:

<ListBox Name="FolderList" Margin="100" HorizontalAlignment="Center" HorizontalContentAlignment="Center"  ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
    <ItemsPanelTemplate >
        <WrapPanel/>
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Background="{DynamicResource ButtonDefault}" Margin="25"
                MouseUp="LoadFolder" MouseEnter="ButtonLight_MouseEnter" MouseLeave="ButtonLight_MouseLeave">
            <Image Source="{Binding ImageData}" Stretch="UniformToFill" RenderOptions.BitmapScalingMode="HighQuality"  
                Width="250" Height="250" Margin="25"/>
            <DockPanel Margin="0,25,0,25">
                <TextBlock Text="{Binding Caption}" Width="400" Margin="10" DockPanel.Dock="Top"
                    FontFamily="Perpetua Titling MT" FontSize="24" Foreground="{DynamicResource TextColorHeader}"/>
                <TextBlock Text="{Binding FolderPath}" Width="400" Margin="10" TextWrapping="Wrap" DockPanel.Dock="Bottom"
                    FontFamily="Lato Light" FontSize="16" Foreground="{DynamicResource TextColorSubtext}" FontStyle="Italic"/>
                <TextBlock Text="{Binding Subtext}" Width="400" Margin="10" TextWrapping="Wrap" DockPanel.Dock="Top"
                    FontFamily="Lato Light" FontSize="16" Foreground="{DynamicResource TextColorSubtext}"/>
            </DockPanel>
        </StackPanel>
    </DataTemplate>
</ListBox.ItemTemplate>

Thanks a lot anyway :)