Ampliar uma miniatura da imagem em foco
-
05-07-2019 - |
Pergunta
Poderia alguém me oferecer alguns conselhos sobre como eu poderia ir sobre a implementação de um controle em Silverlight que miniaturas de imagens exibe que quando pairado sobre, aumentá-la para um tamanho maior?
Solução
Eu fiz algo semelhante para um botão. Aqui está o código para isso - Eu estou certo que você pode adaptá-lo facilmente ao trabalho com uma imagem em seu lugar. Note que eu nunca realmente lançado este código; era apenas uma experiência quando eu estava aprendendo Silverlight. Não tome isso como um exemplo de boas práticas.
XAML:
<UserControl x:Class="GrowingButton.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<Storyboard x:Name="growStoryboard">
<DoubleAnimation
Storyboard.TargetProperty="Width"
Storyboard.TargetName="testButton"
Duration="0:0:0.1"
By="20">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetProperty="Height"
Storyboard.TargetName="testButton"
Duration="0:0:1"
By="-20">
</DoubleAnimation>
</Storyboard>
<Storyboard x:Name="shrinkStoryboard">
<DoubleAnimation
Storyboard.TargetProperty="Width"
Storyboard.TargetName="testButton"
Duration="0:0:1"
By="-20">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetProperty="Height"
Storyboard.TargetName="testButton"
Duration="0:0:0.1"
By="20">
</DoubleAnimation>
</Storyboard>
</Grid.Resources>
<Button x:Name="testButton" Content="Test" Grid.Column="1" MouseEnter="Button_MouseEnter" MouseLeave="Button_MouseLeave" VerticalAlignment="Center" HorizontalAlignment="Center" Width="50" Height="50">
</Button>
</Grid>
</UserControl>
Código:
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
private void Button_MouseEnter(object sender, MouseEventArgs e)
{
this.shrinkStoryboard.SkipToFill();
this.growStoryboard.Begin();
}
private void Button_MouseLeave(object sender, MouseEventArgs e)
{
this.growStoryboard.SkipToFill();
this.shrinkStoryboard.Begin();
}
}
Outras dicas
Enquanto o seu controle tem um VisualState para o estado do mouse, você pode usar um DoubleAnimation
(ou DoubleAnimationUsingKeyframes
) para fazer uma ScaleTransform no controle.
Criar as diferentes VisualStates (dentro de um VisualStateGroup) para sua miniatura / imagem controle irá poupar-lhe o problema de ter que ligar seus eventos no trás código. Você também será capaz de definir a diferente escala visualmente no Blend, que é um bom recurso para ter.
Esta página - menu Fish Eye tem um exemplo que faz algo semelhante ao que você quer. Por alguma razão ele não está exibindo a versão Silverlight apesar me ter o Silverlight instalado. Pode ser algo a ver com isso estar no Silverlight 2.