Mega Code Archive

 

Categories / Silverlight / UI Controls

 

Customizing the Default ListBoxItem UI

<UserControl x:Class='SilverlightApplication3.MainPage'     xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'      xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'     xmlns:d='http://schemas.microsoft.com/expression/blend/2008'      xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006'      mc:Ignorable='d'      d:DesignWidth='640'      d:DesignHeight='480'     xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">     <UserControl.Resources>         <DataTemplate x:Key="dtProductInfo">             <StackPanel>                 <TextBlock Text="{Binding Name}"/>                 <TextBlock Text="$" Margin="0,0,2,0" />                 <TextBlock Grid.Row="1" Text="{Binding ListPrice}"/>                 <Ellipse Height="15" Width="15" Fill="{Binding InventoryLevelBrush}" Margin="0,0,2,0" />                 <TextBlock Text="{Binding InventoryLevelMessage}"  />             </StackPanel>         </DataTemplate>         <ControlTemplate x:Key="ctCustomListBoxItem" TargetType="ListBoxItem">             <Grid Background="{TemplateBinding Background}"              Margin="{TemplateBinding Margin}">                 <Grid.RowDefinitions>                     <RowDefinition Height="0.225*" MinHeight="20"/>                     <RowDefinition Height="0.775*"/>                 </Grid.RowDefinitions>                 <vsm:VisualStateManager.VisualStateGroups>                     <vsm:VisualStateGroup x:Name="CommonStates">                         <vsm:VisualStateGroup.Transitions>                             <vsm:VisualTransition                  GeneratedDuration="00:00:00.0500000" To="MouseOver"/>                             <vsm:VisualTransition                  GeneratedDuration="00:00:00.0500000" From="MouseOver"/>                         </vsm:VisualStateGroup.Transitions>                         <vsm:VisualState x:Name="Normal">                             <Storyboard/>                         </vsm:VisualState>                         <vsm:VisualState x:Name="MouseOver">                             <Storyboard>                                 <ColorAnimationUsingKeyFrames                    BeginTime="00:00:00"                    Duration="00:00:00.0010000"                    Storyboard.TargetName="BottomBorder"                    Storyboard.TargetProperty=                   "(Border.Background).(SolidColorBrush.Color)">                                     <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF68A3DE"/>                                 </ColorAnimationUsingKeyFrames>                             </Storyboard>                         </vsm:VisualState>                     </vsm:VisualStateGroup>                     <vsm:VisualStateGroup x:Name="SelectionStates">                         <vsm:VisualState x:Name="Unselected">                             <Storyboard/>                         </vsm:VisualState>                         <vsm:VisualState x:Name="Selected">                             <Storyboard>                                 <ColorAnimationUsingKeyFrames                  BeginTime="00:00:00"                  Duration="00:00:00.0010000"                  Storyboard.TargetName="TopBorder"                  Storyboard.TargetProperty=                   "(Border.Background).(SolidColorBrush.Color)">                                     <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFF2D00"/>                                 </ColorAnimationUsingKeyFrames>                                 <ObjectAnimationUsingKeyFrames                  BeginTime="00:00:00"                  Duration="00:00:00.0010000"                  Storyboard.TargetName="SelectionIndicator"                  Storyboard.TargetProperty="(UIElement.Visibility)">                                     <DiscreteObjectKeyFrame KeyTime="00:00:00">                                         <DiscreteObjectKeyFrame.Value>                                             <vsm:Visibility>Visible</vsm:Visibility>                                         </DiscreteObjectKeyFrame.Value>                                     </DiscreteObjectKeyFrame>                                 </ObjectAnimationUsingKeyFrames>                             </Storyboard>                         </vsm:VisualState>                         <vsm:VisualState x:Name="SelectedUnfocused">                             <Storyboard>                                 <ColorAnimationUsingKeyFrames                  BeginTime="00:00:00"                  Duration="00:00:00.0010000"                  Storyboard.TargetName="TopBorder"                  Storyboard.TargetProperty=                   "(Border.Background).(SolidColorBrush.Color)">                                     <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFF2D00"/>                                 </ColorAnimationUsingKeyFrames>                                 <ObjectAnimationUsingKeyFrames                  BeginTime="00:00:00"                  Duration="00:00:00.0010000"                  Storyboard.TargetName="SelectionIndicator"                  Storyboard.TargetProperty="(UIElement.Visibility)">                                     <DiscreteObjectKeyFrame KeyTime="00:00:00">                                         <DiscreteObjectKeyFrame.Value>                                             <vsm:Visibility>Visible</vsm:Visibility>                                         </DiscreteObjectKeyFrame.Value>                                     </DiscreteObjectKeyFrame>                                 </ObjectAnimationUsingKeyFrames>                             </Storyboard>                         </vsm:VisualState>                     </vsm:VisualStateGroup>                     <vsm:VisualStateGroup x:Name="FocusStates">                         <vsm:VisualState x:Name="Unfocused">                             <Storyboard/>                         </vsm:VisualState>                         <vsm:VisualState x:Name="Focused">                             <Storyboard>                                 <ObjectAnimationUsingKeyFrames                  BeginTime="00:00:00"                  Duration="00:00:00.0010000"                  Storyboard.TargetName="FocusRect"                  Storyboard.TargetProperty="(UIElement.Visibility)">                                     <DiscreteObjectKeyFrame KeyTime="00:00:00">                                         <DiscreteObjectKeyFrame.Value>                                             <vsm:Visibility>Visible</vsm:Visibility>                                         </DiscreteObjectKeyFrame.Value>                                     </DiscreteObjectKeyFrame>                                 </ObjectAnimationUsingKeyFrames>                             </Storyboard>                         </vsm:VisualState>                     </vsm:VisualStateGroup>                 </vsm:VisualStateManager.VisualStateGroups>                 <Border x:Name="TopBorder">                     <Grid x:Name="SelectionIndicator">                     </Grid>                 </Border>                 <Border>                     <Grid>                         <ContentPresenter  HorizontalAlignment="Left"                             Margin="3,3,3,3"                Content="{TemplateBinding Content}"                ContentTemplate="{TemplateBinding ContentTemplate}"/>                         <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" Width="Auto"                        x:Name="FocusRect" Visibility="Collapsed"/>                     </Grid>                 </Border>             </Grid>         </ControlTemplate>         <Style x:Key="styleCustomListBoxItem" TargetType="ListBoxItem">             <Setter Property="Template"              Value="{StaticResource ctCustomListBoxItem}"/>             <Setter Property="Margin" Value="3,5,3,5" />         </Style>     </UserControl.Resources>     <Grid x:Name="LayoutRoot" Background="White" Height="Auto" Margin="20,20">         <StackPanel Orientation="Horizontal" VerticalAlignment="Stretch"                  HorizontalAlignment="Stretch">             <ListBox x:Name="lbxStandard" HorizontalAlignment="Stretch"                 VerticalAlignment="Stretch" Margin="0,0,25,0"                 ItemTemplate="{StaticResource dtProductInfo}" />             <ListBox x:Name="lbxCustom"                 HorizontalAlignment="Stretch"                 VerticalAlignment="Stretch"                 ItemTemplate="{StaticResource dtProductInfo}"                 ItemContainerStyle="{StaticResource styleCustomListBoxItem}"/>         </StackPanel>     </Grid> </UserControl>