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

Ваш ответ

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

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