ListView испортил пользовательский интерфейс DataTemplates

Question

Я портирую свое приложение WP8.1 в UWP, и я обнаружил, что новый универсальный ListView любит возиться с пользовательским интерфейсом DataTemplaes, добавляя дополнительные элементы и логику (например, некоторые цвета фона когда мышь покрывает элемент).

Скажем, у меня есть очень простой шаблон:

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

И это ListView:

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

Я бы ожидать, чтобы получить, как и на WP8.1, простую обертку сетку с моими 40 * 40 элементами с изображением внутри них. Вместо этого, я получаю это:

Каждый элемент имеет прямоугольную форму вместо квадрата (я имею в виду, те явно не моих 40 * 40 шаблонов), и я также имеют автоматическую логику на цвет фона моих шаблонов.

Я не хочу ничего из этого, я хочу, чтобы мои шаблоны, которые будут отображаться точно как они есть, и я хочу, чтобы иметь возможность вручную установить мою логику для указателя событий.

Я попытался посмотреть шаблон по умолчанию ListView, но я не нашел там ничего полезного, есть ли параметр, который мне не хватает, или есть способ просто заставить ListView отображать простые элементы, как это было раньше в WP8.1?

Answer 1

Мне удалось исправить проблему, используя собственный стиль для ListViewItems. Вот стиль я использовал:

<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> 

Это отключит всех в VisualStates, он удалит все ненужные элементы управления, которые присутствовали в шаблоне и позволят каждому пункту быть вынесен с его первоначальным размером.