creating Icon View mode for ListView WPF

Question

I'm Trying to change listView GridView to IconView, as you see in the screenshot, each item is taking a row.

enter image description here

Style XAML

<UserControl.Resources>
<Style x:Key="FileItemStyle" TargetType="{x:Type ListViewItem}">
        <Setter Property="Width" Value="50"/>
        <Setter Property="Margin" Value="5,5,5,5"/>
        <Setter Property="Padding" Value="0,0,0,0"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="Template">
           <Setter.Value>
                <ControlTemplate  TargetType="{x:Type ListViewItem}">
                    <Grid HorizontalAlignment="Left" VerticalAlignment="Top" Height="50" Width="50">
                        <Border x:Name="border" BorderBrush="{x:Null}" BorderThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="2.5"/>
                        <StackPanel HorizontalAlignment="Stretch"  VerticalAlignment="Stretch">

                            <ContentPresenter />
                        </StackPanel>
                    </Grid>
        </ControlTemplate>
     </Setter.Value>
     </Setter>
    </Style>
</UserControl.Resources>

ListView XAML

    <ListView ItemContainerStyle="{DynamicResource FileItemStyle}" HorizontalAlignment="Left" Height="194.667" Margin="11,77.666,0,0" VerticalAlignment="Top" Width="368.667" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True" UseLayoutRounding="False">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid HorizontalAlignment="Left" Height="50">
                    <Border x:Name="border" BorderBrush="{x:Null}" BorderThickness="1" HorizontalAlignment="Stretch" Height="50" VerticalAlignment="Stretch" Width="50" CornerRadius="2.5"/>
                    <StackPanel>
                        <Image x:Name="Img" Source="BtnImg/Computer.png" Stretch="None" Margin="9,0,9,0" Width="32" Height="32"/>
                        <TextBlock x:Name="PCName" Margin="0" TextWrapping="Wrap" Height="18" HorizontalAlignment="Stretch" TextAlignment="Center"><Run Text="{Binding Content}"/></TextBlock>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListBoxItem Content="ddd"/>  <!--**-->
        <ListViewItem Content="zczxcz"/>
    </ListView>

I've tried to use MDSN example : How to: Create a Custom View Mode for a ListView and modify it to get what I need, but it didn't work with me, I actually couldn't understand the example clearly, anyone can Simplify how can I create a View mode? Do I have to create an overrided ViewBase class?

Thanks in advance

You're mixing `ListView`, and `ListBox`, remove the `ListView` and use `ListBox`-specific XAML. — Federico Berasategui, Dec 13 '13 at 18:16
@HighCore Ok I've changed everything to `ListView` and `ListViewItem`, now the style lost, but check this http://postimg.org/image/cueewkt4l/ Why is this happening? — Murhaf Sousli, Dec 13 '13 at 18:45
@HighCore also I changed all of them to `ListBox` and `ListBoxItem` the style is lost too — Murhaf Sousli, Dec 13 '13 at 18:52
@HighCore done, but here's the screenshot http://postimg.org/image/cueewkt4l/ — Murhaf Sousli, Dec 13 '13 at 19:01

score 17 · Accepted Answer · edited May 23 '17 at 12:33

Using the same exact Code Behind as My Answer to your previous question:

 <Style x:Key="FileItemStyle" TargetType="{x:Type ListViewItem}">
        <Setter Property="Margin" Value="5,5,5,5"/>
        <Setter Property="Padding" Value="0,0,0,0"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate  TargetType="{x:Type ListViewItem}">
                    <Grid HorizontalAlignment="Left" VerticalAlignment="Top" Height="50" >
                        <Border x:Name="border" BorderBrush="{x:Null}" BorderThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="2.5"/>
                        <StackPanel HorizontalAlignment="Stretch"  VerticalAlignment="Stretch">
                            <ContentPresenter/>
                        </StackPanel>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Then:

    <ListView ItemsSource="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
              SelectedItem="{Binding SelectedComputer, RelativeSource={RelativeSource AncestorType=Window}}"
              ItemContainerStyle="{StaticResource FileItemStyle}">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>

        <ListView.ItemTemplate>
            <DataTemplate>
                <DockPanel>
                    <TextBlock DockPanel.Dock="Bottom" Text="{Binding Name}"/>
                    <Rectangle Height="32" Width="32" Fill="Blue"/>
                </DockPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Result:

enter image description here

Remove the hardcoded Width and Heights
Replace the blue rectangle for your Image.
Add some Triggers in the ControlTemplate so that you get highlighting when IsSelected="True"
Simply change the ItemsPanel of any ItemsControl in order to define how items are laid out.
Using a WrapPanel, you get a layout similar to Windows Explorer, where items are placed horizontally until there is no more horizontal space and then another "row" is created. Run the example and resize the Window to see this.

Bottom line: NO, you don't need custom code to customize the UI in WPF. It can be done with the existing controls and some XAML. Please read the "Alternatives to Writing a New Control" section in MSDN: Control Authoring Overview

damnit HC, I was just sitting there typing out to change the ItemsPanel... +1 — Chris W., Dec 13 '13 at 19:09
one more question, I used `TextWrapping="Wrap"` for the `textBlock` to force it to resize itself when the text need more space, I want the Item "height" resize with it, to make sure textBlock is shown, what should i do? — Murhaf Sousli, Dec 13 '13 at 20:19
@MurHaf The `Grid` inside the `ListViewItem` template (in the style) has a hardcoded `Height="50"`. Remove that and it will be auto-sized to the contents. — Federico Berasategui, Dec 13 '13 at 20:23
@MurHaf it's also much more visually elegant if you use `TextAlignment="Center"` on the `TextBlock`. — Federico Berasategui, Dec 13 '13 at 20:24

creating Icon View mode for ListView WPF

1 Answers1

Linked