Change foreground and background color on selected item

Hi,

How to change the foreground and background color on the selected item

I have this code for the unselected items :

<syncfusion:SfNavigationDrawer x:Name="drawer" Grid.Row="0" BorderBrush="Transparent"
                                       Transition="SlideOnTop" Position="Left" DrawerWidth="180">

            <syncfusion:SfNavigationDrawer.DrawerContentView>
                <ListBox x:Name="list" ItemsSource="{Binding Contents}" Background="#2b5797">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock  Text="{Binding Name}" Padding="5" TextAlignment="Center" FontSize="16" Foreground="White"/>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
            </syncfusion:SfNavigationDrawer.DrawerContentView>

        </syncfusion:SfNavigationDrawer>

Best regard

3 Replies

MK Muneesh Kumar G Syncfusion Team August 13, 2018 11:33 AM UTC

Hi Frédéric, 
 
Thanks for using Syncfusion products.  
 
We have analyzed your requirement and you can achieve this by setting ItemContainerStyle in ListBox as per the below code snippet.  
 
Code snippet [XAML]: 
                     <ListBox.ItemContainerStyle> 
                            <Style TargetType="ListBoxItem"> 
                                <Style.Triggers> 
                                    <Trigger Property="IsSelected" Value="True" > 
                                        <Setter Property="FontWeight" Value="Bold" /> 
                                        <Setter Property="Foreground" Value="Black" /> 
                                    </Trigger> 
 
                                    <Trigger Property="IsSelected" Value="False" > 
                                        <Setter Property="FontWeight" Value="Normal" /> 
                                        <Setter Property="Foreground" Value="White" /> 
                                    </Trigger> 
                                </Style.Triggers> 
                                 
                            </Style> 
                        </ListBox.ItemContainerStyle> 
 
We have prepared a sample based on this, please find the sample from the following location.  
 
 
Also, please refer below forum for more information.  
 
 
Hope this helps.  
 
Thanks,
Muneesh Kumar G.
 
 



FR Frédéric August 13, 2018 03:02 PM UTC

Thanks it work fine !

Best regard


MK Muneesh Kumar G Syncfusion Team August 14, 2018 07:13 AM UTC

Hi Frédéric,


Thanks for the update.

 

We are glad to know that the given solution works. Please let us know if you need any further assistance.


Thanks,

Muneesh Kumar G.



Loader.
Up arrow icon