none
WPF listbox stylo data tiggers RRS feed

  • Pregunta

  • Hola amigos, estoy intentando pintar un color el fondo de un item del listbox, pero no me sale, mi codigo es:

     <ListBox x:Name="grilla" ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
                     Background="{x:Null}" BorderBrush="Transparent" SelectionChanged="grilla_SelectionChanged"
                     ItemTemplate="{DynamicResource DataTemplate1}" 
                     ItemsPanel="{DynamicResource ItemsPanelTemplate1}" 
                     HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
                <ListBox.Style>
                    <Style TargetType="ListBox">
                        <!--<Setter Property="Background" Value="#FF4E6130"/>-->
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ESTADO}" Value="False">
                                <Setter Property="Background" Value="Red"/>
                                <!--<Setter Property="FontStyle" Value="Oblique"/>-->
                            </DataTrigger>
                            <DataTrigger Binding="{Binding ESTADO}" Value="True">
                                <Setter Property="Background" Value="White"/>
                                <!--<Setter Property="FontStyle" Value="Oblique"/>-->
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </ListBox.Style>
            </ListBox>

    la parte que esta subrayada es lo que intento hacer cuando se muestran todos los datos en el listbox es decir si el valor del campo ESTADO de mi tabla sql server que se muestra en el listbox es true se pinte de color rojo su Background y de color blanco cuando es falso. alguien podria porfavor ayudarme.

    miércoles, 5 de septiembre de 2018 20:01

Respuestas

  • Te recomiendo mejor hacer un diccionario,

    das clic derecho sobre tu proyecto en la ventana del explorador de soluciones - Agregar - Diccionario de recursos...

    una vez creado y dentro del diccionario agrega (analiza bien este codigo que maneja los encabezados de un DataGrid):

       <!--***
        *** DataGrid style
        ***-->
        <Style x:Key="DataGridStyle1" TargetType="{x:Type DataGrid}">
            <Setter Property="ColumnHeaderStyle" Value="{DynamicResource ColumnHeaderStyle1}"/>
        </Style>
        <!-- DataGridColumnHeader style -->
        <Style x:Key="ColumnHeaderStyle1" TargetType="DataGridColumnHeader">
            <Setter Property="Height" Value="20"/>
            <!--<Setter Property="Background" Value="#FF7FBA00"/>-->
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <LinearGradientBrush.GradientStops>
                            <!-- Azul degradado -->
                            <!--<GradientStop Color="#0E4791" Offset="0"/>
                                <GradientStop Color="#468DE2" Offset="1"/>-->
                            <GradientStop Color="#696969" Offset="0"/>
                            <!--color gris del encabezado del datagrid-->
                            <GradientStop Color="#ba3333" Offset="1"/>
                            <!--color claro del encabezado del datagrid-->
                        </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="14" />

            <!--ordenar valores al dar click en el encabezado-->
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="ToolTip" Value="Click to sort."/>
                </Trigger>
            </Style.Triggers>

        </Style>


    y luego en la pestaña XAML :

       <Window.Resources>
            <ResourceDictionary Source="Dictionary1.xaml" />
        </Window.Resources>

    donde defines tu ListBox podras usar ese estilo (en un data grid es asi):

    Style="{DynamicResource DataGridStyle1}"

    ej:

    <DataGrid Name="dgXrer" HorizontalAlignment="Left" Height="360" Margin="-249,10,0,-87" VerticalAlignment="Top" Width="800" CanUserAddRows="False " 
                                          AutoGenerateColumns="False" EnableRowVirtualization="True" ItemsSource="{Binding}" Style="{DynamicResource DataGridStyle1}" IsReadOnly="False"
                                          RowBackground="#CEEA82" AlternatingRowBackground="#BAE860" >

    Ahora bien podemos cambiar los colores de fondo a nivel renglon con RowBackground y AlternatingRowBackground

    Ej:

    RowBackground="#CEEA82" AlternatingRowBackground="#BAE860"

    Trata de aplicarlo a tu proyecto.

    Saludos

    • Marcado como respuesta Pablo Rubio martes, 11 de septiembre de 2018 7:51
    viernes, 7 de septiembre de 2018 17:42
  • Gracias amigo por tu apoyo, he aplicado tu codigo esta muy bueno.

    intente lo siguiente y me funciono, aqui esta el codigo:

     <DataGrid x:Name="grillaDetlles" AutoGenerateColumns="False" Background="{x:Null}" BorderBrush="{x:Null}" Width="auto">
                        <DataGrid.RowStyle>
                            <Style TargetType="{x:Type DataGridRow}">
                                <Setter Property="Background" Value="#FF4E6130"></Setter>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding ESTADO}" Value="FALSE">
                                        <Setter Property="Foreground" Value="Red"/>
                                        <Setter Property="FontStyle" Value="Oblique"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding ESTADO}" Value="true">
                                        <Setter Property="Foreground" Value="White"/>
                                        <Setter Property="FontStyle" Value="Oblique"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </DataGrid.RowStyle>
                        <DataGrid.ColumnHeaderStyle>
                            <Style TargetType="{x:Type DataGridColumnHeader}">
                                <Setter Property="Background" Value="Green"/>
                                <Setter Property="Foreground" Value="Wheat"/>
                            </Style>
                        </DataGrid.ColumnHeaderStyle>
                    </DataGrid>

    pero da la casualidad que cambie el datagrid por un listbox, y ahi no me funciono, el error me aparece desde esta linea de codigo:

     <DataGrid.RowStyle> porque el listbox no tiene row

    • Marcado como respuesta Pablo Rubio martes, 11 de septiembre de 2018 7:51
    viernes, 7 de septiembre de 2018 21:46

Todas las respuestas

  • Te recomiendo mejor hacer un diccionario,

    das clic derecho sobre tu proyecto en la ventana del explorador de soluciones - Agregar - Diccionario de recursos...

    una vez creado y dentro del diccionario agrega (analiza bien este codigo que maneja los encabezados de un DataGrid):

       <!--***
        *** DataGrid style
        ***-->
        <Style x:Key="DataGridStyle1" TargetType="{x:Type DataGrid}">
            <Setter Property="ColumnHeaderStyle" Value="{DynamicResource ColumnHeaderStyle1}"/>
        </Style>
        <!-- DataGridColumnHeader style -->
        <Style x:Key="ColumnHeaderStyle1" TargetType="DataGridColumnHeader">
            <Setter Property="Height" Value="20"/>
            <!--<Setter Property="Background" Value="#FF7FBA00"/>-->
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <LinearGradientBrush.GradientStops>
                            <!-- Azul degradado -->
                            <!--<GradientStop Color="#0E4791" Offset="0"/>
                                <GradientStop Color="#468DE2" Offset="1"/>-->
                            <GradientStop Color="#696969" Offset="0"/>
                            <!--color gris del encabezado del datagrid-->
                            <GradientStop Color="#ba3333" Offset="1"/>
                            <!--color claro del encabezado del datagrid-->
                        </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="14" />

            <!--ordenar valores al dar click en el encabezado-->
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="ToolTip" Value="Click to sort."/>
                </Trigger>
            </Style.Triggers>

        </Style>


    y luego en la pestaña XAML :

       <Window.Resources>
            <ResourceDictionary Source="Dictionary1.xaml" />
        </Window.Resources>

    donde defines tu ListBox podras usar ese estilo (en un data grid es asi):

    Style="{DynamicResource DataGridStyle1}"

    ej:

    <DataGrid Name="dgXrer" HorizontalAlignment="Left" Height="360" Margin="-249,10,0,-87" VerticalAlignment="Top" Width="800" CanUserAddRows="False " 
                                          AutoGenerateColumns="False" EnableRowVirtualization="True" ItemsSource="{Binding}" Style="{DynamicResource DataGridStyle1}" IsReadOnly="False"
                                          RowBackground="#CEEA82" AlternatingRowBackground="#BAE860" >

    Ahora bien podemos cambiar los colores de fondo a nivel renglon con RowBackground y AlternatingRowBackground

    Ej:

    RowBackground="#CEEA82" AlternatingRowBackground="#BAE860"

    Trata de aplicarlo a tu proyecto.

    Saludos

    • Marcado como respuesta Pablo Rubio martes, 11 de septiembre de 2018 7:51
    viernes, 7 de septiembre de 2018 17:42
  • Gracias amigo por tu apoyo, he aplicado tu codigo esta muy bueno.

    intente lo siguiente y me funciono, aqui esta el codigo:

     <DataGrid x:Name="grillaDetlles" AutoGenerateColumns="False" Background="{x:Null}" BorderBrush="{x:Null}" Width="auto">
                        <DataGrid.RowStyle>
                            <Style TargetType="{x:Type DataGridRow}">
                                <Setter Property="Background" Value="#FF4E6130"></Setter>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding ESTADO}" Value="FALSE">
                                        <Setter Property="Foreground" Value="Red"/>
                                        <Setter Property="FontStyle" Value="Oblique"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding ESTADO}" Value="true">
                                        <Setter Property="Foreground" Value="White"/>
                                        <Setter Property="FontStyle" Value="Oblique"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </DataGrid.RowStyle>
                        <DataGrid.ColumnHeaderStyle>
                            <Style TargetType="{x:Type DataGridColumnHeader}">
                                <Setter Property="Background" Value="Green"/>
                                <Setter Property="Foreground" Value="Wheat"/>
                            </Style>
                        </DataGrid.ColumnHeaderStyle>
                    </DataGrid>

    pero da la casualidad que cambie el datagrid por un listbox, y ahi no me funciono, el error me aparece desde esta linea de codigo:

     <DataGrid.RowStyle> porque el listbox no tiene row

    • Marcado como respuesta Pablo Rubio martes, 11 de septiembre de 2018 7:51
    viernes, 7 de septiembre de 2018 21:46
  • Ok, en el diccionario agrega

    <Style x:Key="ListBoxStyle1" TargetType="{x:Type ListBoxItem}">
                <Setter Property="Foreground" Value="Blue"></Setter>
                <Style.Triggers>
                    <Trigger Property="IsFocused" Value="True">
                        <Setter Property="Foreground" Value="Red" />
                    </Trigger>
                </Style.Triggers>
        </Style>

    Y luego en la linea del xaml donde defines tu ListBox agregale

    x:Name= "LB1" (o el nombre que elijas), en esa misma linea agrega 

    ItemContainerStyle="{DynamicResource ListBoxStyle1}"

    Ahora al correr tu programa veras que cuando pasas sobre el ListBox cambia el color del Item donde esta posicionado el Mouse, puedes cambiar en el diccionario Foreground por Background, tenemos que considerar que solo tenemos los eventos IsFocused y IsMouseOver para los ListBox

    Saludos

    martes, 11 de septiembre de 2018 16:22
  • Mi idea es: mostrar los datos en el listbox que contiene un campo llamado estado que proviene de una tabla del sql, este estado esta en true o false para cada iten mostrado, ahora cuando es true se pinta de color azul y cuando es false se pinta de color rojo (puede ser su backgrauod o el borde que lo contiene a los texbox que muestra)
    viernes, 21 de septiembre de 2018 19:03