تكبير الصورة المصغرة للصورة عند التمرير

Question

هل يمكن لأي شخص أن يقدم لي بعض النصائح حول كيفية تنفيذ عنصر تحكم في Silverlight يعرض صورًا مصغرة للصور والتي عند تمرير مؤشر الماوس فوقها، يتم تكبيرها إلى حجم أكبر؟

Answer 1

وفعلت شيئا من هذا القبيل لزر واحدة. هنا هو رمز لهذا - أنا متأكد من أنك يمكن أن تتكيف بسهولة للعمل مع صورة بدلا من ذلك. علما بأنني أبدا يطلق في الواقع هذا الرمز. كان مجرد تجربة عندما كنت تعلم سيلفرلايت. لا أعتبر كمثال على أفضل الممارسات.

و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>

والرمز:

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();
    }
}

Answer 2

وطالما التحكم الخاصة بك لديها VisualState للدولة فأر، يمكنك استخدام DoubleAnimation (أو DoubleAnimationUsingKeyframes) للقيام <لأ href = "http://msdn.microsoft.com/en-us/library/system .windows.media.scaletransform (VS.95) .aspx اتصال "يختلط =" نوفولو noreferrer "> ScaleTransform على عنصر التحكم.

وإنشاء VisualStates مختلفة (داخل VisualStateGroup) لجهاز التحكم / صورة مصغرة سيوفر عليك عناء الاضطرار إلى سلك الأحداث في التعليمات البرمجية خلف. عليك أيضا أن تكون قادرة على تحديد التحجيم مختلف بصريا في مزيج التي هي ميزة لطيفة لديهم.

Answer 3

هذه الصفحة - قائمة عين السمكة لديه مثال يفعل شيئا مشابها لما تريد.لسبب ما، لا يتم عرض إصدار Silverlight على الرغم من تثبيت Silverlight.قد يكون الأمر متعلقًا بوجوده في Silverlight 2.