What (state) is called while you are pressing on ListBoxItem?

Question

I am working on a small project of using the ListBox class to show information, for example names of books. But I don't know what the state is called when I'm pressing on a ListBoxItem selected. I want to change the Background Color of the SolidColorBrush that is belonged to the state.

For example,

From the source code, I have the background color, #336A5ACD, when I put the pointer on/over the selected ListBoxItem.

ListBoxItemBackgroundSelectedPointerOver = ListBoxItem + Background + Selected + PointerOver

<SolidColorBrush x:Key="ListBoxItemBackgroundSelectedPointerOver" Color="#336A5ACD"/>  

And I want to change the background color to #33D2CD4A when I am pressing on the selected ListBoxItem.

ListBoxItemBackgroundSelectedPointerPressed = ListBoxItem + Background + Selected + PointerPressed ?

<ResourceDictionary x:Key="Light">  
<SolidColorBrush x:Key="ListBoxItemBackground" Color="Transparent"/>  
<SolidColorBrush x:Key="ListBoxItemForeground" Color="MediumSlateBlue"/>  
<SolidColorBrush x:Key="ListBoxItemBorderBrush" Color="MediumSlateBlue"/>  
  
<!--States - ListBoxItem-->  
<SolidColorBrush x:Key="ListBoxItemBackgroundPointerOver" Color="Transparent"/>  
<SolidColorBrush x:Key="ListBoxItemBackgroundSelected" Color="#336A5ACD"/>  
<SolidColorBrush x:Key="ListBoxItemBackgroundSelectedPointerOver" Color="#336A5ACD"/>  
  
</ResourceDictionary>  

Answer 1

You can try the code below:

The XAML code:

<ListBox Margin="0,136,1161,420">  
    <ListBoxItem Background="White" PointerEntered="ListBoxItem_PointerEntered" PointerExited="ListBoxItem_PointerExited"/>  
    <ListBoxItem Background="White" PointerEntered="ListBoxItem_PointerEntered" PointerExited="ListBoxItem_PointerExited"/>  
</ListBox>  

The cs code:

private void ListBoxItem_PointerEntered(object sender, PointerRoutedEventArgs e)  
{  
    var listItem = sender as ListBoxItem;  
    listItem.Tag = listItem.Background;  
    listItem.Background = new SolidColorBrush(HexToColor("#336A5ACD"));  
}  
  
private void ListBoxItem_PointerExited(object sender, PointerRoutedEventArgs e)  
{  
    var listItem = sender as ListBoxItem;  
    var initBackground = listItem.Tag as Brush;  
    if (initBackground != null)  
    {  
        listItem.Background = initBackground;  
    }  
}  
  
/// <summary>  
/// The color from Hex string.  
/// Only for this sample in this thread  
/// </summary>  
/// <param name="hexColor"></param>  
/// <returns></returns>  
private static Color HexToColor(string hexColor)  
{  
    hexColor = hexColor.Replace("#", string.Empty);  
    byte alpha = byte.Parse(hexColor.Substring(0, 2), NumberStyles.AllowHexSpecifier);  
    byte red = byte.Parse(hexColor.Substring(2, 2), NumberStyles.AllowHexSpecifier);  
    byte green = byte.Parse(hexColor.Substring(4, 2), NumberStyles.AllowHexSpecifier);  
    byte blue = byte.Parse(hexColor.Substring(6, 2), NumberStyles.AllowHexSpecifier);  
    return Color.FromArgb(alpha, red, green, blue);  
}  

BR.

ShuaiHua Du

If right, please Accept.
Enjoy Programming!!!

Answer 2

Hello,

Welcome to Microsoft Q&A!

If you want to change the style of the ListBoxItem, you will need to modify the default style of the ListBoxItem. The ListBoxItem is using some system value as the background for different states. I've made a simple demo which you could refer to.

MainPage.cs:

 ObservableCollection<FontFamily> fonts = new ObservableCollection<FontFamily>();  
  
        public MainPage()  
        {  
            this.InitializeComponent();  
  
            fonts.Add(new FontFamily("Arial"));  
            fonts.Add(new FontFamily("Courier New"));  
            fonts.Add(new FontFamily("Times New Roman"));  
        }  

MainPage.Xaml:

 <Grid>  
        <ListBox  x:Name="FontsList" Height="200" Width="300" ItemContainerStyle="{StaticResource ListBoxItemStyle}"  ItemsSource="{x:Bind fonts}" DisplayMemberPath="Source"/>  
    </Grid>  

The ListBoxItemstyle is a little bit long so I put it into a txt file here: 224198-listboxitemstyle.txt

If you can't download the txt file and check the existing code that I modify, you could also find the default ListBoxItem Style in the Generic.Xaml in your app.

1. Find the ApplicationPageBackgroundThemeBrush that the Page is used for the background, then press F12 and you will be navigated to the Generic.Xaml.
2. Search for TargetType="ListBoxItem" and you will find the default ListBoxItem Style. Copy that style into your Page resource and give it a key as ListBoxItemStyle.
3. Find the VisualState for SelectedPointerOver in the style and change the value for PressedBackground.

After that, run your app and you could see the background color is changed when the mouse point over the selected button.

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.