CODEWITHSUNDEEP
wpfxaml
Peter
Peter

Reputation: 115

WPF trigger set children elements

I have 

<ListBox ItemsSource="{Binding MenuItems}" Background="Transparent" BorderBrush="Transparent">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Button Command="{Binding Action}" BorderBrush="Transparent" Background="Transparent">
                <Grid>
                    <Image Style="{StaticResource MenuImageStyle}" />
                    <TextBlock Text="{Binding Name}" Style="{StaticResource MenuTextStyle}" />
                </Grid>
            </Button>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Styles:

    <Style TargetType="TextBlock" x:Key="MenuTextStyle">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Foreground" Value="#206c8e" />
            </Trigger>
        </Style.Triggers>
    </Style>
    <Style TargetType="Image" x:Key="MenuImageStyle">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Source" Value="Assets/menuButtonHover.png" />
            </Trigger>
        </Style.Triggers>
    </Style>

but I need swap both together on mouse over on Grid or Button, but I can not figure out how.

I need something like this. This is only explanation, not valid

    <Style TargetType="Grid" x:Key="MenuGridStyle">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetType="Image" Property="Source" Value="Assets/menuButtonHover.png" />
                <Setter TargetType="TextBlock" Property="Foreground" Value="#206c8e" />
            </Trigger>
        </Style.Triggers>
    </Style>

Upvotes: 1

Views: 3308

Answers (1)

Marv
Marv

Reputation: 441

I am not sure this is best practice, but should be work.

Add Names like @PiotrWolkowski says

<Grid>
    <Image Name="ButtonImage" Style="{StaticResource MenuImageStyle}" />
    <TextBlock Name="ButtonText" Text="{Binding Name}" Style="{StaticResource MenuTextStyle}" />
</Grid>

and modify your styles triggers like this

<Style.Triggers>
    <DataTrigger Binding="{Binding ElementName=ButtonText, Path=IsMouseOver}" Value="True">
        <Setter Property="Source" Value="Assets/menuButtonHover.png" />
    </DataTrigger>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Source" Value="Assets/menuButtonHover.png" />
    </Trigger>
</Style.Triggers>

<Style.Triggers>
    <DataTrigger Binding="{Binding ElementName=ButtonImage, Path=IsMouseOver}" Value="True">
        <Setter Property="Foreground" Value="#206c8e" />
    </DataTrigger>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Foreground" Value="#206c8e" />
    </Trigger>
</Style.Triggers>

Upvotes: 2

Related Questions