在父鼠标悬停时更改子控件 (contentcontrol) 属性答案

【问题标题】：Change child control (contentcontrol) property on mouseover of parent在父鼠标悬停时更改子控件 (contentcontrol) 属性
【发布时间】：2012-02-16 20:35:45
【问题描述】：

我是 WPF 新手，无法弄清楚如何在鼠标悬停时更改 Button 控件的子 ContentControl 的属性。我的代码如下所示：

<Button x:Name="btnAddItem" Height="25" Width="25" Margin="5,0,0,0"
        Style="{DynamicResource btnStyle}" ToolTip="Add Item">
    <ContentControl Content="ContentControl" Height="20" Width="20"
            Template="{DynamicResource contentTemplate}" />
</Button>

现在，在Button 的MouseOver 事件中，我想更改Button 的大小以及子ContentControl 的大小。 ContentControl 实际上包含Button 的矢量图像。请帮忙。

【问题讨论】：

在 WPF 中，您往往不会手动调整控件的大小。相反，您将控件放在某个容器内（即Grid），并且通过不指定控件的Width 和Height，它的大小应该可以填充容器。如果您更清楚地定义您要通过动态调整大小实现的目标，这可能会很有用，因为可能有更好的方法来做到这一点。
另外 Button 已经是一个 ContentControl，所以你不需要嵌入另一个。你可以设置它的 Content 属性。
@SamuelSlade - 网格内有多个按钮和一个搜索框，我想增加大小以突出显示要单击的按钮。要求是这样的，我不能使用任何其他颜色来突出按钮背景，除了白色，我的网格背景有白色和浅灰色渐变，很难区分。所以，我想增加内容的大小来区分突出显示的按钮。但是我使用了您的建议，通过让它占据按钮控件的整个区域来增加内容的大小。谢谢。
@GazTheDestroyer - 如果我尝试在其中放入矢量图像，按钮控件的内容属性对我不起作用。只需将按钮中的控件名称显示为 System.Windows.CONtrols.something。不过还是谢谢。

标签： wpf properties triggers childcontrol

【解决方案1】：

您的Button 将自动拉伸以适应其内容的大小，因此请去掉它的Height 和Width 属性。如果要保持 Button 边缘和 ContentControl 之间的空间，请使用 ContentControl 的Margin 属性。

然后，在您的 ContentControl 的 Style 中使用 DataTrigger 在鼠标悬停时更改 Height/Width。确保在您的样式中设置Height/Width，而不是在您的<ContentControl>标签中，因为如果您在标签中设置它，它将优先于触发的值，因此永远不会改变。

<Style x:Key="MyContentControlStyle" TargetType="{x:Type ContentControl}">
    <Setter Property="Height" Value="20" />
    <Setter Property="Width" Value="20" />
    <Setter Property="Margin" Value="5" />
    <Setter Property="Content" Value="ContentControl" />
    <Setter Property="Template" Value="{DynamicResource contentTemplate}" />
    <Style.Triggers>
        <DataTrigger Binding="{Binding ElementName=btnAddItem, Path=IsMouseOver}" Value="True">
            <Setter Property="Height" Value="20" />
            <Setter Property="Width" Value="20" />
        </DataTrigger >
    </Style.Triggers>
</Style>


<Button x:Name="btnAddItem" Height="25" Width="25" Margin="5,0,0,0"
        Style="{DynamicResource btnStyle}" ToolTip="Add Item">
    <ContentControl Style="{StaticResource MyContentControlStyle}" /> 
</Button>

【讨论】：

感谢您的宝贵建议。我使用您的代码示例分别设置按钮的模板和样式，因为我为按钮使用不同的矢量图像，因此无法设置样式中的模板属性。我喜欢使用内容控件的边距的想法。它工作得很好。但我面临的问题是，我使用的矢量图并没有填满所有的空间，而是像圆圈一样空心。因此，它仅在我将鼠标悬停在图像的一部分上时才有效。当我进入空心部分时，它停止工作。
@ShaktiSingh 使用DataTrigger 代替按钮的IsMouseOver 属性将您的触发器作为基础。我会更新我的代码。

【解决方案2】：

为了实现我想要的，我使用了 Rachel 和 Samuel Slade 的建议。我做了这样的事情：

<Button  x:Name="btnEditItem"  Style="{DynamicResource btnStyle}" Margin="5,0,0,0"   ToolTip="Edit Item" Click="btnEditItem_Click"> 
<ContentControl x:Uid="ContentControl_5" Content="ContentControl" Template=" {DynamicResource contentTemplate}" Margin="2.5"/>
</Button>

我通过Setter属性通过btnStyle设置按钮的高度和宽度，并通过触发器改变按钮的高度和宽度。

这让我工作得很好。感谢您的所有帮助建议。我不确定我是否可以得出这个结论，因为我正在考虑使用不同的子控件属性路径。再次感谢。

【讨论】：