0

Есть Image со стилем, который размещен на MyControl : UserControl, в MyControl есть свойство IsSelected.

<Image.Style>
    <Style TargetType="{x:Type Image}">
        <Style.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetProperty="Opacity">
                        <DoubleAnimation From="0.4" To="1" Duration="0:0:.25"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetProperty="Opacity">
                        <DoubleAnimation From="1" To="0.4" Duration="0:0:.25"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</Image.Style>

Как задать условие типа: Если MyControl.IsSelected то выполнять тригеры, если нет то не выполнять?

1 ответ 1

3

Используйте MultiDataTrigger на IsMouseOver и IsSelected:

<Style.Triggers>
    <MultiDataTrigger>
        <MultiDataTrigger.Conditions>
            <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True"/>
            <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType=self:MyControl}}" Value="True"/>
        </MultiDataTrigger.Conditions>
        <MultiDataTrigger.EnterActions>
            <BeginStoryboard>
                <Storyboard Storyboard.TargetProperty="Opacity">
                    <DoubleAnimation From="0.4" To="1" Duration="0:0:.25"/>
                </Storyboard>
            </BeginStoryboard>
        </MultiDataTrigger.EnterActions>
        <MultiDataTrigger.ExitActions>
            <BeginStoryboard>
                <Storyboard Storyboard.TargetProperty="Opacity">
                    <DoubleAnimation From="1" To="0.4" Duration="0:0:.25"/>
                </Storyboard>
            </BeginStoryboard>
        </MultiDataTrigger.ExitActions>
    </MultiDataTrigger>
</Style.Triggers>

Или вы можете дать имя корневому элементу в UserControl'е, и сослаться на него прямо:

            <Condition Binding="{Binding IsSelected, ElementName=Root}" Value="True"/>

Не забудьте установить начальное значение Opacity в 0.4!


Обновление: Если вы хотите, чтобы триггеры начинали срабатывать только на MouseIn/Out, а не в то время, когда контрол получает IsSelected, можно сделать так:

<UserControl x:Class="SO16.MyControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:self="clr-namespace:SO16"
             Height="30"
             x:Name="Root">
    <UserControl.Resources>
        <Style x:Key="SelectedImageStyle" TargetType="Image">
            <Style.Triggers>
                <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard>
                        <Storyboard Storyboard.TargetProperty="Opacity">
                            <DoubleAnimation To="1" Duration="0:0:.25"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard>
                        <Storyboard Storyboard.TargetProperty="Opacity">
                            <DoubleAnimation To="0.4" Duration="0:0:.25"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>
    <UserControl.Template>
        <ControlTemplate TargetType="{x:Type UserControl}">
            <Grid>
                <Image Name="InnerImage" Source="https://www.google.com/images/srpr/logo11w.png" Height="30" Opacity="0.4"/>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="self:MyControl.IsSelected" Value="True">
                    <Setter Property="Style" TargetName="InnerImage" Value="{StaticResource SelectedImageStyle}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </UserControl.Template>
</UserControl>

Я убрал контент в Template, отделил стиль в ресурсы, и в DoubleAnimation убрал From.

3
  • Да, я точно так же и реализовал, прям один в один как у Вас. Но была такая проблема, когда свойство IsSelected менялось на True и в этот момент мышка была на контроле(когда кликнул и Имедж как бы стал IsSelected) то анимация сработала и затемнила картинку. Пока что решил вот так, анимация входа у меня FillBehavior="HoldEnd" а выхода FillBehavior="Stop", немного мигает конечно, но в результате работает как нужно, может быть если еще решение этой проблемы? И еще, {Binding IsSelected, ElementName=Root вот так вот не хочет во обще работать почему то...
    – SkyDancer
    19 июл 2015 в 13:11
  • @SkyDancer: А вы не забыли корневому элементу в UserControl дать имя Root?
    – VladD
    19 июл 2015 в 13:48
  • @SkyDancer: обновил ответ.
    – VladD
    19 июл 2015 в 14:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.