CODEWITHSUNDEEP
c#wpfxaml
NoOne
NoOne

Reputation: 104

How do I get a rectangle within my button to change colour on hover?

How do I get a rectactangle inside of my button to flip it's colour on hover, I seem to need the 'fill' property which isn't inside of a button.

Here is what I want:

Image of buttons that are needed

See the blue rectangle under at the bottom of the button on hover I need that to change from the button colour to the blue colour.

I have tried this: 

<Style TargetType="{x:Type Button}" x:Key="MenuButton">
                    <Setter Property="Background" Value="#d8d8d8" />
                    <Setter Property="Foreground" Value="Black" />

                    <Setter Property="anything" Value="Blue" />

                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                                <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">

                                    <!-- Inner Rectangle with rounded corners. -->
                                    <Rectangle x:Name="innerRectangle" Fill="{TemplateBinding Background}"/>
                                    <!-- Present Content (text) of the button. -->
                                    <DockPanel Name="myContentPresenterDockPanel" HorizontalAlignment="center">
                                        <ContentPresenter x:Name="myContentPresenter" Margin="12" TextBlock.Foreground="{TemplateBinding Foreground}" TextBlock.FontSize="14" TextBlock.FontWeight="Light"/>
                                    </DockPanel>
                                    <Rectangle x:Name="test" Fill="{TemplateBinding anything }" Height="4" VerticalAlignment="Bottom"/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                   <Style.Triggers>
                     <Trigger Property="IsMouseOver" Value="True">
                          <Setter Property="Background" Value="#d2d2d2"/>
                          <Setter Property="Foreground" Value="White"/>
                          <Setter Property="anything" Value="Blue" />
                    </Trigger>
                 </Style.Triggers>
</Style>

Obviously that would have worked if fill was a property in button, am I thinking of this totally wrong?

Thanks All!

Upvotes: 1

Views: 267

Answers (1)

Raviraj Palvankar
Raviraj Palvankar

Reputation: 879

You will have to use ControlTemplate.Triggers and then you can access your rectangle with TargetName inside your setter. Like this:

<Style TargetType="{x:Type Button}" x:Key="MenuButton">
        <Setter Property="Background" Value="#d8d8d8" />
        <Setter Property="Foreground" Value="Black" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">

                        <!-- Inner Rectangle with rounded corners. -->
                        <Rectangle x:Name="innerRectangle" Fill="{TemplateBinding Background}"/>
                        <!-- Present Content (text) of the button. -->
                        <DockPanel Name="myContentPresenterDockPanel" HorizontalAlignment="center">
                            <ContentPresenter x:Name="myContentPresenter" Margin="12" TextBlock.Foreground="{TemplateBinding Foreground}" TextBlock.FontSize="14" TextBlock.FontWeight="Light"/>
                        </DockPanel>
                        <Rectangle x:Name="test" Fill="Black" Height="4" VerticalAlignment="Bottom"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="#d2d2d2"/>
                            <Setter Property="Foreground" Value="White"/>
                            <Setter TargetName="test" Property="Fill" Value="Green" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Upvotes: 3

Related Questions