CODEWITHSUNDEEP
wpfmouseover
Dee Choksi
Dee Choksi

Reputation: 125

wpf mouseover fill rectangle

I have Grid in wpf. When I do mouseover on rectangle, I can see color change. But when I do mouseover on content, I see original color of rectangle.

What should I write to apply same mouseover effect on ContentPresenter or is there any way to change rectangle background color on mouse over of content presenter. 

<Grid Background="{TemplateBinding Background}" x:Name="dgColumnHeader">
         <Border x:Name="border" BorderBrush="Black" BorderThickness="0,0,1,1" Grid.ColumnSpan="1">
                <Rectangle Width="116" Margin="3,3,3,3" HorizontalAlignment="Center" RadiusX="7" RadiusY="7">
                    <Rectangle.Style>
                        <Style TargetType="{x:Type Rectangle}">
                            <Setter Property="Fill" Value="{DynamicResource ContentOutofFocusBrush}"></Setter>
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Fill" Value="{DynamicResource ActiveItemBrush}" />
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Rectangle.Style>
                </Rectangle>
            </Border>
            <ContentPresenter x:Name="content"  HorizontalAlignment="Center"  VerticalAlignment="Center" Content="{TemplateBinding Content}" />
        </Grid>

Thanks Dee

Upvotes: 2

Views: 4845

Answers (2)

GameAlchemist
GameAlchemist

Reputation: 19294

you don't need a rectangle inside your Border. Change the Background of the Border, you ll have same result. Then put the ContentPresenter inside that Border, and set the MouseOver handler on the Border, it should work fine.

Upvotes: 2

roberther
roberther

Reputation: 446

If the grid is part of your control template then it is better to move the rectangle style trigger into ControlTemplate.Triggers:

<Window x:Class="Presentation2.MouseOverRectangleWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MouseOverRectangleWindow" Height="300" Width="300">
  <Window.Resources>
    <SolidColorBrush x:Key="ContentOutofFocusBrush" Color="Orange"/>

    <SolidColorBrush x:Key="ActiveItemBrush" Color="Blue" />

    <Style x:Key="MouseOverContentControlStyle" TargetType="{x:Type ContentControl}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ContentControl">
            <Grid Background="{TemplateBinding Background}" x:Name="dgColumnHeader">
              <Border x:Name="border" BorderBrush="Black" BorderThickness="0,0,1,1" Grid.ColumnSpan="1">
                <Rectangle x:Name="PART_Rectangle" Width="116" Margin="3,3,3,3" HorizontalAlignment="Center" RadiusX="7" RadiusY="7">
                  <Rectangle.Style>
                    <Style TargetType="{x:Type Rectangle}">
                      <Setter Property="Fill" Value="{DynamicResource ContentOutofFocusBrush}"></Setter>
                    </Style>
                  </Rectangle.Style>
               </Rectangle>
              </Border>
             <ContentPresenter x:Name="content" HorizontalAlignment="Center"  VerticalAlignment="Center" Content="{TemplateBinding Content}" />
           </Grid>
           <ControlTemplate.Triggers>
             <Trigger Property="IsMouseOver" Value="True">
               <Setter TargetName="PART_Rectangle" Property="Fill" Value="{DynamicResource ActiveItemBrush}" />
             </Trigger>
           </ControlTemplate.Triggers>
         </ControlTemplate>
      </Setter.Value>
  </Setter>
</Style>
</Window.Resources>
   <Grid>
     <ContentControl Style="{StaticResource MouseOverContentControlStyle}">
       <TextBlock Text="Hello World!" />
     </ContentControl>
   </Grid>
</Window>

Upvotes: 3

Related Questions