Listbox custom/disabled selector on mouse over (windows8)

Question

I want to disable the visual effect on Mouse Over on each item of my listbox, and I would like to disable the visual effect when a user clicks, too.

I read that it could be done using a DataTrigger on Windows Phone, but on Windows 8, we can not use DataTrigger : DataTrigger in WinRT?

What else can I use to delete this visual effect ?
I saw the StyleSelector/ListViewItemStyleSelector, can I use this?
If yes, where can I find a sample, because i did not understood how it work.

Phil · Accepted Answer · 2012-03-12T22:58:23.043

If you mean disable the selected item style, then in WPF you can do this:

<Style x:Key="NullSelectionStyle" TargetType="ListBoxItem">
    <Style.Resources>
        <!-- SelectedItem with focus -->
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
        <!-- SelectedItem without focus -->
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
        <!-- SelectedItem text foreground -->
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="{DynamicResource {x:Static SystemColors.ControlTextColorKey}}" />
    </Style.Resources>
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
</Style>

<ListBox ItemContainerStyle="{StaticResource NullSelectionStyle}" ...>

Unfortunately I don't have access to Windows 8 yet, so I can't say if it works on WinRT.

Alternatively if you don't need any selection at all, just use an ItemsControl.

For example, instead of <ListBox .../> use <ItemsControl .../>. An ItemsControl shows a list of items like a ListBox but has no concept of the selected item.

Thanks, itemsControl seem to work, but can a item be clicked on ItemControl as on a Listbox (and know witch items was selected) ? — NicoMinsk, Mar 12 '12 at 23:13
As I said 'no concept of the selected item'. No an ItemsControl has no selected item. — Phil, Mar 13 '12 at 06:47
ok, i found a solution with a button and and Tag with bindind. — NicoMinsk, Mar 13 '12 at 07:11

score 1 · Answer 2 · answered Mar 15 '12 at 02:59

If you want to edit the ListBox template for a Metro Style app, you can remove the animations from the MouseOver VisualState. Here is a ListBoxItem template that would work.

<Style x:Key="NoSelectListBoxItemStyle" TargetType="ListBoxItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Disabled">
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ContentContainer">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Selected"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{StaticResource Dark_Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" d:LayoutOverrides="Width"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

And apply the style

<ListBox ItemContainerStyle="{StaticResource NoSelectListBoxItemStyle}" />

Listbox custom/disabled selector on mouse over (windows8)

2 Answers2