Change child control (contentcontrol) property on mouseover of parent

Question

I am new to WPF and am not able to figure out how to change the property of the child ContentControl of the Button control on mouse over. My code looks something like this:

<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>

Now, when in the MouseOver event of the Button, I would like to change the size of the Button as well as the size of the child ContentControl. The ContentControl actually contains a vector image for the Button. Please help.

In WPF, you tend not to manually re-size controls. Instead, you put the control inside of some container (i.e. `Grid`) and by not specifying the `Width` and `Height` of the control, it should size to fill the container. It may be useful if you give a clearer definition of what you are trying to achieve with the dynamic sizing as there may be a better way to do it. — Samuel Slade, Jan 23 '12 at 13:58
Also Button is already a ContentControl so you don't need to embed another one. You can just set its Content property. — GazTheDestroyer, Jan 23 '12 at 14:09
@SamuelSlade - There are multiple buttons inside the grid and a search box and I want to increase the size to highlight the button to be clicked. The requirement is as such that I can not use any other color to highlight button background except off white and my grid back ground has white and light gray gradient which makes it difficult to distinguish. So, I want to increase the size of the content to distinguish the highlighted button. But I used your advice to increase the size of the content by letting it occupy the full area of the button control. Thanks. — Shakti Prakash Singh, Jan 24 '12 at 06:54
@GazTheDestroyer - The content property of the button control does not work for me if I try to put a Vector Image inside it. Just displays name of the control in the button as System.Windows.COntrols.something. But thanks anyways. — Shakti Prakash Singh, Jan 24 '12 at 06:55

Rachel · Accepted Answer · 2012-01-24T13:03:12.897

Your Button will automatically stretch to fit the size of it's contents, so get rid of it's Height and Width properties. If you want to maintain the space between the edge of the Button and the ContentControl, use the ContentControl's Margin property.

Then, use a DataTrigger in your ContentControl's Style to change the Height/Width when the mouse is over it. Be sure you set Height/Width in your style instead of in your <ContentControl> tag, because if you set it in the tag it will take precedence over the triggered value so will never change.

<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>

Thanks for the beautiful advice. I used your code example to set both the Template and Style for the button seperately as I am using different vector images for the buttons, so can not set the template property in style. And I liked the idea to use margins for the contentcontrol. It worked beautifully. But the issue I faced was that the vector image I used does not fill up all the space but is hollow like a circle. So, it works only when I hover over the part of the image. When I am inside the hollow part, it stops working. — Shakti Prakash Singh, Jan 24 '12 at 07:00
@ShaktiSingh Base your Trigger off of the Button's `IsMouseOver` property using a `DataTrigger` instead. I'll update my code. — Rachel, Jan 24 '12 at 13:02

score 0 · Answer 2 · answered Jan 24 '12 at 07:09

In order to achieve what I wanted, I used Rachel's advice as well as Samuel Slade's. I did it something like this:

<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>

And I set the height and width of the button through btnStyle via Setter property and change the height and width of the button through the triggers.

This got me working perfectly. I appreciate all your help suggestions. I am not sure if I could have reached to this conclusion as I was thinking on a different route of child controls property. Thanks again.

Change child control (contentcontrol) property on mouseover of parent

2 Answers2