locked
Listbox displays all white box when click on it?? RRS feed

  • Question

  • Hi

    I have a listbox that when I click it the box turns white cannot figure out how to stop this from happening?? here are sample pics and the xaml for the listbox. can someone tell me why this is happening?

    <StackPanel x:Name="spEventtime" Margin="0,0,1,0" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                                        <ListBox x:Name="lbeventtimes" Width="340" ItemsSource="{Binding EventTimeItem}" Background="{x:Null}">
                                            <ListBox.ItemTemplate>
                                                <DataTemplate>
                                                    <StackPanel x:Name="splist">
                                                        <StackPanel Orientation="Horizontal">
                                                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5,0,5,0" FontSize="16" TextAlignment="Right" FontStyle="Italic" Foreground="#99FFFFFF" x:Name="txtHour" Text="{Binding EventTime}" />
                                                        </StackPanel>
                                                        <Canvas Height="1" Background="White" Margin="0" Width="320" HorizontalAlignment="Center"/>
                                                        <StackPanel Margin="10,0,0,0" VerticalAlignment="Top">
                                                            <TextBlock x:Name="txtTemp" Style="{StaticResource PageSubheaderTextStyle}" Text="{Binding EventTimeName}" />
                                                            <TextBlock Margin="5,-35,15,0" Style="{StaticResource BodyTextStyle}" Text="{Binding EventTimeDescription}"  TextWrapping="Wrap" />
                                                        </StackPanel>
                                                    </StackPanel>
                                                </DataTemplate>
                                            </ListBox.ItemTemplate>
                                        </ListBox>
                                    </StackPanel>


    Juan Rodriguez Celltrac Software

    Monday, April 8, 2013 5:02 PM

Answers

  • Try this and see if it fixes the problem?

    Focus state was applying the white background. So white text over white background was giving all white. 

     <Page.Resources>
            <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">
            								<Storyboard>
            									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
            										<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}"/>
            									</ObjectAnimationUsingKeyFrames>
            								</Storyboard>
            							</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>
        </Page.Resources>

     <StackPanel x:Name="spEventtime" Margin="0,0,1,0" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                                        <ListBox x:Name="lbeventtimes" Width="340" ItemsSource="{Binding EventTimeItem}" Background="{x:Null}" Style="{StaticResource ListBoxStyle}" >
                                            <ListBox.ItemTemplate>
                                                <DataTemplate>
                                                    <StackPanel x:Name="splist">
                                                        <StackPanel Orientation="Horizontal">
                                                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5,0,5,0" FontSize="16" TextAlignment="Right" FontStyle="Italic" Foreground="#99FFFFFF" x:Name="txtHour" Text="{Binding EventTime}" />
                                                        </StackPanel>
                                                        <Canvas Height="1" Background="White" Margin="0" Width="320" HorizontalAlignment="Center"/>
                                                        <StackPanel Margin="10,0,0,0" VerticalAlignment="Top">
                                                            <TextBlock x:Name="txtTemp" Style="{StaticResource PageSubheaderTextStyle}" Text="{Binding EventTimeName}" />
                                                            <TextBlock Margin="5,-35,15,0" Style="{StaticResource BodyTextStyle}" Text="{Binding EventTimeDescription}"  TextWrapping="Wrap" />
                                                        </StackPanel>
                                                    </StackPanel>
                                                </DataTemplate>
                                            </ListBox.ItemTemplate>
                                           
                                        </ListBox>
                                    </StackPanel>

    Results here -


    Thanks,
    Sachin

    Vocabmeter | My Samples |Personal Website





    • Edited by Sachin S Tuesday, April 9, 2013 12:24 AM
    • Marked as answer by rruffman07 Tuesday, April 9, 2013 12:25 AM
    Tuesday, April 9, 2013 12:16 AM

All replies

  • Can you try removing StackPanel spEventTime if you do not need it? Can you use grid instead as StackPanel in this case, as it is not doing much if I am not wrong?


    Just few things you can try playing with as without code it is just guess work. Can you upload a small project where issue is reproducible?


    Thanks,
    Sachin
    Vocabmeter | My Samples | Personal Website



    • Edited by Sachin S Monday, April 8, 2013 5:51 PM
    Monday, April 8, 2013 5:50 PM
  • Hi Sachin

    I had the stack panel removed but it still does it also the canvas is the small white line shown in the first example.. its not the issue.

    thanks for the reply.


    Juan

    Monday, April 8, 2013 6:44 PM
  • What's going on with the VisualStateManager? Have you tried editing a copy of the splist StackPanel template?

    Rebecca M. Riordan

    Monday, April 8, 2013 7:07 PM
  • Hi Rebecca

    No I have not edited the template on the stackpanel however I don't think that's causing it as I can remove the stackpanel that wraps the listbox and it still has the same result. this seems to happen when I tap the listbox I currently don't have a selection changed event so it this is how I noticed it.. I tried one of my other projects and I get the same result I never noticed it as it had a selection change event navigating to a new page but when I take the event out it also happens..


    Juan

    Monday, April 8, 2013 7:15 PM
  • It's gotta be in the VSM of the default template. Or rather A default template. Could be the ListBox itself, or the ItemsTemplate, but if the display is going wonky when the state changes, the VSM is the primary suspect.

    Rebecca M. Riordan

    Monday, April 8, 2013 7:24 PM
  • I just did a quick test, just sticking your XAML in as items explicitly, and I can't duplicate the behavior. The selected item turns Blue.

    If you stick a stripped down sample somewhere, I'll be happy to look at it. (Sometimes fresh eyes help...)


    Rebecca M. Riordan

    Monday, April 8, 2013 7:37 PM
  • Hi Rebecca

    I zipped the xaml and .cs of the page in question here Sample Link you might have to comment out location of sample images..


    Juan


    Sorry forgot to add the sample view model sample view model
    • Edited by rruffman Monday, April 8, 2013 8:03 PM
    Monday, April 8, 2013 7:56 PM
  • Juan,

    I can't do anything without the Model and ViewModel. Can you strip those out and post a full solution?


    Rebecca M. Riordan

    Monday, April 8, 2013 10:18 PM
  • sorry I see what you are asking I am making a sample app with just that page and data in it..

    Juan Rodriguez Celltrac Software

    Monday, April 8, 2013 11:04 PM
  • ok I created a whole sample solution and included the images use This Link same zip name as before...

    Juan Rodriguez Celltrac Software

    Monday, April 8, 2013 11:47 PM
  • Try this and see if it fixes the problem?

    Focus state was applying the white background. So white text over white background was giving all white. 

     <Page.Resources>
            <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">
            								<Storyboard>
            									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
            										<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}"/>
            									</ObjectAnimationUsingKeyFrames>
            								</Storyboard>
            							</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>
        </Page.Resources>

     <StackPanel x:Name="spEventtime" Margin="0,0,1,0" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                                        <ListBox x:Name="lbeventtimes" Width="340" ItemsSource="{Binding EventTimeItem}" Background="{x:Null}" Style="{StaticResource ListBoxStyle}" >
                                            <ListBox.ItemTemplate>
                                                <DataTemplate>
                                                    <StackPanel x:Name="splist">
                                                        <StackPanel Orientation="Horizontal">
                                                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5,0,5,0" FontSize="16" TextAlignment="Right" FontStyle="Italic" Foreground="#99FFFFFF" x:Name="txtHour" Text="{Binding EventTime}" />
                                                        </StackPanel>
                                                        <Canvas Height="1" Background="White" Margin="0" Width="320" HorizontalAlignment="Center"/>
                                                        <StackPanel Margin="10,0,0,0" VerticalAlignment="Top">
                                                            <TextBlock x:Name="txtTemp" Style="{StaticResource PageSubheaderTextStyle}" Text="{Binding EventTimeName}" />
                                                            <TextBlock Margin="5,-35,15,0" Style="{StaticResource BodyTextStyle}" Text="{Binding EventTimeDescription}"  TextWrapping="Wrap" />
                                                        </StackPanel>
                                                    </StackPanel>
                                                </DataTemplate>
                                            </ListBox.ItemTemplate>
                                           
                                        </ListBox>
                                    </StackPanel>

    Results here -


    Thanks,
    Sachin

    Vocabmeter | My Samples |Personal Website





    • Edited by Sachin S Tuesday, April 9, 2013 12:24 AM
    • Marked as answer by rruffman07 Tuesday, April 9, 2013 12:25 AM
    Tuesday, April 9, 2013 12:16 AM
  • Hi

    yes that did it just seems strange that I would have to re template the focus state...


    Juan Rodriguez Celltrac Software

    Tuesday, April 9, 2013 12:27 AM
  • Hi Juan,

    White is a background provided by default system styles for ListBox focused state. So until unless we do not override that visual state, it is always going to be white.

    It is just in this case we had white text, that showed everything white. If you had blue or other text color, background would still be white on focus state but we wouldn't have realized that. Just creating simple listbox will turn its background to white as soon as it is focused state.

     


    Thanks,
    Sachin
    Vocabmeter | My Samples | Personal Website

    Tuesday, April 9, 2013 1:17 AM