The following forum(s) have migrated to Microsoft Q&A (Preview): Developing Universal Windows apps!
Visit Microsoft Q&A (Preview) to post new questions.

Learn More

 locked
Change Foreground of Child Controls within ListBoxItem RRS feed

  • Question

  • I'm having a strange bug with the ListBoxItem control.  I specifically want the children controls within the ListBoxItem to use the ListBoxItem Selected State Foreground value.  However when I make a selection within a ListBox it never updates the Style.  If however I remove the ListBoxItem control and simply use a Grid it will work.

    I cannot get the child controls to correctly use the ListBoxItem State, even though within Expression Blend during Design Time it shows it correctly.

    What am I doing wrong?  Any help would be appreciated.

    Resource used by the ListBoxItem.

        </phone:PhoneApplicationPage.Resources> 
            <Style x:Key="ListBoxItemStyleSelected" TargetType="ListBoxItem">  
                <Setter Property="Background" Value="Transparent"/>  
                <Setter Property="BorderThickness" Value="0"/>  
                <Setter Property="BorderBrush" Value="Transparent"/>  
                <Setter Property="Padding" Value="0"/>  
                <Setter Property="HorizontalContentAlignment" Value="Left"/>  
                <Setter Property="VerticalContentAlignment" Value="Top"/>  
                <Setter Property="Template">  
                    <Setter.Value> 
                        <ControlTemplate TargetType="ListBoxItem">  
                            <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">  
                                <VisualStateManager.VisualStateGroups> 
                                    <VisualStateGroup x:Name="CommonStates">  
                                        <VisualState x:Name="Normal"/>  
                                        <VisualState x:Name="MouseOver"/>  
                                        <VisualState x:Name="Disabled">  
                                            <Storyboard> 
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">  
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>  
                                                </ObjectAnimationUsingKeyFrames> 
                                                <DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>  
                                            </Storyboard> 
                                        </VisualState> 
                                    </VisualStateGroup> 
                                    <VisualStateGroup x:Name="SelectionStates">  
                                        <VisualState x:Name="Unselected"/>  
                                        <VisualState x:Name="Selected">  
                                            <Storyboard> 
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">  
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>  
                                                </ObjectAnimationUsingKeyFrames> 
                                            </Storyboard> 
                                        </VisualState> 
                                    </VisualStateGroup> 
                                </VisualStateManager.VisualStateGroups> 
                                <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>  
                            </Border> 
                        </ControlTemplate> 
                    </Setter.Value> 
                </Setter> 
            </Style> 
        </phone:PhoneApplicationPage.Resources> 


    XAML within the Page.

                <ListBox x:Name="AccountList" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding Accounts, ElementName=_PasswordPage}" SelectionChanged="PasswordList_SelectionChanged" HorizontalContentAlignment="Stretch">  
                    <ListBox.ItemContainerStyle> 
                        <Style TargetType="ListBoxItem">  
                               <Setter Property="HorizontalContentAlignment" Value="Stretch"/>  
                        </Style> 
                    </ListBox.ItemContainerStyle> 
                    <ListBox.ItemTemplate> 
                        <DataTemplate> 
                            <ListBoxItem HorizontalContentAlignment="Stretch" VerticalAlignment="Top" VerticalContentAlignment="Top" Tag="{Binding}" Padding="5,5,5,10" Loaded="ListBoxItem_Loaded" BorderThickness="0,0,0,3" BorderBrush="{StaticResource PhoneBorderBrush}" Background="Transparent" Style="{StaticResource ListBoxItemStyleSelected}" > 
                                <toolkit:ContextMenuService.ContextMenu> 
                                    <toolkit:ContextMenu> 
                                        <toolkit:MenuItem Header="edit" Tag="{Binding}" Click="EditAccount_Click"/>  
                                        <toolkit:MenuItem Header="delete" Tag="{Binding}" Click="DeleteAccount_Click"/>  
                                    </toolkit:ContextMenu> 
                                </toolkit:ContextMenuService.ContextMenu> 
                                <Grid HorizontalAlignment="Stretch">  
                                    <Grid.ColumnDefinitions> 
                                        <ColumnDefinition Width="Auto" /> 
                                        <ColumnDefinition Width="*" /> 
                                    </Grid.ColumnDefinitions> 
                                    <Grid.RowDefinitions> 
                                        <RowDefinition Height="Auto"/>  
                                        <RowDefinition Height="Auto"/>  
                                        <RowDefinition Height="Auto"/>  
                                        <RowDefinition Height="Auto"/>  
                                        <RowDefinition Height="Auto"/>  
                                        <RowDefinition Height="Auto"/>  
                                    </Grid.RowDefinitions> 
     
                                    <TextBlock x:Name="LabelTitle" Text="{Binding Title}" Grid.ColumnSpan="2" FontSize="{StaticResource PhoneFontSizeLarge}" FontWeight="Bold" Margin="20,0,0,0"/>  
     
                                    <TextBlock Text="account:" Grid.Row="1" Style="{StaticResource TextBlockPropertyName}"/>  
                                    <TextBlock x:Name="LabelId" Grid.Row="1" Grid.Column="1" Text="{Binding User}"/>  
     
                                    <TextBlock Text="password:" Grid.Row="2" Style="{StaticResource TextBlockPropertyName}"/>  
                                    <TextBlock x:Name="LabelPassword" Grid.Row="2" Grid.Column="1" Text="{Binding Password}"/>  
     
                                    <TextBlock Text="address:" Grid.Row="3" Style="{StaticResource TextBlockPropertyName}"/>  
                                    <TextBlock x:Name="LabelUri" Grid.Row="3" Grid.Column="1" Text="{Binding Uri}"/>  
     
                                    <TextBlock Text="phone:" Grid.Row="4" Style="{StaticResource TextBlockPropertyName}"/>  
                                    <TextBlock x:Name="LabelPhone" Grid.Row="4" Grid.Column="1" Text="{Binding Phone}"/>  
     
                                    <TextBlock Text="note:" Grid.Row="5" Style="{StaticResource TextBlockPropertyName}"/>  
                                    <TextBlock x:Name="LabelNote" Grid.Row="5" Grid.Column="1" Text="{Binding Note}"/>  
                                </Grid> 
                            </ListBoxItem> 
                        </DataTemplate> 
                    </ListBox.ItemTemplate> 
                </ListBox> 
    Friday, June 10, 2011 9:36 PM

Answers