Search code examples
xamlwindows-store-apps

ListView - disable the mouse-down behavior


I have a ListView in my Windows Store app. I want it to be a static list (I'm using it because it supports virtualization, but if I should be using something else, let me know!). I've managed to disable most of the UI changes with mouse over, etc. However, one thing I've not figured out how to do is remove the click behavior. When you click on an item it shrinks a bit to give you feed back that it has been clicked. How do I turn that off?

Here is my ListView XAML:

    <ListView x:Name="SlideStrip"
              SelectionMode="None"
              ScrollViewer.HorizontalScrollMode="Auto"
              ScrollViewer.HorizontalScrollBarVisibility="Auto"
              ScrollViewer.VerticalScrollBarVisibility="Disabled"
              ItemContainerStyle="{StaticResource PlainOldList}">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsStackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate>
                <local:PDFPageUserControl
                        Margin="0 0 5 0"
                        ViewModel="{Binding}"
                        RespectRenderingDimension="Vertical" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

The PlainOldList style is as follows:

    <Style x:Key="PlainOldList" TargetType="ListViewItem">
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="IsHoldingEnabled" Value="True"/>
        <Setter Property="Margin" Value="0,0,0,0"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <ListViewItemPresenter x:Name="listViewItemPresenter" 
                        CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}" 
                        CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}" 
                        ContentMargin="0" 
                        ContentTransitions="{TemplateBinding ContentTransitions}" 
                        CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}" 
                        DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" 
                        DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" 
                        DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" 
                        DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" 
                        FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}" 
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                        Padding="{TemplateBinding Padding}" 
                        PointerOverBackgroundMargin="0" 
                        PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" 
                        ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" 
                        SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" 
                        SelectionCheckMarkVisualEnabled="True" 
                        SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" 
                        SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" 
                        SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}" 
                        SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" 
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                    </ListViewItemPresenter>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

I'm pretty convinced what I need to do is edit the visual states for the item container style. But I'm at a complete loss as to what visual state. Clicking on them in blend never show a transform that is active. I tried setting one or two to be zero explicitly, but that failed (perhaps because I didn't know how to override a default behavior or chose the wrong state).

Any help appreciated!


Solution

  • See ListViewItemExpanded style with all visual states. I removed all unnecessary

        <Style TargetType="ListViewItem" x:Key="ListViewItemWithoutEffectStyle">
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <Border x:Name="OuterContainer" RenderTransformOrigin="0.5,0.5">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="Pressed"/>
                                    <VisualState x:Name="CheckboxPressed"/>
                                    <VisualState x:Name="Disabled"/>
    
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected" />
                                    <VisualState x:Name="Selected"/>
                                    <VisualState x:Name="SelectedUnfocused"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="DataVirtualizationStates">
                                    <VisualState x:Name="DataAvailable" />
                                    <VisualState x:Name="DataPlaceholder"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="MultiSelectStates">
                                    <VisualState x:Name="NoMultiSelect" />
                                    <VisualState x:Name="ListMultiSelect"/>
                                    <VisualState x:Name="GridMultiSelect"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ReorderModeStates">
                                    <VisualState x:Name="ReorderEnabled"/>
                                    <VisualState x:Name="Reorderable"/>
                                    <VisualState x:Name="ReorderDisabled" />
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ReorderHintStates">
                                    <VisualState x:Name="NoReorderHint" />
                                    <VisualState x:Name="BottomReorderHint"/>
                                    <VisualState x:Name="RightReorderHint"/>
                                    <VisualState x:Name="TopReorderHint"/>
                                    <VisualState x:Name="LeftReorderHint"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid x:Name="ReorderHintContent" Background="Transparent">
                                <Border x:Name="ContentContainer">
                                    <Border x:Name="ContentBorder"
                                            Background="{TemplateBinding Background}"
                                            BorderBrush="{TemplateBinding BorderBrush}"
                                            BorderThickness="{TemplateBinding BorderThickness}">
                                        <Grid>
                                            <ContentPresenter x:Name="contentPresenter"
                                                              ContentTransitions="{TemplateBinding ContentTransitions}"
                                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                                              Content="{TemplateBinding Content}"
                                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                              Margin="{TemplateBinding Padding}" />
                                        </Grid>
                                    </Border>
                                </Border>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>