All geek questions in one place

Mouse trigger on parent element

If you wrote a usercontrol button containing image and text.

When the user moves the mouse over the button, I want the effect to be on the image.

Right now I can make it work with the effect on the button.

Here is what I still have:

<Button x:Class="Example.Controls.MyButton" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Name="MyButtonControl" Margin="5" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" d:DesignHeight="80" d:DesignWidth="120" Style="{DynamicResource SomeButtonStyle}" mc:Ignorable="d"> <Button.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="Resources.xaml" /> <ResourceDictionary> <Style x:Key="SomeButtonStyle" BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" TargetType="Button"> <Style.Triggers> <Trigger Property="Button.IsMouseOver" Value="True"> <Setter Property="Button.Effect"> <Setter.Value> <DropShadowEffect BlurRadius="30" Opacity="100" ShadowDepth="0" Color="WhiteSmoke" /> </Setter.Value> </Setter> </Trigger> </Style.Triggers> </Style> </ResourceDictionary> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Button.Resources> <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="SlateGray" BorderThickness="1"> <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <Grid.RowDefinitions> <RowDefinition Height="5*" /> <RowDefinition Height="2*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="3*" /> <ColumnDefinition Width="9*" /> <ColumnDefinition Width="3*" /> </Grid.ColumnDefinitions> <Image Grid.Row="0" Grid.Column="1" Margin="7" HorizontalAlignment="Center" VerticalAlignment="Stretch" Source="{Binding ElementName=MyButtonControl, Path=Image}" /> <TextBlock Grid.Row="1" Grid.Column="1" Margin="2" HorizontalAlignment="Center" VerticalAlignment="Stretch" Style="{DynamicResource MenuButtonText}" Text="{Binding ElementName=MyButtonControl, Path=Text}" /> </Grid> </Border> </Button>

Now I want the effect to simply affect the image or image and text.

Could this be achieved in some way?

Right now I'm trying to get an image trigger and let it light up above the parent's mouse.

Here is the test code:

 <Image Grid.Row="0" Grid.Column="1" Margin="7" HorizontalAlignment="Center" VerticalAlignment="Stretch" Source="{Binding ElementName=ImageButtonControl, Path=Image}"> <Image.Style> <Style> <Style.Triggers> <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsMouseOver}" Value="True"> <Setter Property="Image.Effect"> <Setter.Value> <DropShadowEffect BlurRadius="30" Opacity="100" ShadowDepth="0" Color="WhiteSmoke" /> </Setter.Value> </Setter> </DataTrigger> </Style.Triggers> </Style> </Image.Style> </Image>

But the trigger doesn’t change anything ...

+4
source share
2 answers

The start of seconds is triggered

  <Image.Style> <Style> <Style.Triggers> <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsMouseOver}" Value="True"> <Setter Property="Image.Effect"> <Setter.Value> <DropShadowEffect BlurRadius="30" Opacity="100" ShadowDepth="0" Color="WhiteSmoke" /> </Setter.Value> </Setter> </DataTrigger> </Style.Triggers> </Style> </Image.Style>
+8
source

You must define your buttons in ControlTemplate mode so that you can use the TargetName property in the trigger to configure Image Control. eg:.

 <Button Width="200" Height="200"> <Button.Template> <ControlTemplate TargetType="Button"> <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="SlateGray" BorderThickness="1"> <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <Grid.RowDefinitions> <RowDefinition Height="5*" /> <RowDefinition Height="2*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="3*" /> <ColumnDefinition Width="9*" /> <ColumnDefinition Width="3*" /> </Grid.ColumnDefinitions> <Image x:Name="MyImage" Grid.Row="0" Grid.Column="1" Margin="7" HorizontalAlignment="Center" VerticalAlignment="Stretch" Source="{Binding ElementName=MyButtonControl, Path=Image}" /> <TextBlock Grid.Row="1" Grid.Column="1" Margin="2" HorizontalAlignment="Center" VerticalAlignment="Stretch" Text="{Binding ElementName=MyButtonControl, Path=Text}" /> </Grid> </Border> <ControlTemplate.Triggers> <Trigger Property="Button.IsMouseOver" Value="True"> <Setter Property="Button.Effect" TargetName="MyImage"> <Setter.Value> <DropShadowEffect BlurRadius="30" Opacity="100" ShadowDepth="0" Color="WhiteSmoke" /> </Setter.Value> </Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Template> </Button>
+1
source

Source: https://habr.com/ru/post/1489752/

More articles:


All Articles