事件触发器来设置另一个组件的样式

问题描述 投票：0回答：1

我正在为我正在处理的项目创建一些自定义组件，并且在设计用户组件样式时遇到了一个问题（我知道这有点乱，我打算在完成后清理它）成功了）。

它是一个文本框，其中有一个清晰的按钮，以矩形作为背景，比单独设置其他两个组件的样式具有更无缝的外观，并且我有一个悬停动画和颜色更改，我想在悬停时应用它们在仅适用于矩形的 

UserControl
上，但是当鼠标进入文本框和按钮时，我很难让它将样式应用到矩形。我不确定这是否是正确的方法（下面的工作代码和样式）。

ClearableTextBox.xaml

<UserControl x:Class="TestEnv.View.CustomControls.ClearableTextBox"
             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" 
             xmlns:local="clr-namespace:TestEnv.View.CustomControls"
             mc:Ignorable="d" 
             d:DesignHeight="40" d:DesignWidth="250">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ClearableTextBoxDictionary.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>


    <Grid>
        <TextBox x:Name="textInput" VerticalAlignment="Top" Height="35"   
             TextChanged="textInput_TextChanged" Margin="0,2,40,0" MouseEnter="textInput_MouseEnter"/>
        <TextBlock x:Name="tbPlaceHolder" Text="{Binding PlaceHolder}" VerticalAlignment="Center" FontWeight="Light"
               Margin="13,0,30,3" Panel.ZIndex="-1" Height="20"/>
        <Rectangle x:Name="BackgroundRectangle" Panel.ZIndex="-2"/>

        <Button x:Name="buttonClear" Click="buttonClear_Click" HorizontalAlignment="Right" VerticalAlignment="Center" Height="36" Width="35" Margin="0,0,0,0"
          MouseEnter="buttonClear_MouseEnter" MouseLeave="buttonClear_MouseLeave">

            <Path Name="xSVG" Data="M 9.00,9.00
                   C 9.00,9.00 27.00,27.00 27.00,27.00M 27.00,9.00
                   C 27.00,9.00 9.00,27.00 9.00,27.00"
              Stretch="Fill"
              Stroke="White"
              Fill="White"
              Margin="12,12,12,12"
              StrokeThickness="2.5"
              StrokeStartLineCap="Round"
              StrokeEndLineCap="Round"
              MouseEnter="buttonClear_MouseEnter" 
              MouseLeave="buttonClear_MouseLeave"
              />

        </Button>
    </Grid>
</UserControl>

ClearableTextBoxDictionary.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">


    <Color x:Key="GradientStartColor">#FF577bff</Color>
    <Color x:Key="GradientEndColor">#aa9a57ff</Color>
    <Color x:Key="HoverGradientStartColor">#FF577bff</Color>
    <Color x:Key="HoverGradientEndColor">#FF00fac4</Color>
    <Color x:Key="PressedHoverGradientStartColor">#FF3056D8</Color>
    <Color x:Key="PressedHoverGradientEndColor">#FF00C29A</Color>
    <Color x:Key="PressedGradientStartColor">#FF2C4AB5</Color>
    <Color x:Key="PressedGradientEndColor">#FF009986</Color>


    <Style TargetType="Rectangle">
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
        <Setter Property="RadiusX" Value="10"/>
        <Setter Property="RadiusY" Value="10"/>
    <Setter Property="RenderTransform">
        <Setter.Value>
            <ScaleTransform ScaleX="1" ScaleY="1"/>
        </Setter.Value>
    </Setter>
    <Setter Property="Fill">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="{StaticResource GradientStartColor}" Offset="0"/>
                <GradientStop Color="{StaticResource GradientEndColor}" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
        <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform ScaleX="1" ScaleY="1"/>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation 
                            Storyboard.TargetProperty="(Fill).(LinearGradientBrush.GradientStops)[0].Color" 
                            To="{StaticResource HoverGradientStartColor}" 
                            Duration="0:0:0.5"/>
                        <ColorAnimation 
                            Storyboard.TargetProperty="(Fill).(LinearGradientBrush.GradientStops)[1].Color" 
                            To="{StaticResource HoverGradientEndColor}" 
                            Duration="0:0:0.5"/>

                        <DoubleAnimation 
                            Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)" 
                            To="1.04" 
                            Duration="0:0:0.25"/>
                        <DoubleAnimation 
                            Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" 
                            To="1.04" 
                            Duration="0:0:0.25"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>

            <EventTrigger RoutedEvent="UIElement.MouseLeave">
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation 
                            Storyboard.TargetProperty="(Fill).(LinearGradientBrush.GradientStops)[0].Color" 
                            To="{StaticResource GradientStartColor}" 
                            Duration="0:0:0.5"/>
                        <ColorAnimation 
                            Storyboard.TargetProperty="(Fill).(LinearGradientBrush.GradientStops)[1].Color" 
                            To="{StaticResource GradientEndColor}" 
                            Duration="0:0:0.5"/>

                        <DoubleAnimation 
                            Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)" 
                            To="1" 
                            Duration="0:0:0.25"/>
                        <DoubleAnimation 
                            Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" 
                            To="1" 
                            Duration="0:0:0.25"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>

    <Style TargetType="TextBlock">
        <Setter Property="Foreground" Value="Gray"/>
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="FontFamily" Value="Segoe UI Light"/>
        <Setter Property="Effect">
            <Setter.Value>
                <DropShadowEffect BlurRadius="20" Opacity="0.2" ShadowDepth="5" Color="DarkSlateGray"/>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="TextBox">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Padding" Value="5"/>
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="FontFamily" Value="Segoe UI"/>
        <Setter Property="Margin" Value="0,3,0,0"/>
        <Style.Resources>
            <Style TargetType="Border">
                <Setter Property="CornerRadius" Value="10" />
            </Style>
        </Style.Resources>
    </Style>

    <Style TargetType="Button">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Padding" Value="10"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="FontFamily" Value="Segoe UI Semibold"/>
        <Setter Property="FontWeight" Value="Bold" />
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Background="{TemplateBinding Background}"
                        CornerRadius="0, 10, 10, 0">
                        <ContentPresenter HorizontalAlignment="Center"
                                      VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Foreground" Value="#00b38c"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

我尝试创建一个故事板，然后事件触发器将该故事板应用到矩形，但我得到了一个错误

Style 中的 Storyboard 树无法指定 TargetName。删除目标名称

所以看起来它不想引用预期组件之外的其他组件。我之所以走这条路，是因为当鼠标悬停在文本框上时，它认为它不再位于矩形上方。

.net wpf data-binding wpf-controls ui-design
1个回答
0
投票

我不习惯在堆栈溢出上发帖。这是我的

Generic.xaml

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WeatherApp.View.Controls">

<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="/WeatherApp;component/Resources/Colours.xaml" />
    <ResourceDictionary Source="/WeatherApp;component/Resources/MainDictionary.xaml" />
</ResourceDictionary.MergedDictionaries>

<!-- Default style for ClearableTextBox -->
<Style TargetType="{x:Type local:ClearableTextBox}">
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="{StaticResource GradientStartColor}" Offset="0"/>
                <GradientStop Color="{StaticResource GradientEndColor}" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Effect">
        <Setter.Value>
            <DropShadowEffect BlurRadius="20" Opacity="0.2" ShadowDepth="5" Color="DarkSlateGray"/>
        </Setter.Value>
    </Setter>
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
    <Setter Property="RenderTransform">
        <Setter.Value>
            <ScaleTransform ScaleX="1" ScaleY="1"/>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:ClearableTextBox}">
                <Grid>
                    <!-- Background Rectangle -->
                    <Rectangle x:Name="BackgroundRectangle" 
                           RadiusX="10" 
                           RadiusY="10" 
                           Fill="{TemplateBinding Background}" />

                    <!-- TextBox Part with ScaleTransform to allow resizing -->
                    <ScrollViewer x:Name="PART_ContentHost"
                              Margin="5,0,40,0"
                              HorizontalAlignment="Stretch"
                              VerticalAlignment="Stretch"
                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                        <ScrollViewer.RenderTransform>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                            <!-- Default scale -->
                        </ScrollViewer.RenderTransform>
                    </ScrollViewer>

                    <!-- Clear Button -->
                    <Button x:Name="ClearButton" 
                        Visibility="{TemplateBinding IsClearButtonVisible}" 
                        Width="35" 
                        Height="35" 
                        HorizontalAlignment="Right" 
                        Margin="0,0,5,0"
                        VerticalAlignment="Center" 
                        Background="Transparent" 
                        BorderThickness="0"
                        Panel.ZIndex="1">
                        <Path x:Name="ClearButtonPath" 
                          Data="M 9.00,9.00 C 9.00,9.00 27.00,27.00 27.00,27.00M 27.00,9.00 C 27.00,9.00 9.00,27.00 9.00,27.00"
                          Stretch="Fill" 
                          Stroke="White" 
                          Margin="9,9"
                          StrokeThickness="3.5"  
                          StrokeStartLineCap="Round" 
                          StrokeEndLineCap="Round"/>
                    </Button>
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="Text" Value="">
                        <Setter TargetName="ClearButton" Property="Visibility" Value="Collapsed"/>
                    </Trigger>

                    <Trigger SourceName="ClearButton" Property="IsMouseOver" Value="True">
                        <Setter TargetName="ClearButtonPath" Property="Stroke" Value="Black" />
                        <Setter TargetName="ClearButton" Property="Background" Value="Transparent" />
                    </Trigger>

                    <Trigger SourceName="ClearButton" Property="IsMouseOver" Value="False">
                        <Setter TargetName="ClearButtonPath" Property="Stroke" Value="White" />
                        <Setter TargetName="ClearButton" Property="Background" Value="Transparent" />
                    </Trigger>

                    <EventTrigger RoutedEvent="MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation 
                                    Storyboard.TargetProperty="RenderTransform.ScaleX"
                                    To="1.04" 
                                    Duration="0:0:0.23"/>
                                <DoubleAnimation 
                                    Storyboard.TargetProperty="RenderTransform.ScaleY"
                                    To="1.04" 
                                    Duration="0:0:0.23"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>

                    <EventTrigger RoutedEvent="MouseLeave">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation 
                                    Storyboard.TargetProperty="RenderTransform.ScaleX"
                                    To="1.0" 
                                    Duration="0:0:0.3"/>
                                <DoubleAnimation 
                                    Storyboard.TargetProperty="RenderTransform.ScaleY"
                                    To="1.0" 
                                    Duration="0:0:0.3"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
</ResourceDictionary>

未悬停时的按钮

鼠标悬停在按钮上时

我没有任何其他按钮样式与之冲突。我尝试用这个改变来测试它

<Trigger SourceName="ClearButton" Property="IsMouseOver" Value="True">
                        <Setter TargetName="ClearButtonPath" Property="Stroke" Value="Black" />
                        <Setter TargetName="ClearButton" Property="Background" Value="Blue" />
                    </Trigger>

                    <Trigger SourceName="ClearButton" Property="IsMouseOver" Value="False">
                        <Setter TargetName="ClearButtonPath" Property="Stroke" Value="White" />
                        <Setter TargetName="ClearButton" Property="Background" Value="Green" />
                    </Trigger>

可见绿色背景的按钮

悬停背景不变的按钮

似乎必须有一些其他覆盖，或者可能与其他组件的某些绑定存在冲突？

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.