CODEWITHSUNDEEP
c#wpf
Davis Miller
Davis Miller

Reputation: 59

WPF UserControl Mouseover make change child Border style

I try to have mouse over style on user control, i can change user control border color with below code : 

    <UserControl.Style>
    <Style>
        <Setter Property="Border.Background" Value="Blue"/>
        <Style.Triggers>
            <Trigger Property="Border.IsMouseOver" Value="True">
                <Setter Property="Border.Background" Value="Green" />
            </Trigger>
        </Style.Triggers>
    </Style>
</UserControl.Style>

But i need to improve my user control style, When i mouse over on it child border background change.Here is the code:

<UserControl x:Class="R8500Receiver._UserControl.FormControl.DialBtn"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="30" d:DesignWidth="43" MouseDown="UserControl_MouseDown">
<UserControl.Style>
    <Style>
        <Setter Property="Border.Background" Value="Blue"/>
        <Style.Triggers>
            <Trigger Property="Border.IsMouseOver" Value="True">
                <Setter Property="Border.Background" Value="Green" />
            </Trigger>
        </Style.Triggers>
    </Style>
</UserControl.Style>
<Grid>
    <Border x:Name="ParentBorder" BorderBrush="Black" BorderThickness="1" Margin="0" CornerRadius="4" Background="#FF1F1D1D" Style="{StaticResource here}">

    </Border>
    <Border BorderBrush="#FF7A7A7A" BorderThickness="1" Margin="2" CornerRadius="4">
        <Border.Background>
            <RadialGradientBrush>
                <GradientStop Color="#FF1D1D1D" Offset="0.107"/>
                <GradientStop Color="#FF322E2E" Offset="1"/>
                <GradientStop Color="#FF303030" Offset="0.737"/>
            </RadialGradientBrush>
        </Border.Background>
    </Border>
    <Label x:Name="DialAlpha" Content="ABC" FontSize="9" VerticalAlignment="Bottom" HorizontalAlignment="Right" Foreground="White" Padding="0" Margin="0,0,4,3" HorizontalContentAlignment="Center" FontFamily="Source Code Pro Black"/>
    <Label x:Name="DialNum" Content="1" VerticalAlignment="Top" HorizontalAlignment="Left" Foreground="White" Padding="0" HorizontalContentAlignment="Center" Margin="8,2,0,0" RenderTransformOrigin="0.33,0.208" FontSize="17"/>

</Grid>

Print screen from VS 2015

Upvotes: 0

Views: 2168

Answers (2)

Siegfried.V
Siegfried.V

Reputation: 1595

Why don't you do that in code behind?

private void mouseLeave(object sender, MouseEventArgs e)
{
    myChild.Background = Brushes.AliceBlue;
}
private void mouseEnter(object sender, MouseEventArgs e)
{
    myChild.Background = Brushes.Blue;
}

in XAML would be something like that :

    <Trigger Property="IsMouseOver" Value="True">
        <Setter TargetName="myParentBorder" Property="Background" Value="Red" />
    </Trigger>

Upvotes: 0

Davis Miller
Davis Miller

Reputation: 59

Finally i can do it, you can read more information on code comment.

<UserControl x:Class="R8500Receiver._UserControl.FormControl.DialBtn"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="30" d:DesignWidth="43" MouseDown="UserControl_MouseDown">


<UserControl.Resources>
    <!--get child with x:type and set style on it with x:key-->
    <Style TargetType="{x:Type Border}" x:Key="BorderMouseOver"> 
        <Setter Property="Background" Value="#FF1F1D1D"/>
        <Setter Property="BorderBrush" Value="Black"></Setter>
        <Style.Triggers>
            <!--We should bind parent control with below code--> 
            <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}}" Value="True">
                <Setter Property="Background" Value="White" />
                <Setter Property="BorderBrush" Value="Black"></Setter>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>
<Grid>
    <Border x:Name="ParentBorder" BorderThickness="1" Margin="0" CornerRadius="4"
            Style="{StaticResource BorderMouseOver}">

    </Border>
    <Border BorderBrush="#FF7A7A7A" BorderThickness="1" Margin="2" CornerRadius="4">
        <Border.Background>
            <RadialGradientBrush>
                <GradientStop Color="#FF1D1D1D" Offset="0.107"/>
                <GradientStop Color="#FF322E2E" Offset="1"/>
                <GradientStop Color="#FF303030" Offset="0.737"/>
            </RadialGradientBrush>
        </Border.Background>
    </Border>
    <Label x:Name="DialAlpha" Content="ABC" FontSize="9" VerticalAlignment="Bottom" HorizontalAlignment="Right" Foreground="White" Padding="0" Margin="0,0,4,3" HorizontalContentAlignment="Center" FontFamily="Source Code Pro Black"/>
    <Label x:Name="DialNum" Content="1" VerticalAlignment="Top" HorizontalAlignment="Left" Foreground="White" Padding="0" HorizontalContentAlignment="Center" Margin="8,2,0,0" RenderTransformOrigin="0.33,0.208" FontSize="17"/>

</Grid>

Upvotes: 1

Related Questions