WPF: при наведении мыши на определенный элемент управления увеличьте его размер и перекрытие на других элементах управления

Я хочу увеличить размер элемента управления всякий раз, когда пользователь наводит курсор мыши.
Увеличение размера не должно перестраивать другие элементы управления, а текущий элемент управления должен перекрывать соседние элементы управления, как в случае с поиском google (вкладка "изображения"), показанной ниже:

alt text

изображение с красной границей перекрывает другие изображения.

9
wpf wpf-controls

3 ответов

Вы можете использовать ScaleTransform в RenderTransform на IsMouseOver. Если вы хотите, чтобы масштабирование выполнялось из Центра элемента управления, вы можете использовать RenderTransformOrigin="0.5,0.5". Кроме того, вам, вероятно, нужно будет установить ZIndex в триггере, чтобы убедиться, что он отображается поверх других элементов управления. Пример с TextBlock

обновление
Попробуйте вот так

<ItemsControl Margin="50">
    <ItemsControl.Resources>
        <Style x:Key="ScaleStyle" TargetType="TextBlock">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Grid.ZIndex" Value="1"/>
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <ScaleTransform ScaleX="1.1" ScaleY="1.1"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ItemsControl.Resources>
    <TextBlock Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" Text="Something.." Background="Red" Height="20"/>
    <TextBlock Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" Text="TextBlock2" Background="DarkBlue" Height="20"/>
    <TextBlock Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" Text="TextBlock3" Background="DarkBlue" Height="20" Foreground="White"/>
    <TextBlock Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" Text="TextBlock4" Background="DarkBlue" Height="20" Foreground="White"/>
</ItemsControl>
12

для эффекта затенения, наряду с приданием изображению горизонтального выравнивания:

<ItemsControl Margin="50,200,50,0">
        <ItemsControl.Resources>
            <Style x:Key="ScaleStyle" TargetType="Image">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Grid.ZIndex" Value="1"/>
                        <Setter Property="RenderTransform">
                            <Setter.Value>
                                <ScaleTransform ScaleX="1.1" ScaleY="1.5"  />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ItemsControl.Resources>

        <Image Height="100" Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="100" Source="D:\Cablevision\Cable Vision RFP DOCs\WpfApplication1\WpfApplication1\square-house-design.jpg"  MouseDown="image1_MouseDown">
               <Image.BitmapEffect>
            <DropShadowBitmapEffect Color="Black" Direction="320"  
    ShadowDepth="25" Softness="1" Opacity="0.5"/>
            </Image.BitmapEffect>
        </Image>


        <Image   Height="100"  Margin="110,-100,0,0" Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left"  Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="100" Source="D:\Cablevision\Cable Vision RFP DOCs\WpfApplication1\WpfApplication1\file.jpg"  >
                      <Image.BitmapEffect>
            <DropShadowBitmapEffect Color="Black" Direction="320"  
    ShadowDepth="25" Softness="1" Opacity="0.5"/>
            </Image.BitmapEffect>
        </Image >
        <Image   Height="100"  Margin="220,-100,0,0" Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left"  Name="image3" Stretch="Fill" VerticalAlignment="Top" Width="100" Source="D:\Cablevision\Cable Vision RFP DOCs\WpfApplication1\WpfApplication1\file.jpg" MouseEnter="image1_MouseEnter" MouseLeave="image1_MouseLeave" />



    </ItemsControl>
3

@Meleak... Вы не получите необходимый эффект, если у вас есть несколько текстовых блоков, сложенных вместе....

, например, проверить это :

<ItemsControl>
    <TextBlock Text="Something.." Background="Red" Height="20">
        <TextBlock.Style>
            <Style TargetType="TextBlock">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="RenderTransform">
                            <Setter.Value>
                                <ScaleTransform ScaleX="2" ScaleY="2"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
    </TextBlock>
    <TextBlock Text="TextBlock2" Background="DarkBlue" Height="20" Foreground="White"></TextBlock>
    <TextBlock Text="TextBlock3" Background="DarkBlue" Height="20" Foreground="White"></TextBlock>
    <TextBlock Text="TextBlock4" Background="DarkBlue" Height="20" Foreground="White"></TextBlock>
</ItemsControl>
2