none
Cambiar el color de una seleccion en un ListBox RRS feed

  • Pregunta

  • Hola, quisiera saber como puedo cambiar el color de una seleccion dentro de un listbox.

    Tambien quiero saber como puedo regresar al color anterior despues de seleccionar un elemento dentro de un listbox ya que, cuando actualmente selecciono un elemento y cuando selecciono a otro elemento, el elemento anterior aparece con un fondo diferente al color del background que tenia.

    Gracias

    domingo, 16 de mayo de 2010 17:59

Respuestas

  • Aca te dejo un ejemplo que te paso a explicar lo que hice:

     

    <Window x:Class="Window1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="Window1" Height="300" Width="300">
      <Window.Resources>
        <Style TargetType="ListBoxItem">
          <Style.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="DarkRed"/>
            <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="blue"/>
          </Style.Resources>
          <Setter Property="ListBoxItem.Background" Value="blue"/>
        </Style>
      </Window.Resources>
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition />
          <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition/>
        </Grid.ColumnDefinitions>
    
        <!--Primer ListBox-->
    
        <ListBox Margin="50,20,52,0" Grid.Column="0" Grid.Row="0" Background="Black" BorderBrush="#FF535353" VerticalAlignment="Top" Height="48.333" Cursor="Hand" Foreground="White">
          <ListBoxItem Height="34" BorderBrush="#FF535353" Foreground="White">
            <TextBlock FontFamily="Arial" FontSize="21.333"> Punto Medio</TextBlock>
          </ListBoxItem>
        </ListBox>
    
        <!--Segundo ListBox-->
    
        <ListBox Margin="50,20,52,0" Grid.Column="0" Grid.Row="1" Background="Black" BorderBrush="#FF535353" Foreground="White" VerticalAlignment="Top" Height="52.334">
    
          <ListBoxItem Foreground="White">
            <TextBlock > PRUEBA</TextBlock>
          </ListBoxItem>
    
          <ListBoxItem Foreground="White">
            <TextBlock > PRUEBA2</TextBlock>
          </ListBoxItem>
    
    
        </ListBox>
      </Grid>
    </Window>
    

     

    Fijate que lo que estoy haciendo al principio es definir un Style para el ListBox:

     

        <Style TargetType="ListBoxItem">
          <Style.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="DarkRed"/>
            <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="blue"/>
          </Style.Resources>
          <Setter Property="ListBoxItem.Background" Value="blue"/>
        </Style>
    

     

    Al definir este style, para que esto se aplique hay que sacar el background de cada uno de los items ya que sino no lo toma solo.

    Acá hay un truco, y esta en que redifiní los Brushes que tienen las Keys HightlightBrushKey y ControlBrushKey.

    Hago esto en vez de definir un trigger, porque en realidad el ListBoxItem, no cambia en background del item, sino que cambia un Border que es interno, al que no se puede llegar desde el Style.

    Con este cambio ya te queda listo el style para que se cambie el background cuando seleccionas un item. El primer brush que cambio es para el background al estar seleccionado y el 2do es para cuando no esta seleccionado nada que te quede el background como lo definiste.

     

    Saludos,

     

     

     

     


    Sandro D. Garcia
    Colabora con el foro: Si este mensaje te es de utilidad marcalo como respuesta.
    -----
    Please, if this message helps you, remember mark it as response, may be can help more people with same problem.
    -----
    Mi Blog
    • Marcado como respuesta GerogeJ martes, 18 de mayo de 2010 0:29
    lunes, 17 de mayo de 2010 15:52

Todas las respuestas

  • Mira en ForeColor y BackColor que te dice en las pripiedades del listBox.
    domingo, 16 de mayo de 2010 18:11
  • Las propiedades que me comentaste estan en los colores que quiero, mas bien el problema se ve enfocado a que tengo que hacer un DataTemplate o algo asi, si este fuera el caso alguna sugerencia acerca de como puedo realizar esto? Apenas voy empezando a utilizar WPF asi es que no se mucho jejej
    domingo, 16 de mayo de 2010 18:20
  • ¿Quieres cambiar el color mediante programación?
    domingo, 16 de mayo de 2010 19:00
  • Bueno la situacion es la siguiente tengo 2 listboxes, cada uno con un fondo negro, y letras de color blanco, entonces cuando selecciono una opcion de alguno no hay problema, el problema es cuando selecciono algun otro elemento de otro listbox, el elemento anterior(que estaba en un listbox) cambia su color de fondo a un color como cafe esto es que quiero evitar, quiero que el elemento que deje de estar seleccionado cambie al color de fondo original que tenia. este es mi codigo:

      <Grid>

    <Grid.RowDefinitions>
       <RowDefinition />
       <RowDefinition />
     </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
       <ColumnDefinition/>
     </Grid.ColumnDefinitions>

    <!--Primer ListBox-->

    <ListBox Margin="50,20,52,0" Grid.Column="0" Grid.Row="0" Background="Black" BorderBrush="#FF535353" VerticalAlignment="Top" Height="48.333" Cursor="Hand" Foreground="White">
        

         <ListBoxItem Height="34" BorderBrush="#FF535353" Background="#FF535353" Foreground="Black" >
            <TextBlock FontFamily="Arial" FontSize="21.333" Foreground="White"> Punto Medio </TextBlock>
       </ListBoxItem>

      </ListBox>

    <!--Segundo ListBox-->

    <ListBox Margin="50,20,52,0" Grid.Column="0" Grid.Row="1" Background="Black" BorderBrush="#FF535353" Foreground="White" VerticalAlignment="Top" Height="52.334">
       
        <ListBoxItem Background="#FF535353">
          <TextBlock > PRUEBA </TextBlock>
       </ListBoxItem> 
        
       <ListBoxItem Background="#FF535353">
          <TextBlock > PRUEBA2 </TextBlock>
       </ListBoxItem>

     
     </ListBox>
      </Grid>

    domingo, 16 de mayo de 2010 19:42
  • Aca te dejo un ejemplo que te paso a explicar lo que hice:

     

    <Window x:Class="Window1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="Window1" Height="300" Width="300">
      <Window.Resources>
        <Style TargetType="ListBoxItem">
          <Style.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="DarkRed"/>
            <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="blue"/>
          </Style.Resources>
          <Setter Property="ListBoxItem.Background" Value="blue"/>
        </Style>
      </Window.Resources>
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition />
          <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition/>
        </Grid.ColumnDefinitions>
    
        <!--Primer ListBox-->
    
        <ListBox Margin="50,20,52,0" Grid.Column="0" Grid.Row="0" Background="Black" BorderBrush="#FF535353" VerticalAlignment="Top" Height="48.333" Cursor="Hand" Foreground="White">
          <ListBoxItem Height="34" BorderBrush="#FF535353" Foreground="White">
            <TextBlock FontFamily="Arial" FontSize="21.333"> Punto Medio</TextBlock>
          </ListBoxItem>
        </ListBox>
    
        <!--Segundo ListBox-->
    
        <ListBox Margin="50,20,52,0" Grid.Column="0" Grid.Row="1" Background="Black" BorderBrush="#FF535353" Foreground="White" VerticalAlignment="Top" Height="52.334">
    
          <ListBoxItem Foreground="White">
            <TextBlock > PRUEBA</TextBlock>
          </ListBoxItem>
    
          <ListBoxItem Foreground="White">
            <TextBlock > PRUEBA2</TextBlock>
          </ListBoxItem>
    
    
        </ListBox>
      </Grid>
    </Window>
    

     

    Fijate que lo que estoy haciendo al principio es definir un Style para el ListBox:

     

        <Style TargetType="ListBoxItem">
          <Style.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="DarkRed"/>
            <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="blue"/>
          </Style.Resources>
          <Setter Property="ListBoxItem.Background" Value="blue"/>
        </Style>
    

     

    Al definir este style, para que esto se aplique hay que sacar el background de cada uno de los items ya que sino no lo toma solo.

    Acá hay un truco, y esta en que redifiní los Brushes que tienen las Keys HightlightBrushKey y ControlBrushKey.

    Hago esto en vez de definir un trigger, porque en realidad el ListBoxItem, no cambia en background del item, sino que cambia un Border que es interno, al que no se puede llegar desde el Style.

    Con este cambio ya te queda listo el style para que se cambie el background cuando seleccionas un item. El primer brush que cambio es para el background al estar seleccionado y el 2do es para cuando no esta seleccionado nada que te quede el background como lo definiste.

     

    Saludos,

     

     

     

     


    Sandro D. Garcia
    Colabora con el foro: Si este mensaje te es de utilidad marcalo como respuesta.
    -----
    Please, if this message helps you, remember mark it as response, may be can help more people with same problem.
    -----
    Mi Blog
    • Marcado como respuesta GerogeJ martes, 18 de mayo de 2010 0:29
    lunes, 17 de mayo de 2010 15:52
  • Muchisimas gracias Sandro, si me funciono tal como yo queria jejejeje. Como apenas ando comenzando con WPF quisiera saber dos cosas:

    1.- Esto del style se usa entonces como un recurso verdad, algo asi como un datatemplate?

    2.-Algun libro, tutorial, curso, etc. que me recomiendes?

     

    Gracias de nuevo

    martes, 18 de mayo de 2010 0:31
  • Los styles los podes usar como recursos o no. El datatemplate es un template para darle forma a tus items de datos. Adentro del template podes armarlo como quieras.

    Un libro muy completo es uno que se llama PRO WPF de APress

     

    Saludos,


    Sandro D. Garcia
    Colabora con el foro: Si este mensaje te es de utilidad marcalo como respuesta.
    -----
    Please, if this message helps you, remember mark it as response, may be can help more people with same problem.
    -----
    Mi Blog
    martes, 18 de mayo de 2010 14:25