<Window x:Class="Test.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Controls="clr-namespace:Ricciolo.Controls;assembly=Ricciolo.Controls.AdvancedListBox"
	WindowStyle="SingleBorderWindow"
    Title="Test" Height="600" Width="800"
    >
	<Window.Background>
		<ImageBrush ImageSource="Background.png" Stretch="None" />
	</Window.Background>

	<Window.Resources>

		<Style TargetType="{x:Type Controls:AdvancedListBox}">

			<Setter Property="Foreground"
					Value="LightGray"/>
			<Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
					Value="Auto"/>
			<Setter Property="ScrollViewer.VerticalScrollBarVisibility"
					Value="Auto"/>
			<Setter Property="ScrollViewer.CanContentScroll"
					Value="true"/>
			<Setter Property="VerticalContentAlignment"
					Value="Center"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type Controls:AdvancedListBox}">
						<Border Name="Bd"
								Background="{TemplateBinding Background}"
								BorderBrush="{TemplateBinding BorderBrush}"
								BorderThickness="{TemplateBinding BorderThickness}"
								SnapsToDevicePixels="true"
								Padding="1">
							<ScrollViewer Padding="{TemplateBinding Padding}"
										  Focusable="false">
								<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
							</ScrollViewer>
						</Border>
						<ControlTemplate.Triggers>
							<Trigger Property="IsEnabled"
									 Value="false">
								<Setter TargetName="Bd"
										Property="Background"
										Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
							</Trigger>
							<Trigger Property="IsGrouping"
									 Value="true">
								<Setter Property="ScrollViewer.CanContentScroll"
										Value="false"/>
							</Trigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>

		<Style TargetType="{x:Type Controls:AdvancedListBoxItem}">

			<Style.Resources>
				<Color x:Key="highlightBackgroundColor">#9F549BFF</Color>
				<Color x:Key="highlightColor">White</Color>
				<SolidColorBrush x:Key="highlightBrush" Color="{StaticResource highlightColor}" />
			</Style.Resources>

			<!-- custom -->
			<Setter Property="FontSize" Value="25" />
			<Setter Property="FontFamily" Value="Verdana" />

			<Setter Property="Background"
					Value="Transparent"/>
			<Setter Property="HorizontalContentAlignment"
					Value="{Binding Path=HorizontalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
			<Setter Property="VerticalContentAlignment"
					Value="{Binding Path=VerticalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
			<Setter Property="Padding"
					Value="15,0,0,0"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type Controls:AdvancedListBoxItem}">
						<Border Name="Bd"
								Background="{TemplateBinding Background}"
								BorderBrush="{TemplateBinding BorderBrush}"
								BorderThickness="{TemplateBinding BorderThickness}"
								Padding="{TemplateBinding Padding}"
								SnapsToDevicePixels="true">
							<ContentPresenter x:Name="content" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
											  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
											  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
						</Border>
						<ControlTemplate.Triggers>
							<MultiTrigger>
								<MultiTrigger.Conditions>
									<Condition Property="IsGettingSelection"
											   Value="true"/>
									<Condition Property="SelectionDirection"
											   Value="Up"/>
								</MultiTrigger.Conditions>

								<Setter Property="Background">
									<Setter.Value>
										<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
											<GradientStop Color="Transparent" Offset="0.0" />
											<GradientStop Color="{StaticResource highlightBackgroundColor}" Offset="0" />
											<GradientStop Color="{StaticResource highlightBackgroundColor}" Offset="1" />
										</LinearGradientBrush >
									</Setter.Value>

								</Setter>

								<TriggerBase.EnterActions>
									<BeginStoryboard>
										<Storyboard Storyboard.TargetName="Bd" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Offset)">
											<DoubleAnimation From="1" To="0" Duration="0:0:0.2" />
										</Storyboard>
									</BeginStoryboard>
								</TriggerBase.EnterActions>
							</MultiTrigger>

							<MultiTrigger>
								<MultiTrigger.Conditions>
									<Condition Property="IsLosingSelection"
											   Value="true"/>
									<Condition Property="SelectionDirection"
											   Value="Up"/>
								</MultiTrigger.Conditions>

								<Setter Property="Background">
									<Setter.Value>
										<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
											<GradientStop Color="{StaticResource highlightBackgroundColor}" Offset="0" />
											<GradientStop Color="Transparent" Offset="1" />
											<GradientStop Color="Transparent" Offset="1" />
										</LinearGradientBrush >
									</Setter.Value>

								</Setter>

								<TriggerBase.EnterActions>
									<BeginStoryboard>
										<Storyboard Storyboard.TargetName="Bd" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Offset)">
											<DoubleAnimation From="1" To="0" Duration="0:0:0.2" />
										</Storyboard>
									</BeginStoryboard>
								</TriggerBase.EnterActions>
							</MultiTrigger>

							<MultiTrigger>
								<MultiTrigger.Conditions>
									<Condition Property="IsGettingSelection"
											   Value="true"/>
									<Condition Property="SelectionDirection"
											   Value="Down"/>
								</MultiTrigger.Conditions>

								<Setter Property="Background">
									<Setter.Value>
										<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
											<GradientStop Color="{StaticResource highlightBackgroundColor}" Offset="0" />
											<GradientStop Color="{StaticResource highlightBackgroundColor}" Offset="1" />
											<GradientStop Color="Transparent" Offset="1" />
										</LinearGradientBrush >
									</Setter.Value>

								</Setter>

								<TriggerBase.EnterActions>
									<BeginStoryboard>
										<Storyboard Storyboard.TargetName="Bd" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Offset)">
											<DoubleAnimation From="0" To="1" Duration="0:0:0.2" />
										</Storyboard>
									</BeginStoryboard>
								</TriggerBase.EnterActions>
							</MultiTrigger>

							<MultiTrigger>
								<MultiTrigger.Conditions>
									<Condition Property="IsLosingSelection"
											   Value="true"/>
									<Condition Property="SelectionDirection"
											   Value="Down"/>
								</MultiTrigger.Conditions>

								<Setter Property="Background">
									<Setter.Value>
										<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
											<GradientStop Color="Transparent" Offset="0.0" />
											<GradientStop Color="Transparent" Offset="0" />
											<GradientStop Color="{StaticResource highlightBackgroundColor}" Offset="1" />
										</LinearGradientBrush >
									</Setter.Value>

								</Setter>

								<TriggerBase.EnterActions>
									<BeginStoryboard>
										<Storyboard Storyboard.TargetName="Bd" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Offset)">
											<DoubleAnimation From="0" To="1" Duration="0:0:0.2" />
										</Storyboard>
									</BeginStoryboard>
								</TriggerBase.EnterActions>
							</MultiTrigger>

							<Trigger Property="IsSelected" Value="true">
								<Setter Property="Foreground"
										Value="{StaticResource highlightBrush}"/>
								<Setter Property="BitmapEffect" TargetName="content">
									<Setter.Value>
										<OuterGlowBitmapEffect GlowSize="4" Opacity="0.7" GlowColor="{StaticResource highlightColor}" />
									</Setter.Value>
								</Setter>
							</Trigger>

							<MultiTrigger>
								<MultiTrigger.Conditions>
									<Condition Property="IsSelected"
											   Value="true"/>
									<Condition Property="SelectionDirection"
											   Value="None"/>
								</MultiTrigger.Conditions>
								<Setter TargetName="Bd"
										Property="Background">
									<Setter.Value>
										<SolidColorBrush Color="{StaticResource highlightBackgroundColor}" />
									</Setter.Value>
								</Setter>
							</MultiTrigger>

						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>

	</Window.Resources>

		<Border BorderThickness="1" BorderBrush="#80FFFFFF" Margin="0,0,30,30" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="250"
			Background="#7D000000">
			<Controls:AdvancedListBox Margin="0,15">

				<Controls:AdvancedListBoxItem>music</Controls:AdvancedListBoxItem>
				<Controls:AdvancedListBoxItem>videos</Controls:AdvancedListBoxItem>
				<Controls:AdvancedListBoxItem>pictures</Controls:AdvancedListBoxItem>
				<Controls:AdvancedListBoxItem>social</Controls:AdvancedListBoxItem>
				<Controls:AdvancedListBoxItem>radio</Controls:AdvancedListBoxItem>
				<Controls:AdvancedListBoxItem>podcasts</Controls:AdvancedListBoxItem>

			</Controls:AdvancedListBox>
		</Border>

</Window>
