2

С анимацией только начал разбираться. Поэтому на мой взгляд достаточно тривиальная задача поставила в ступор.

Разрабатывал пользовательский интерфейс

Меню

Верхние части помещены в ItemsControls. Задача состоит в том, чтобы при наведении на элемент он выходил на передний план и немного увеличивался в размерах.

введите сюда описание изображения

Пробовал сделать через анимацию, но не нашел свойства ZIndex, а при изменении размеров все разъезжается в разные стороны.

                <ItemsControl HorizontalAlignment="Right" VerticalAlignment="Top" Style="{StaticResource EventListStyle}">
            <ItemsControl.Resources>
                <Style TargetType="ContentPresenter">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Panel.ZIndex" Value="1"/>
                        </Trigger>

                    </Style.Triggers>
                </Style>
            </ItemsControl.Resources>
        </ItemsControl>

<DataTemplate x:Key="EventHeaderView">
    <Border CornerRadius="5,0,0,5" BorderThickness="1" BorderBrush="Black"  Background="White"
            Margin="5,0,0,0" RenderTransformOrigin="0.5 0.5">
        <Border.RenderTransform>
            <ScaleTransform/>
        </Border.RenderTransform>
        <Border.Style>
            <Style TargetType="Border">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)" To="1.5" Duration="0:0:0.2"/>
                                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)" To="1.5" Duration="0:0:0.2"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)" To="1.0" Duration="0:0:0.2"/>
                                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)" To="1.0" Duration="0:0:0.2"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Border.Style>
        <Canvas Width="68" Height="68">
            <Button ToolTip="{Binding ToolTip}" Width="68" Height="68"
                Command="{Binding DataContext.SelectedIndexCommand, ElementName=RootMain}"
                CommandParameter="{Binding SystemName}">
                <Button.Template>
                    <ControlTemplate>
                        <Image Source="{Binding Avatar}"/>
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </Canvas>
    </Border>
</DataTemplate>

<Style x:Key="EventListStyle" TargetType="ItemsControl">
    <Setter Property="ItemTemplate" Value="{StaticResource EventHeaderView}"/>
    <Setter Property="ItemsSource" Value="{Binding Events}"/>
</Style>

1 ответ 1

4

ZIndex существует в виде attached property Panel.ZIndex, которое влияет на порядок отображения элементов на панели. Нюанс в том, что панелью является панель из ItemsControl.ItemsPanel, а непосредственно в ней размещаются ContentPresenter, внутри которых уже содержимое ItemsControl.ItemTemplate. Соответственно, необходимо повлиять на Panel.ZIndex того ContentPresenter, который содержит элемент под курсором. Один из таких способов — перекрыть стиль для всех ContentPresenter вашего ItemsControl, положив стиль в ItemsControl.Resources.

Чтобы контролы при увеличении выползали за границы контейнера, а не раздвигали элементы вокруг них, при этом их рендеринг не ограничивался прежней областью, можно положить увеличиваемые элементы в Canvas и увеличивать их анимированием RenderTransform с ScaleTransform внутри.

Полный пример:

<Window x:Class="WpfApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:system="clr-namespace:System;assembly=mscorlib"
        SizeToContent="WidthAndHeight">
    <ItemsControl Margin="10" Width="60">
        <ItemsControl.Items>
            <system:String>Foo</system:String>
            <system:String>Bar</system:String>
            <system:String>Baz</system:String>
        </ItemsControl.Items>
        <ItemsControl.Resources>
            <Style TargetType="ContentPresenter">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <Int32Animation Storyboard.TargetProperty="(Panel.ZIndex)" To="100" Duration="0:0:0.2"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <Int32Animation Storyboard.TargetProperty="(Panel.ZIndex)" To="0" Duration="0:0:0.2"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ItemsControl.Resources>
        <ItemsControl.ItemTemplate>
            <DataTemplate DataType="{x:Type system:String}">
                <Canvas x:Name="panel" Width="40" Height="40">
                    <Button x:Name="button" Content="{Binding}" Width="40" Height="40" RenderTransformOrigin="0.5 0.5">
                        <Button.RenderTransform>
                            <ScaleTransform/>
                        </Button.RenderTransform>
                        <Button.Style>
                            <Style TargetType="Button">
                                <Style.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Trigger.EnterActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)" To="1.5" Duration="0:0:0.2"/>
                                                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)" To="1.5" Duration="0:0:0.2"/>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </Trigger.EnterActions>
                                        <Trigger.ExitActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)" To="1.0" Duration="0:0:0.2"/>
                                                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)" To="1.0" Duration="0:0:0.2"/>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </Trigger.ExitActions>
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </Button.Style>
                    </Button>
                </Canvas>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Window>

Здесь значение ZIndex тоже анимируется, причём до большого значения, чтобы при нескольких увеличенных кнопках сверху была самая большая, при этом увеличиваемая кнопка сразу становаилась выше других (достаточно достигнуть значения 1, чтобы стать выше остальных, у которых 0).

6
  • Спасибо за ответ, идею я уловил. Попробовал вставить Ваш код, чтобы посмотреть, что получиться кнопки действительно увеличиваются, только не из-за границ ItemsControl'a обрезаются... Может я что-то делаю не так?
    – Vyacheslav
    5 ноя 2015 в 8:56
  • @Vyacheslav Канву не пропустили?
    – Kyubey
    5 ноя 2015 в 9:02
  • Нет, код прикрепил к вопросу. Попробовал Canvas и в Border, и наоборjт Border в Canvas.
    – Vyacheslav
    5 ноя 2015 в 9:05
  • @Vyacheslav Канва должна быть в корне. Могу посоветовать только метод выкидывания всего лишнего, пока не заработает. Так как мой пример работает, а ваш нет, то можно постепенно преобразовывать один в другой, пока не обнаружится источник проблемы. Ну вот у вас какой-то стиль у ItemsControl есть — для начала посмотрите, что в нём...
    – Kyubey
    5 ноя 2015 в 9:10
  • Хорошо, спасибо большое за ответ:)
    – Vyacheslav
    5 ноя 2015 в 9:11

Ваш ответ

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

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