[英]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>
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>
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;
}
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 : 在XAML中将是这样的:
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="myParentBorder" Property="Background" Value="Red" />
</Trigger>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.