1
votes

I've made a custom ListboxItem (UserControl) and use it in a ListBox. My Problem is, if i select one Item it won't be highlighted. Do anyone have an idea how to fix it?

Do I have to change my Custom ListboxItem or the Listbox in the mainpage ?

Thank you in advance.

Edit:

<UserControl x:Class="Phone.CustomListBoxItem"
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"

Foreground="{StaticResource PhoneForegroundBrush}"
    <Grid x:Name="LayoutRoot" >
    <TextBlock Name="Name" Text="" />
    <TextBlock Name="Date" Text="" />
    <TextBlock Name="User" Text="" />

</Grid>

Thats the custom ListboxItem, the Page is simply one Listbox and a few Items generated in testpage.xaml.cs.

I' ve applied the style but I won'T work:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ListBox Height="467" HorizontalAlignment="Left" Margin="17,16,0,0" Name="listBox1" VerticalAlignment="Top" Width="421" Style="ListBoxItemStyle">
                <ListBox.Resources>
                    <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
                        <Setter Property="Background" Value="Transparent"/>
                        <Setter Property="BorderThickness" Value="0"/>
                        <Setter Property="BorderBrush" Value="Transparent"/>
                        <Setter Property="Padding" Value="0"/>
                        <Setter Property="HorizontalContentAlignment" Value="Left"/>
                        <Setter Property="VerticalContentAlignment" Value="Top"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ListBoxItem">
                                    <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroup x:Name="SelectionStates">
                                                <VisualStateGroup.Transitions>
                                                    <VisualTransition From="Selected" GeneratedDuration="0" To="Unselected">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualTransition>
                                                    <VisualTransition From="Unselected" GeneratedDuration="0" To="Selected">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualTransition>
                                                    <VisualTransition From="Selected" GeneratedDuration="0" To="SelectedUnfocused">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualTransition>
                                                    <VisualTransition From="Unselected" GeneratedDuration="0" To="SelectedUnfocused">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualTransition>
                                                    <VisualTransition From="SelectedUnfocused" GeneratedDuration="0" To="Unselected">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualTransition>
                                                    <VisualTransition From="SelectedUnfocused" GeneratedDuration="0" To="Selected">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualTransition>
                                                </VisualStateGroup.Transitions>
                                            </VisualStateGroup>
                                        </VisualStateManager.VisualStateGroups>
                                        <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Background="{StaticResource PhoneAccentBrush}" 
                                                    />
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListBox.Resources>
            </ListBox>
        </Grid>
    </Grid>

Some advise would be really nice. I work on this simply action a few hours now.

1

1 Answers

0
votes

You've to change the style of the ListBoxItem and make use of the VisualState Transitions to control the appearance of the item whenever an event is fired, this is a simple snippet

           <ListBox.Resources>
                <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
                    <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="BorderThickness" Value="0"/>
                    <Setter Property="BorderBrush" Value="Transparent"/>
                    <Setter Property="Padding" Value="0"/>
                    <Setter Property="HorizontalContentAlignment" Value="Left"/>
                    <Setter Property="VerticalContentAlignment" Value="Top"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListBoxItem">
                                <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="SelectionStates">
                                            <VisualStateGroup.Transitions>
                                                <VisualTransition From="Selected" GeneratedDuration="0" To="Unselected">
                                                    <Storyboard>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualTransition>
                                                <VisualTransition From="Unselected" GeneratedDuration="0" To="Selected">
                                                    <Storyboard>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualTransition>
                                                <VisualTransition From="Selected" GeneratedDuration="0" To="SelectedUnfocused">
                                                    <Storyboard>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualTransition>
                                                <VisualTransition From="Unselected" GeneratedDuration="0" To="SelectedUnfocused">
                                                    <Storyboard>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualTransition>
                                                <VisualTransition From="SelectedUnfocused" GeneratedDuration="0" To="Unselected">
                                                    <Storyboard>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualTransition>
                                                <VisualTransition From="SelectedUnfocused" GeneratedDuration="0" To="Selected">
                                                    <Storyboard>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualTransition>
                                            </VisualStateGroup.Transitions>
                                                                                        </VisualStateGroup>
                                                                                </VisualStateManager.VisualStateGroups>
                                    <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Background="{StaticResource PhoneAccentBrush}" 
                                                    />
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.Resources>