Question

How to create a ListView in WPF so that some ListViewItems have icon and some not? I'd like to achive the ListView as in the below image.

Desired result

I started with the below code but didn't get how to set the icon to the first 4 items only but not to other items. If the item has no icon, its text should left-align with any icon as shown in the image.

I also need to give the items with no icon slightly higher height than the items with icon.

<ListView>
      <ListView.Items>
            <ListViewItem Content="Save" />
            <ListViewItem Content="Save As" />
            <ListViewItem Content="Open" />
            <ListViewItem Content="Close" />
            <ListViewItem Content="Info" />
            <ListViewItem Content="Recent" />
            <ListViewItem Content="New" />
      </ListView.Items>
       <ListView.View>
            <GridView>
                  <GridViewColumn>
                        <GridViewColumn.CellTemplate>
                              <DataTemplate>
                                 ' ???
                               </DataTemplate>
                        </GridViewColumn.CellTemplate>
                   </GridViewColumn>
             </GridView>
       </ListView.View>            
 </ListView>
Was it helpful?

Solution

Though i agree that this seems like a Menu and not a ListView as mentioned above , this would still be relevant with the use of MenuItems.

You should be aware that Content in Wpf can be set in 2 ways a Direct value like String , StaticResource , Binding (all are shorts of strings) , and a declarative value which you can describe a tree of elements as your content like iv'e shown below.

<ListView>
    <ListView.Items>
        <ListViewItem>
            <ListViewItem.Content>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="2*"/>
                    </Grid.ColumnDefinitions>

                    <Image Source="SomeSource.png" />
                    <TextBlock Text="Save" Grid.Column="1" />

                </Grid>
            </ListViewItem.Content>
        </ListViewItem>
        <ListViewItem Content="Save As" />
        <ListViewItem Content="Open" />
        <ListViewItem Content="Close" />
        <ListViewItem Content="Info" />
        <ListViewItem Content="Recent" />
        <ListViewItem Content="New" />
    </ListView.Items>

</ListView>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top