如何在WPF中鼠标结束时改变组合框的边框颜色?

时间:2016-04-27 20:45:19

标签: c# wpf xaml combobox

昨天我为了同一目的写了类似的关于文本框的帖子。 How to set properties of textbox globally in app.xaml [C#]我也告诉我,我对组合框有问题。我有一个有用的答案imiditelly用文本框解决我的问题。我试图为我的组合框应用类似的解决方案但没有成功。然后我试图在网上找到一些解决方案,包括堆栈和msdn和其他网站,但没有成功。然后我从昨天起编辑了我的帖子,所以我被建议提出新问题,所以我正在做。

所以我遇到的问题是,当鼠标在组合框上方时,我想改变边框的颜色。其余功能和设计应保留在标准组合框中。

我有这样的代码,它适用于按钮,并且可以修改文本框,但我无法将其应用于组合框。 此代码位于应用程序资源的app.xaml中。

    <Style TargetType="ComboBox">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Foreground" Value="#000000"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBox">
                    <Border Name="combobox" 
                        CornerRadius="2"
                        BorderThickness="2"
                        BorderBrush="{TemplateBinding BorderBrush}"  
                        Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="combobox" Property="BorderBrush" Value="#FF0000" />
                            <Setter Property="Foreground" Value="#FF0000"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我粘贴上面的代码是创建边框颜色更改,但组合框的内容消失了,实际上组合框的所有功能都消失了。

我如何在我的应用程序中执行此操作?任何人都可以告诉我这次要改变什么来使其有效。

提前致谢

P.S。 有人可能会为初学者推荐可信和逐步的xaml课程吗? xaml和wpf中的这些技术对Windows Universal Apps有用吗?

!!!!! 编辑:

你可能是对的,因为我没那么有经验,所以我可能在xaml中犯了错误。

我现在所做的第三种方式是:

1)加入

    <Style  x:Key="MyComboBox" TargetType="{x:Type ComboBox}">
        <Setter Property="Foreground" Value="#000000"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="BorderBrush" Value="#FF0000" />
                <Setter Property="Foreground" Value="#FF0000"/>
            </Trigger>
        </Style.Triggers>
    </Style>

2)

    <ComboBox Style="{StaticResource MyComboBox}" Background="#EAEAEA" BorderBrush="Black" BorderThickness="2" FontSize="12" Foreground="Black" Height="49" HorizontalAlignment="Left" HorizontalContentAlignment="Center" Loaded="ABCCombobox_Loaded" Margin="38,425,0,0" ToolTip="ABCCombobox." SelectionChanged="ABCCombobox_SelectionChanged" VerticalAlignment="Top" VerticalContentAlignment="Center" Width="270" x:Name="ABCComboBox" />

我做错了什么?我已经按照网络上的建议找到了这种方式。

4 个答案:

答案 0 :(得分:1)

通过替换ComboBox的模板,您已完全替换了控件的所有可视元素。而不是重新模板化,您可以通过将触发器添加到样式而不是保留原始模板来实现您想要的效果:

<Style TargetType="ComboBox">
    <Setter Property="Foreground" Value="#000000"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="BorderBrush" Value="#FF0000" />
            <Setter Property="Foreground" Value="#FF0000"/>
        </Trigger>
    </Style.Triggers>
</Style>

如果要重新模板控件,可以在MSDN上找到完全可自定义的模板,这些模板仍应支持所有标准功能。

答案 1 :(得分:1)

因此,如果您要查看默认的ComboBox模板(右键单击&gt;编辑模板 - &gt;编辑副本),则会将一堆画笔列为资源。其中之一是;

<SolidColorBrush x:Key="ComboBox.MouseOver.Border" Color="#FF7EB4EA"/>

如果再往前走一点,你会看到嵌入式ToggleButton,这是BorderBrush实际绑定的内容。这告诉我们的第一件事是ComboBox不是你想要的TargetType

<ToggleButton x:Name="toggleButton" 
              BorderBrush="{TemplateBinding BorderBrush}" 
              BorderThickness="{TemplateBinding BorderThickness}" 
              Background="{TemplateBinding Background}" 
              Grid.ColumnSpan="2" 
              IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, 
                                  RelativeSource={RelativeSource TemplatedParent}}" 
              Style="{StaticResource ComboBoxToggleButton}"/>

注意那里设置了ComboBoxToggleButton样式?这是下一个线索。如果我们检查特定样式的触发器,更具体地说是IsMouseOver,请使用我们首先找到的Brush资源查看它;

<Setter Property="BorderBrush" TargetName="templateRoot" 
        Value="{StaticResource ComboBox.MouseOver.Border}"/>

对吗?当我们想要改变实际的BorderBrush ControlTemplate.Triggers时,猜测它并不像希望那样简单,只需点击Setter就可以了。{/ p>

我希望您此时一直在关注,并且已经使用第一句中的说明提取了默认的ComboBox样式模板,因为这是您的答案部分。

  1. 您需要提取模板,在执行“编辑复制”部分后,选择您的app.xaml或其他资源字典,并将其放在那里,您的名字无关紧要。< / p>

  2. 然后,您只需找到首先提到的x:Key="ComboBox.MouseOver.Border" SolidColorBrush,然后用您自己的颜色替换当前颜色。

  3. 由于您希望此功能现在具有通用性,因此您只需找到Style的{​​{1}},然后在解压缩模板时简单删除您提供的TargetType="{x:Type ComboBox}"名称

  4. 对您的x:Key="blah"控件进行普遍IsMouseOver更改。希望这可以帮助。当它不是嵌入式控件的场景时,这种事情真的要容易得多ComboBox IsMouseOver

    ......万一你遇到麻烦。这是一个例子,你可以放入Whatever.Resources或你的资源字典。不要被大小吓倒,它是模板的所有部分。此外,如果您将来需要进行其他更改,那么在这里进行更改会更容易;

    ControlTemplate.Triggers

答案 2 :(得分:1)

我不认为触发器会起作用,因为您正在修改的BorderBrush与鼠标悬停在控件上时使用的BorderBrush不同。我相信您必须编辑现有的默认样式才能获得所需的功能。

对于WPF,请转到设计器并右键单击ComboBox - &gt;编辑模板 - &gt;编辑副本。

然后更改以下内容:

<MultiDataTrigger>
    <MultiDataTrigger.Conditions>
        <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true"/>
        <Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ComboBox}}}" Value="false"/>
    </MultiDataTrigger.Conditions>
    <Setter Property="Background" TargetName="templateRoot">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#FFECF4FC" Offset="0"/>
                <GradientStop Color="#FFDCECFC" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="BorderBrush" TargetName="templateRoot" Value="Red"/>
</MultiDataTrigger>

修改此行中的颜色Value

<Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF569DE5"/>

对于Universal Apps,请转到设计器并右键单击ComboBox - &gt;编辑模板 - &gt;编辑副本。

然后更改以下内容:

<VisualState x:Name="PointerOver">
<Storyboard>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Background">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlPageBackgroundAltMediumBrush}"/>
    </ObjectAnimationUsingKeyFrames>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Background">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}"/>
    </ObjectAnimationUsingKeyFrames>
</Storyboard>

修改此行中的颜色Value

<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}"/>

希望这能满足您的需求。

答案 3 :(得分:0)

在要使用它的XAML页面或App.xaml中使用以下代码。

<Style x:Key="UpdateComboBoxStyle" TargetType="{x:Type ComboBox}" 
   BasedOn="{StaticResource {x:Type ComboBox}}">
  <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="BorderBrush" Value="#FF0000" />
        <Setter Property="Foreground" Value="#FF0000"/>
    </Trigger>
  </Style.Triggers>
</Style>

在组合框中,添加属性如下:

Style="{StaticResource UpdateComboBoxStyle}"

如果不起作用,请告诉我。在这种情况下,只需向我们展示新代码,以便我们找出问题所在。尝试编辑问题,而不是评论,以便其他人可以找到新的更改。