locked
Listbox display white box when click on it?

    Question

  • On vs2015 ctp. AS the photos.

    When I clicked outside of listbox then it's normal. Clicked inside then background of listbox getting white. How to remove it.

    <ListBox x:Name="MainMenu" Background="#e3e3e3" SelectionChanged="MainMenu_SelectionChanged">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="80"></ColumnDefinition>
                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <!--Thumb icon-->
                                    <Grid Grid.Column="0" Height="50">
                                        <Grid VerticalAlignment="Center" HorizontalAlignment="Center">
                                            <Image Source="{Binding thumbIcon}" Width="20" Height="20"></Image>
                                        </Grid>
                                    </Grid>
    
                                    <!--Text-->
                                    <Grid Grid.Column="1" Height="50">
                                        <Grid VerticalAlignment="Center" HorizontalAlignment="Left">
                                            <TextBlock Text="{Binding text}" Foreground="#1f1f1f" FontSize="13"></TextBlock>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>

    Tuesday, April 07, 2015 1:34 AM

Answers

  • Hi Grey,

    To remove the behavior of focused state, we need to customize ListBox and change Focused VisualState:

    <Style x:Key="ListBoxStyle" TargetType="ListBox">
                <Setter Property="Foreground" Value="{StaticResource ListBoxForegroundThemeBrush}"/>
                <Setter Property="Background" Value="{StaticResource ListBoxBackgroundThemeBrush}"/>
                <Setter Property="BorderBrush" Value="{StaticResource ListBoxBorderThemeBrush}"/>
                <Setter Property="BorderThickness" Value="{StaticResource ListBoxBorderThemeThickness}"/>
                <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
                <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
                <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
                <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="True"/>
                <Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled"/>
                <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True"/>
                <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
                <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
                <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="TabNavigation" Value="Once"/>
                <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
                <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
                <Setter Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel/>
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBox">
                            <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="LayoutRoot">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxDisabledForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused">
                                        </VisualState>
                                        <VisualState x:Name="Unfocused"/>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <ScrollViewer x:Name="ScrollViewer" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" Padding="{TemplateBinding Padding}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                                    <ItemsPresenter/>
                                </ScrollViewer>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    Usage:

    <ListBox Style="{StaticResource ListBoxStyle}" x:Name="MainMenu" Background="#e3e3e3">
    ......


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, April 08, 2015 4:30 AM
    Moderator