how to change the background of a toggle button inside a combobox when ismouseover

Question

how to change the background of a toggle button inside a combobox when ismouseover

Navigation

#1 by (0 votes)

0

I have a combobox in a wpf application and I want when IsMouseOver the background changes to an image. this is the style of the toggle button now with background with a color. Any ideas?

this is the combobox code

 <Style x:Key="cbbOpciones" TargetType="{x:Type ComboBox}">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
    <Setter Property="MinWidth" Value="120"/>
    <Setter Property="MinHeight" Value="20"/>
    <Setter Property="Foreground" Value="#ffe57e31"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBox}">
                <Grid>
                    <ToggleButton 
                        Name="ToggleButton" 
                        Template="{StaticResource ComboBoxToggleButton}" 
                        Grid.Column="2" 
                        Focusable="false"
                        IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
                        ClickMode="Press">
                    </ToggleButton>
                    <ContentPresenter Name="ContentSite" IsHitTestVisible="False"  
                        ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                        ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                        Margin="3,3,23,3"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Left" />                        
                    <TextBox x:Name="PART_EditableTextBox"
                        Style="{DynamicResource tb_cbb}" 
                        BorderThickness="0"
                        HorizontalAlignment="Left" 
                        VerticalAlignment="Center" 
                        Margin="3,3,3,3"
                        Focusable="True" 
                        Background="Transparent"
                        Foreground="#ffe57e31"
                        Visibility="Visible"
                        Text="Opciones"                                 
                        IsReadOnly="{TemplateBinding IsReadOnly}"/>
                    <Popup 
                        Name="Popup"
                        Placement="Bottom"
                        IsOpen="{TemplateBinding IsDropDownOpen}"
                        AllowsTransparency="True" 
                        Focusable="False"
                        PopupAnimation="Slide">

                        <Grid Name="DropDown"
                          SnapsToDevicePixels="True"                
                          MinWidth="{TemplateBinding ActualWidth}"
                          MaxHeight="{TemplateBinding MaxDropDownHeight}">
                            <Border 
                            x:Name="DropDownBorder"
                            Background="Transparent"

                            BorderThickness="1"
                            BorderBrush="#ffe57e31" CornerRadius="5,5,5,5"/>
                            <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                            </ScrollViewer>
                        </Grid>
                    </Popup>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasItems" Value="false">
                        <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="#888888"/>
                    </Trigger>
                    <Trigger Property="IsGrouping" Value="true">
                        <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                    </Trigger>
                    <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
                        <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="0"/>
                        <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
                    </Trigger>
                    <Trigger Property="IsEditable"  Value="true">
                        <Setter Property="IsTabStop" Value="false"/>
                        <!--<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>-->
                        <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
    </Style.Triggers>
</Style>

togglebutton code

<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="20" />
        </Grid.ColumnDefinitions>
        <Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="0" Background="Transparent" BorderBrush="#FF97A0A5" BorderThickness="0" />
        <Border Grid.Column="0" CornerRadius="0" Margin="1" Background="Transparent" BorderBrush="#ffe57e31" BorderThickness="0,0,0,0" />
        <Path x:Name="Arrow" Grid.Column="1" Fill="#ffe57e31" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,-8" Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z" />
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="ToggleButton.IsMouseOver" Value="true">
            <Setter TargetName="Border" Property="Background" Value="#ffe57e31" />
        </Trigger>
        <Trigger Property="ToggleButton.IsChecked" Value="true">
            <Setter TargetName="Border" Property="Background" Value="#E0E0E0" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter TargetName="Border" Property="Background" Value="#EEEEEE" />
            <Setter TargetName="Border" Property="BorderBrush" Value="#AAAAAA" />
            <Setter Property="Foreground" Value="#888888"/>
            <Setter TargetName="Arrow" Property="Fill" Value="#888888" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Resource 'tb_cbb', thank you very much ...

 <Style x:Key="tb_cbb" TargetType="TextBox">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <StackPanel Orientation="Horizontal">
                    <Image Source="img/menu_o.png" Width="20" VerticalAlignment="Center"/>
                    <TextBlock Margin="6" Text="{TemplateBinding Text}" Width="90" FontSize="20" VerticalAlignment="Center" Foreground="#ffe57e31"/>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

wpf combobox

asked by Yara Undomiel 12.07.2018 в 19:33

source

1 answer

Data entry form with Django Delay loading own font

score 0 · Answer 1

Look, I was really surprised by your question, but now that you put all the labeling I put it together and I do not know if what I got is the same as what you have (below I explain why), but anyway I leave you my conclusion:

First: For the toggleButton to change from a SolidColorBrush to an ImageBrush when you mouse over it you must edit the corresponding trigger:

<Trigger Property="ToggleButton.IsMouseOver" Value="true">
    <!--<Setter TargetName="Border" Property="Background" Value="#ffe57e31" />-->
    <Setter TargetName="Border" Property="Background" >
        <Setter.Value>
            <ImageBrush ImageSource="img/imagen_de_fondo.png"/>
        </Setter.Value>
    </Setter>
</Trigger>

With that simple change I got what you ask me, the change is made in the statement of:

<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">

But it behaves strange, so I put together a separate template and noticed that you do not have the MultiTriggers in the ControlTemplate of the Combobox, but only the Triggers, I do not know if someone else will have an answer but I have been a bit confused.

I'll keep trying anyway. Greetings.