ListView messing up the UI of DataTemplates

Question

I'm porting my WP8.1 app to UWP and I discovered that the new universal ListView likes to mess around with the UI of DataTemplaes by adding some extra elements and logic (like some background colors when the mouse covers an item).

Let's say I have a very simple template like this:

<DataTemplate x:Key="IconsTemplate">
    <Grid Width="40"
          Height="40">
        <Image Source="{Binding IconImage}"/>
    </Grid>
</DataTemplate>

And this ListView:

<ListView ItemTemplate="{StaticResource IconsTemplate}"
          ItemsSource="{x:Bind ViewModel.Source, Mode=OneWay}"
          CanReorderItems="False">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

I'd expect to get, just like on WP8.1, a simple wrap grid with my 40*40 items with an image inside them. Instead, I get this:

Every item is rectangular instead of square (I mean, those are clearly not my 40*40 templates), and I also have an automatic logic on the background color of my templates.

I don't want any of that, I want my templates to be displayed exactly as they are, and I want to be able to manually set my logic for the pointer events.

I tried looking at the default ListView template but I didn't find anything useful there, is there a parameter I'm missing or is there a way to just get the ListView to display the plain items like it used to do in WP8.1?

Answer 1

I managed to fix the issue by using a custom Style for the ListViewItems. Here is the Style I used:

<Style TargetType="ListViewItem" x:Key="CustomListViewItemExpanded">
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="Transparent" />
    <Setter Property="TabNavigation" Value="Local"/>
    <Setter Property="IsHoldingEnabled" Value="True"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Margin" Value="0"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="MinWidth" Value="0"/>
    <Setter Property="MinHeight" Value="0"/>
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewItem">
                <Grid x:Name="ContentBorder"
                        BorderThickness="0">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <PointerDownThemeAnimation TargetName="ContentPresenter" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOverSelected">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PressedSelected">
                                <Storyboard>
                                    <PointerDownThemeAnimation TargetName="ContentPresenter" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="DisabledStates">
                            <VisualState x:Name="Enabled"/>
                            <VisualState x:Name="Disabled"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="MultiSelectStates">
                            <VisualState x:Name="MultiSelectDisabled"/>
                            <VisualState x:Name="MultiSelectEnabled"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="DataVirtualizationStates">
                            <VisualState x:Name="DataAvailable"/>
                            <VisualState x:Name="DataPlaceholder"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ReorderHintStates">
                            <VisualState x:Name="NoReorderHint"/>
                            <VisualState x:Name="BottomReorderHint"/>
                            <VisualState x:Name="TopReorderHint"/>
                            <VisualState x:Name="RightReorderHint"/>
                            <VisualState x:Name="LeftReorderHint"/>
                            <VisualStateGroup.Transitions>
                                <VisualTransition To="NoReorderHint" GeneratedDuration="0:0:0.2"/>
                            </VisualStateGroup.Transitions>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="DragStates">
                            <VisualState x:Name="NotDragging" />
                            <VisualState x:Name="Dragging"/>
                            <VisualState x:Name="DraggingTarget"/>
                            <VisualState x:Name="MultipleDraggingPrimary"/>
                            <VisualState x:Name="MultipleDraggingSecondary"/>
                            <VisualState x:Name="DraggedPlaceholder"/>
                                <VisualStateGroup.Transitions>
                                <VisualTransition To="NotDragging" GeneratedDuration="0:0:0.2"/>
                            </VisualStateGroup.Transitions>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter x:Name="ContentPresenter"
                                        ContentTransitions="{TemplateBinding ContentTransitions}"
                                        ContentTemplate="{TemplateBinding ContentTemplate}"
                                        Content="{TemplateBinding Content}"
                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                        Margin="{TemplateBinding Padding}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

This will disable all the VisualStates, it will remove all the unnecessary controls that were present in the template and will allow each item to be rendered with its original size.