扩展样式以捕获点击事件答案

【问题标题】：Extend the style to capture click event扩展样式以捕获点击事件
【发布时间】：2014-01-03 10:42:11
【问题描述】：

我正在尝试建立一个像视觉工作室这样的设计师。

看看xaml：

<Style x:Key="myStyle" TargetType="{x:Type Border}">
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="BorderThickness" Value="2" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="BorderBrush" Value="DodgerBlue" />
        </Trigger>
    </Style.Triggers>
</Style>
...
...
...
<Border Style="myStyle">
    <Grid>
        <Border Style="myStyle">
            <Rectangle Fill="Transparent" />
            <TextBlock Text="abc" />
        </Border>        
    </Grid>
</Border>

上面的代码运行良好。现在我想扩展上面的样式，这样当我点击任何控件时，边框的颜色应该变成绿色。

更新：

我已经把上面的样式改成了下面的代码。

<Style x:Key="BorderStyle" TargetType="{x:Type Border}">
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="BorderThickness" Value="2" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="BorderBrush" Value="DodgerBlue" />
        </Trigger>
        <EventTrigger RoutedEvent="MouseDown">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="Green" Duration="0:0:0.100" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Style.Triggers>
</Style>

现在我可以看到当我单击边框时，它的颜色变为绿色。但是当鼠标离开文本块时，边框的颜色会变回透明。

【问题讨论】：

我知道我可以使用 EventTrigger 但 Border 没有任何 Click 事件。
什么是“点击任何控件”。意思是..??
@Farzi 我认为 Click = MouseDown + MouseUp。
我问点击“任何控件”的意思...点击什么（？）您希望边框变为绿色..
@Farzi 抱歉，我的意思是点击任意边框。

标签： wpf xaml

【解决方案1】：

 <Style.Triggers>
       <EventTrigger RoutedEvent="MouseDown">
            <Setter Property="BorderBrush" Value="DodgerBlue" />                    
       </EventTrigger>
</Style.Triggers>

并且您不想为所有边框绑定样式，如果您需要为所有边框应用该样式，只需删除该样式的键名即可。它将适用于所有目标控件。

如果您需要检查和应用颜色，就像按钮单击一样，就像切换按钮一样，您需要维护一个属性，该属性将在触发器中给出，并且需要在按钮单击时更改。 .

【讨论】：

我收到一个错误：无法识别或无法访问成员“IsPressed”。
我试过上面的代码但是EventTrigger不支持Setter。所以我把它改成了它支持的代码。请查看相关更新。

【解决方案2】：

试试这个

<Style x:Key="myStyle" TargetType="{x:Type Border}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush">
            <Setter.Value>
                <SolidColorBrush x:Name="BorderBrushColor" Color="Transparent"></SolidColorBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderThickness" Value="2" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter  Property="BorderBrush" Value="DodgerBlue" />
            </Trigger>  
            <EventTrigger RoutedEvent="MouseDown">
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimationUsingKeyFrames  Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                            <EasingColorKeyFrame KeyTime="0"  Value="Green" />
                        </ColorAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>

【讨论】：

感谢 Heena 尝试回答问题。在您发布答案之前，我已经尝试过。但在这种情况下，我遇到了一些问题。当我的鼠标越过边界时，它的颜色将变为 DodgerBlue。当我单击边框时，它的颜色变为绿色。到目前为止，它很好。但是当我的鼠标移出边框时，如果不是绿色，我想将边框的颜色更改为透明。

【解决方案3】：

试试这个

   <Style x:Key="myStyle" TargetType="{x:Type Border}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush">
            <Setter.Value>
                <SolidColorBrush x:Name="BorderBrushColor" Color="Transparent"></SolidColorBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderThickness" Value="2" />            
        <Style.Triggers>            
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimationUsingKeyFrames FillBehavior="HoldEnd" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                            <EasingColorKeyFrame KeyTime="0"  Value="DodgerBlue" />
                        </ColorAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseDown">
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimationUsingKeyFrames FillBehavior="HoldEnd" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                            <EasingColorKeyFrame KeyTime="0"  Value="Green" />
                        </ColorAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>               
        </Style.Triggers>
    </Style>

【讨论】：

再次感谢 Heena，我已经尝试了您的代码，发现您没有为 MouseLeave 使用 EventTrigger。如果我为 MouseLeave 添加一些 EventTrigger，那么我会遇到我在您之前的回答中的评论中提到的问题。

【解决方案4】：

在以前的样式中添加此代码

        <Trigger Property="IsMouseOver" Value="False">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames FillBehavior="HoldEnd" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                                <EasingColorKeyFrame KeyTime="0"  Value="Transparent" />
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>                    
            </Trigger>

【讨论】：

抱歉，这不会对输出产生任何影响。