none
How to remove the background colour of ListBox Selected Item? RRS feed

  • Question

  • Hi,

    In my project I have a template for a ListBox which I am saving in a ResourceDictionary. Instead of having text in the ListBoxItem, I am using a command button.

     

    When I run the code, the Listbox is highlighting the first ListBoxItem in a light grey colour. When you click beside one of the buttons (which are spaced a bit from each other), a blue rectangle appears to show which ListBoxItem is selected.

    Both of these colours are looking pretty naff seeing my ListBox is opaque - how do I remove the initial grey colour when it loads, and also can I remove the blue colour when an item is selected?

    I'll paste in the code I'm using for my ListBox, and also the code in the ResourceDictionary:

     

    Code Snippet

    <ListBox HorizontalAlignment="Center" VerticalAlignment="Center" Width="568"
         Height="502" Background="{x:Null}" BorderThickness="0,0,0,0"
         IsSynchronizedWithCurrentItem="True" x:Name="ListCourses"
         Button.Click="ContentButtonClick" Style="{DynamicResource ListBoxStyleButtons}" 
         ItemsSource="{Binding Mode=Default, Source={StaticResource XMLDataSourceCourses}, XPath=/courses/course}"  />

     

    <Style x:Key="ListBoxStyleButtons" TargetType="{x:Type ListBox}">
        <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
      <Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/>
      <Setter Property="BorderThickness" Value="1"/>
      <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
      <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
      <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
      <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
      <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBox}">
              <Border SnapsToDevicePixels="true" x:Name="Bd" Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="1">
                <ScrollViewer Focusable="false" Padding="{TemplateBinding Padding}">
                  <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </ScrollViewer>
              </Border>
              <ControlTemplate.Triggers>
                <Trigger Property="IsEnabled" Value="false">
                  <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                </Trigger>
                <Trigger Property="IsGrouping" Value="true">
                  <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                </Trigger>
             </ControlTemplate.Triggers>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
          <Setter.Value>
            <ItemsPanelTemplate>
              <WrapPanel />
            </ItemsPanelTemplate>
          </Setter.Value>
        </Setter>
        <Setter Property="ItemTemplate">
          <Setter.Value>
        <DataTemplate>
       <StackPanel>
        <Button Content="{Binding Mode=OneWay, XPath=name}" MinHeight="43" MinWidth="200"
          Tag="{Binding Mode=OneWay, XPath=id}" Margin="20,20,20,20"/>
       </StackPanel>
      </DataTemplate>
          </Setter.Value>
        </Setter>
        <Setter
            Property="ScrollViewer.HorizontalScrollBarVisibility"
            Value="Disabled"
            />
      </Style> 

     

     

    Tuesday, May 1, 2007 10:36 AM

Answers

  • Transparent is a valid "color" so using the code above should work.

     

    <SolidColorBrush x:Key="{xTongue Tiedtatic SystemColors.HighlightBrushKey}" Color="Transparent" />

      To get rid of the gray when the Listbox doesn't have focus, use

     

    <SolidColorBrush x:Key="{xTongue Tiedtatic SystemColors.ControlBrushKey}" Color="Transparent" />

    Tuesday, May 1, 2007 6:07 PM
  • You don't need to, but I just learned you can.  If you do the following, other controls that use those brushes won't be impacted.

     

     

    Code Snippet

        <Style TargetType='ListBoxItem'>

          <Style.Resources>

            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />

          </Style.Resources>

        </Style>

     

     Pretty slick.

    Thursday, May 3, 2007 7:17 PM

All replies

  • you can use something like this in the resources, which would change the selectedItem color

    <SolidColorBrush x:Key="{xTongue Tiedtatic SystemColors.HighlightBrushKey}" Color="Yellow" />

     

    if you would change the  ListBoxItem Template then you would not have to do this

    <Style TargetType="ListBoxItem">

    <Setter Property="Template">

    <Setter.Value>

    <ControlTemplate TargetType="{x:Type ListBoxItem}">

    <Button Margin="5" Width="100"

    Command="{xTongue Tiedtatic localStick out tongueage2.MyCommand}" CommandParameter="{TemplateBinding Content}"

    Height="30" Content="{TemplateBinding Content}" Tag=""></Button>

    </ControlTemplate>

    </Setter.Value>

    </Setter>

    </Style>

    Tuesday, May 1, 2007 11:24 AM
    Moderator
  • Thanks lee - I'm looking to remove both the colours completely though, not change them to different colours
    Tuesday, May 1, 2007 12:20 PM
  • I've trimmed down the template for the listbox from what's listed in my original post to this:

    <Style x:Key="ListBoxStyleButtons" TargetType="{x:Type ListBox}">

    <Setter Property="ItemsPanel">

    <Setter.Value>

    <ItemsPanelTemplate>

    <WrapPanel />

    </ItemsPanelTemplate>

    </Setter.Value>

    </Setter>

    <Setter Property="ItemTemplate">

    <Setter.Value>

    <DataTemplate>

    <StackPanel>

    <Button Content="{Binding Mode=OneWay, XPath=name}" MinHeight="43" MinWidth="220"

    Tag="{Binding Mode=OneWay, XPath=id}" Margin="20,20,20,20"

    Template="{DynamicResource GlassButton}" Foreground="#FFFFFFFF" FontSize ="14" />

    </StackPanel>

    </DataTemplate>

    </Setter.Value>

    </Setter>

    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />

    </Style>

    This didn't have any effect, it just makes it a bit more readable.

     

    Could someone please tell me if it's even possible to remove the blue background? If not I'll have to live with it.

     

    However, the pale grey both behind the button when the list box initially shows on screen is very annoying, this will have to go - any suggestions as to how? At this stage I'm contemplating setting focus to the first button after loading the screen to get rid of it - there must be a better way though???

     

     

     

    Tuesday, May 1, 2007 2:04 PM
  • Transparent is a valid "color" so using the code above should work.

     

    <SolidColorBrush x:Key="{xTongue Tiedtatic SystemColors.HighlightBrushKey}" Color="Transparent" />

      To get rid of the gray when the Listbox doesn't have focus, use

     

    <SolidColorBrush x:Key="{xTongue Tiedtatic SystemColors.ControlBrushKey}" Color="Transparent" />

    Tuesday, May 1, 2007 6:07 PM
  • Hi Carole - thanks so much for pointing me in the right direction with this one.

     

    One question on this - do I need to apply this to a ListBoxItem template, or can I use it in the ListBox template in my previous post? (If the answer is the latter - where do I insert it?)

    Thanks again

     

    Wednesday, May 2, 2007 7:50 AM
  • Apologies, I see now that you don't apply these to the ListBox or ListBoxItem templates...
    Wednesday, May 2, 2007 8:07 AM
  • You don't need to, but I just learned you can.  If you do the following, other controls that use those brushes won't be impacted.

     

     

    Code Snippet

        <Style TargetType='ListBoxItem'>

          <Style.Resources>

            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />

          </Style.Resources>

        </Style>

     

     Pretty slick.

    Thursday, May 3, 2007 7:17 PM