首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >WPF UserControl Mouseover使更改子边框样式

WPF UserControl Mouseover使更改子边框样式
EN

Stack Overflow用户
提问于 2018-11-20 17:19:02
回答 2查看 1.6K关注 0票数 0

我尝试在用户控件上设置鼠标过样式,我可以用下面的代码更改用户控件边框的颜色:

代码语言:javascript
运行
复制
    <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>

但是我需要改进我的用户控制风格,当我鼠标移动到它的子边框背景change.Here是代码:

代码语言:javascript
运行
复制
<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>

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-11-21 16:24:54

最后,我可以这样做,您可以阅读更多关于代码注释的信息。

代码语言:javascript
运行
复制
<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>

票数 1
EN

Stack Overflow用户

发布于 2018-11-21 06:17:49

你为什么不用后面的代码来做呢?

代码语言:javascript
运行
复制
private void mouseLeave(object sender, MouseEventArgs e)
{
    myChild.Background = Brushes.AliceBlue;
}
private void mouseEnter(object sender, MouseEventArgs e)
{
    myChild.Background = Brushes.Blue;
}

在XAML中应该是这样的:

代码语言:javascript
运行
复制
    <Trigger Property="IsMouseOver" Value="True">
        <Setter TargetName="myParentBorder" Property="Background" Value="Red" />
    </Trigger>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53398240

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档