IdentityMine

| Tags: Jobi Joy, Silverlight

originally posted by Jobi Joy: (link) - please comment at original post

This sample is to show how easily we can create an Image-accordion entirely in Expression Blend. This is utilizing the ListBox’s Selected and UnSelected VisualStates. Place a ListBox and override its ItemContainerStyle then adjust the width on the Selected and UnSelected visual states. When we override the ItemsPanel we can make it orientation to Horizontal on the StackPanel. Pretty easy and there is no C# needed. Paste the below XAML in your user control

<UserControl.Resources>
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid x:Name="grid" Background="{TemplateBinding Background}" Width="55">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected">
<Storyboard>
<DoubleAnimation Duration="0:0:0.3" To="55" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid" >
<DoubleAnimation.EasingFunction>
<ElasticEase EasingMode="EaseIn" Springiness="6" Oscillations="0"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<DoubleAnimation Duration="0:0:0.3" To="500" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid" >
<DoubleAnimation.EasingFunction>
<ElasticEase EasingMode="EaseIn" Springiness="6" Oscillations="0" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"/>
<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="#FFAFAFAF" Margin="10">
<ListBox SelectedIndex="0" ItemsPanel="{StaticResource ItemsPanelTemplate1}" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" BorderBrush="{x:Null}" Background="{x:Null}" VerticalAlignment="Center" HorizontalAlignment="Center" Height="285" Margin="10">
<Image Source="B.JPG" Stretch="UniformToFill" Margin="0,0,1,0"/>
<Image Source="A.JPG" Stretch="UniformToFill" Margin="0,0,1,0"/>
<Image Source="C.JPG" Stretch="UniformToFill" Margin="0,0,1,0"/>
<Image Source="D.JPG" Stretch="UniformToFill" Margin="0,0,1,0"/>
<Image Source="E.JPG" Stretch="UniformToFill" Margin="0,0,1,0"/>
</ListBox>
</Grid>

Remember to please comment at original post: (link)

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestShare on RedditShare on TumblrEmail this to someoneDigg thisFlattr the authorShare on StumbleUpon

Comments are closed.