CODEWITHSUNDEEP
wpfxamllistbox
JamTay317
JamTay317

Reputation: 1017

Wpf Custom control MouseOver and selected

Hello I have googled this and found many issues like what I am trying to accomplish, however I cannot get this to work. I have build a control that has a listbox in it and when I pass my mouse over the item or select an item I would like to change the background color of the list item to a color.

MyControl:

<ListBox x:Name="Appointments"
         ItemsSource="{TemplateBinding ItemSource}"
         DisplayMemberPath="{TemplateBinding DisplayMemberPath}"
         SelectedValuePath="{TemplateBinding SelectedValuePath}">
    <ListBox.Resources>
        <Style TargetType="{x:Type ListBoxItem}">

        </Style>
    </ListBox.Resources>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">

            <Style.Triggers>
                <DataTrigger Binding="{Binding AppointmentState}"
                                                        Value="{x:Static enums:AppointmentState.Accepted}">
                    <Setter Property="Background"
                                                    Value="Green" />
                    <Setter Property="Foreground"
                                                    Value="White" />
                </DataTrigger>
                <DataTrigger Binding="{Binding AppointmentState}"
                                                        Value="{x:Static enums:AppointmentState.Decliend}">
                    <Setter Property="Background"
                                                    Value="Red" />
                    <Setter Property="Foreground"
                                                    Value="White" />
                </DataTrigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Blue" />
                </Trigger>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="{DynamicResource AccentColor}"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

what I've tried to do is just put under Listbox.Resorces ListBox.ItemContainerStyle ListBox.DataTemplate. thank you for your help

edit: new control 

<Style TargetType="{x:Type local:MonthCalenderDay}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:MonthCalenderDay}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <StackPanel>
                        <TextBlock x:Name="DayNumber"
                                   FontSize="15"
                                   Foreground="{DynamicResource AccentColorBrush}"
                                   Text="{Binding DayNumber,RelativeSource={RelativeSource TemplatedParent}}"/>
                        <ListBox x:Name="Appointments"
                                 ItemsSource="{TemplateBinding ItemSource}"
                                 DisplayMemberPath="{TemplateBinding DisplayMemberPath}"
                                 SelectedValuePath="{TemplateBinding SelectedValuePath}">
                            <ListBox.Resources>
                                <Style TargetType="ListBoxItem">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                                <Border x:Name="border"
                                                        BorderBrush="{TemplateBinding BorderBrush}"
                                                        BorderThickness="{TemplateBinding BorderThickness}"
                                                        Background="{TemplateBinding Background}"
                                                        Padding="{TemplateBinding Padding}"
                                                        SnapsToDevicePixels="true">
                                                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"                                                                          
                                                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

                                                </Border>
                                                <ControlTemplate.Triggers>
                                                    <MultiTrigger>
                                                        <MultiTrigger.Conditions>
                                                            <Condition Property="IsMouseOver"
                                                                       Value="True" />
                                                        </MultiTrigger.Conditions>
                                                        <Setter Property="Background"
                                                                TargetName="border"
                                                                Value="Blue" />
                                                    </MultiTrigger>
                                                    <MultiTrigger>
                                                        <MultiTrigger.Conditions>
                                                            <Condition Property="Selector.IsSelectionActive" Value="False" />
                                                            <Condition Property="IsSelected" Value="True" />
                                                        </MultiTrigger.Conditions>
                                                        <Setter Property="Background"
                                                                TargetName="border"
                                                                Value="{DynamicResource AccentColorBrush}" />
                                                        <Setter Property="BorderBrush"
                                                                TargetName="border"
                                                                Value="{StaticResource Item.SelectedInactive.Border}" />
                                                    </MultiTrigger>
                                                    <MultiTrigger>
                                                        <MultiTrigger.Conditions>
                                                            <Condition Property="Selector.IsSelectionActive"
                                                                       Value="True" />
                                                            <Condition Property="IsSelected"
                                                                       Value="True" />
                                                        </MultiTrigger.Conditions>
                                                        <Setter Property="Background"
                                                                TargetName="border"
                                                                Value="{DynamicResource AccentColorBrush}" />
                                                        <Setter Property="BorderBrush"
                                                                TargetName="border"
                                                                Value="{DynamicResource AccentColorBrush}" />
                                                    </MultiTrigger>
                                                    <Trigger Property="IsEnabled"
                                                             Value="False">
                                                        <Setter Property="TextElement.Foreground"
                                                                TargetName="border"
                                                                Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                                                    </Trigger>
                                                </ControlTemplate.Triggers>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                    <Style.Triggers>
                                        <!--<DataTrigger Binding="{Binding AppointmentState}"
                                                     Value="{x:Static enums:AppointmentState.Accepted}">
                                            <Setter Property="Background"
                                                    Value="Green" />
                                            <Setter Property="Foreground"
                                                    Value="White" />
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding AppointmentState}"
                                                     Value="{x:Static enums:AppointmentState.Decliend}">
                                            <Setter Property="Background"
                                                    Value="Red" />
                                            <Setter Property="Foreground"
                                                    Value="White" />
                                        </DataTrigger>-->
                                    </Style.Triggers>
                                </Style>
                            </ListBox.Resources>
                        </ListBox>
                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Upvotes: 0

Views: 1219

Answers (1)

mm8
mm8

Reputation: 169150

You need to modify the control template:

<ListBox x:Name="Appointments"
     ItemsSource="{TemplateBinding ItemSource}"
     DisplayMemberPath="{TemplateBinding DisplayMemberPath}"
     SelectedValuePath="{TemplateBinding SelectedValuePath}">
    <ListBox.Resources>
        <SolidColorBrush x:Key="Item.MouseOver.Background" Color="#1F26A0DA"/>
        <SolidColorBrush x:Key="Item.MouseOver.Border" Color="#a826A0Da"/>
        <SolidColorBrush x:Key="Item.SelectedInactive.Background" Color="#3DDADADA"/>
        <SolidColorBrush x:Key="Item.SelectedInactive.Border" Color="#FFDADADA"/>
        <SolidColorBrush x:Key="Item.SelectedActive.Background" Color="#3D26A0DA"/>
        <SolidColorBrush x:Key="Item.SelectedActive.Border" Color="#FF26A0DA"/>
    </ListBox.Resources>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="Blue"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Selector.IsSelectionActive" Value="False"/>
                                    <Condition Property="IsSelected" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="{DynamicResource AccentColor}"/>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Border}"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Selector.IsSelectionActive" Value="True"/>
                                    <Condition Property="IsSelected" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="{DynamicResource AccentColor}"/>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Border}"/>
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <!--<DataTrigger Binding="{Binding AppointmentState}"
                                                        Value="{x:Static enums:AppointmentState.Accepted}">
                            <Setter Property="Background"
                                                    Value="Green" />
                            <Setter Property="Foreground"
                                                    Value="White" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding AppointmentState}"
                                                        Value="{x:Static enums:AppointmentState.Decliend}">
                            <Setter Property="Background"
                                                    Value="Red" />
                            <Setter Property="Foreground"
                                                    Value="White" />
                        </DataTrigger>-->
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Blue" />
                </Trigger>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="{DynamicResource AccentColor}"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

Upvotes: 1

Related Questions