<Page
    x:Class="CustomListBoxItemStyle.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CustomListBoxItemStyle"
    xmlns:ch11="using:Petzold.ProgrammingWindows6.Chapter11"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <ch11:NamedColor x:Key="namedColor" />
    </Page.Resources>

    <Grid>
        <ListBox Name="lstbox"
                 ItemsSource="{Binding Source={StaticResource namedColor},
                                       Path=All}"
                 Width="380">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush="{Binding RelativeSource={RelativeSource TemplatedParent},
                                                  Path=Foreground}"
                            BorderThickness="1"
                            Width="336"
                            Margin="6">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <Rectangle Grid.Column="0"
                                       Height="72"
                                       Width="72"
                                       Margin="6">
                                <Rectangle.Fill>
                                    <SolidColorBrush Color="{Binding Color}" />
                                </Rectangle.Fill>
                            </Rectangle>

                            <TextBlock Grid.Column="1"
                                       FontSize="24"
                                       Text="{Binding Name}"
                                       VerticalAlignment="Center" />
                        </Grid>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
            
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="Background" Value="Transparent" />
                    <Setter Property="TabNavigation" Value="Local" />
                    <Setter Property="Padding" Value="8,10" />
                    <Setter Property="HorizontalContentAlignment" Value="Left" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListBoxItem">
                                <Border Background="{TemplateBinding Background}"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}">

                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="SelectionStates">
                                            <VisualState x:Name="Unselected">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                                   Storyboard.TargetProperty="FontStyle">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 
                                                                                Value="Normal" />
                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                                   Storyboard.TargetProperty="FontWeight">
                                                        <DiscreteObjectKeyFrame KeyTime="0" 
                                                                                Value="Normal" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            
                                            <VisualState x:Name="Selected" />
                                            <VisualState x:Name="SelectedUnfocused" />
                                            <VisualState x:Name="SelectedDisabled" />
                                            <VisualState x:Name="SelectedPointerOver" />
                                            <VisualState x:Name="SelectedPressed" />
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    
                                    <Grid Background="Transparent">
                                        <ContentPresenter x:Name="ContentPresenter"
                                                          FontStyle="Italic"
                                                          FontWeight="Bold"
                                                          Content="{TemplateBinding Content}"
                                                          ContentTransitions="{TemplateBinding ContentTransitions}"
                                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                          Margin="{TemplateBinding Padding}" />
                                    </Grid>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>
        </ListBox>

        <Grid.Background>
            <SolidColorBrush Color="{Binding ElementName=lstbox,
                                             Path=SelectedItem.Color}" />
        </Grid.Background>
    </Grid>
</Page>
