ورود

View Full Version : مبتدی: هاور تصاویر در wpf



alish123456
سه شنبه 16 شهریور 1395, 11:25 صبح
سلام خدمت همه
میخواستم بدونم چطور میشه یه هاور "Hover" برای image ها تو WPF با سی شارپ ساخت:متفکر:
این نمونه ها با CSS ساخته شده
نمونه یک (http://dl.freebie.ir/post/jquery/image_text_effect/img_hover_1/index.html)
نمونه دو (http://callmenick.com/_development/image-overlay-hover-effects/index-6.html)

تشکر..

alish123456
سه شنبه 16 شهریور 1395, 17:50 عصر
کسی نیس:ناراحت:

Mahmoud.Afrad
سه شنبه 16 شهریور 1395, 21:49 عصر
یک کانتیرنر درونی و یک کانتینر بیرونی ایجاد کنید، کافیه برای کانتینر بیرونی دو تریگر برای MouseEnter و MouseLeave ایجاد کنید. برای هر کدوم از تریگرها یک storyboard ایجاد کنید و در این استوری بردها مقدار Opacity کانتینر درونی(یا کنترلهای) را تغییر بدید.
مثال:
<Window.Resources>
<Storyboard x:Key="OnMouseEnter1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="gridContent">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnMouseLeave1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="gridContent">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseEnter" SourceName="stackPanel">
<BeginStoryboard x:Name="OnMouseEnter1_BeginStoryboard" Storyboard="{StaticResource OnMouseEnter1}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeave" SourceName="stackPanel">
<BeginStoryboard x:Name="OnMouseLeave1_BeginStoryboard" Storyboard="{StaticResource OnMouseLeave1}"/>
</EventTrigger>
</Window.Triggers>




<Grid x:Name="GridMain">

<StackPanel x:Name="stackPanel" Width="250" Height="200" HorizontalAlignment="Left" VerticalAlignment="Top" Background="#FFC2DEFF">
<Grid Name="gridContent" Width="250" Height="200" Opacity="0" Background="#FFF04242">

</Grid>
</StackPanel>

</Grid>