3

Столкнулся с проблемой при написании стиля, хочу что-бы при наведении на любой из прямоугольников двигалась картинка (block1) + изменялась прозрачность, если применяю в коде прямоугольника - все работает отлично, а в стиле выдает ошибку:

Свойство TargetName не может быть задано для типа Style Setter.

<Window.Resources>
    <Style TargetType="Rectangle">
        <Style.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard TargetName="block1" TargetProperty="Margin" >
                        <ThicknessAnimation From="-750,0,750,0" To="-200,0,200,0" Duration="0:0:0.7" DecelerationRatio="0.6"/>
                    </Storyboard>
                </BeginStoryboard>
                <BeginStoryboard>
                    <Storyboard TargetName="block1" TargetProperty="Opacity" >
                        <DoubleAnimation To="0.8" Duration="0:0:0.4"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <BeginStoryboard>
                    <Storyboard TargetName="block1" TargetProperty="Opacity" >
                        <DoubleAnimation To="0" Duration="0:0:0.1"/>
                    </Storyboard>
                </BeginStoryboard>
                <BeginStoryboard>
                    <Storyboard TargetName="block1" TargetProperty="Margin" >
                        <ThicknessAnimation To="-450,0,450,0" Duration="0:0:0.7"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
4
  • Ну всё правильно, откуда стилю знать, что у вас такое block1?
    – VladD
    29 окт 2017 в 14:25
  • Т.е. если я этот код вставлю в 20 прямоугольников, то на оптимизации приложения это никак не скажется?
    – Jefoce
    29 окт 2017 в 15:01
  • Я не совсем понимаю, о какой оптимизации идёт речь, если у вас пока просто не компилируется :-P
    – VladD
    29 окт 2017 в 15:08
  • Дело в том, что сейчас данный код без стиля у меня установлен в <> каждого прямоугольника, всего их 15 штук. А я хотел оптимизировать его через стиль, но похоже тут только через логику c# можно
    – Jefoce
    29 окт 2017 в 15:41

1 ответ 1

1

Проще всего, наверное, сделать общий стиль у картинки block1, которую вы собираетесь двигать. Вместо стиля у каждого прямоугольника мы соберём нужные свойства вместе. Обычно такое делается через MultiTrigger, но он реализует логику конъюнкции (то есть, триггер срабатывает, когда все условия выполнены), а нам нужна дизъюнкция (если хотя бы одно).

Поэтому нам придётся написать маленький конвертер.

class DisjunctionConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object p, CultureInfo ci) =>
        values.Any(v => (bool)v);

    public object[] ConvertBack(object value, Type[] targetTypes, object p, CultureInfo ci)=>
        throw new NotImplementedException();
}

Имея такой конвертер, всё получается довольно просто.

Вот пример XAML'а:

<Window.Resources>
    <local:DisjunctionConverter x:Key="OrConv"/>
</Window.Resources>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <StackPanel>
        <Rectangle Fill="Red" Name="RedRect" Height="30" Margin="10,10,10,0" />
        <Rectangle Fill="Yellow" Name="YellowRect" Height="30"  Margin="10,10,10,0" />
        <Rectangle Fill="Green" Name="GreenRect" Height="30"  Margin="10,10,10,0" />
    </StackPanel>
    <Image Source="https://i.imgur.com/szJy4AT.jpg" Grid.Column="1" Margin="10">
        <Image.Style>
            <Style TargetType="Image">
                <Setter Property="Opacity" Value="0"/>
                <Style.Triggers>
                    <DataTrigger Value="True">
                        <DataTrigger.Binding>
                            <MultiBinding Converter="{StaticResource OrConv}">
                                <Binding ElementName="RedRect" Path="IsMouseOver"/>
                                <Binding ElementName="YellowRect" Path="IsMouseOver"/>
                                <Binding ElementName="GreenRect" Path="IsMouseOver"/>
                            </MultiBinding>
                        </DataTrigger.Binding>
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard TargetProperty="Opacity" >
                                    <DoubleAnimation To="0.8" Duration="0:0:0.4"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard TargetProperty="Opacity" >
                                    <DoubleAnimation Duration="0:0:0.4"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.ExitActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Image.Style>
    </Image>
</Grid>

Результат:

это не только ценный мех

2
  • Спасибо огромное! :D Осталось разобраться в работе конвертора)
    – Jefoce
    29 окт 2017 в 15:58
  • @Jefoce: ну, функция Any возвращает true когда хотя бы одно из значений массива, пропущенных через лямбду v => (bool)v, равно true. Поскольку на вход поступают bool, упакованные в объектЮ то лямбда просто вытаскивает этот самый bool назад. Итого: true если хотя бы одно значение из массива содержит true.
    – VladD
    29 окт 2017 в 22:40

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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