CODEWITHSUNDEEP
silverlightwindows-phone-7xamllistboxwindows-phone
Arun
Arun

Reputation: 3456

How to highlight selected item in list box windows phone?

I am developing a windows phone application. I placed list box control in my app and displayed a list. I need to highlight the selected row with a blue color. How can I do that ?. I tried a code. But its not working. I add the code I used below. Please help. 

<ListBox Margin="0,0,0,0" Name="MyList" ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemContainerStyle="{StaticResource ListBoxItemStyle1}">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Background="Transparent" Margin="10,0,0,0">

                                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Height="55" Margin="20,10,0,0">
                                                <StackPanel>
                                                    <TextBlock Text="{Binding Option}" FontWeight="Bold" HorizontalAlignment="Left" Foreground="Black" FontSize="23" Margin="0,0,0,0" Width="250" ></TextBlock>
                                                </StackPanel>
                                                <StackPanel Margin="100,0,0,0">
                                                    <Image Margin="0,10,0,0" Source="/Images/arrow.png"></Image>
                                                </StackPanel>
                                            </StackPanel>

                                        <Rectangle Fill="Gray" Height="1" HorizontalAlignment="Stretch" Width="440" />
                                    </StackPanel>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>

Style:

<Style x:Key="ListBoxItemStyle1" 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="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>

                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" />
                                        <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="Blue" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedUnfocused">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="Blue" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="#FF1BA1E2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Background="Black" BorderBrush="Black"/>
                    </Border>
                </ControlTemplate>

            </Setter.Value>
        </Setter>
    </Style>

My list is like the below image

enter image description here

When I click on the option 2 . I want to change the list box like below image and when remove the click I navigate to another page.

enter image description here

Upvotes: 2

Views: 1773

Answers (3)

Shubham Sahu
Shubham Sahu

Reputation: 2015

use this code to create your style for list box and here i make background transparent , modify code according your requirements.. paste this top of mainpage.xaml but after where all references is complete

 <Style x:Key="CustomListBoxItemStyle" TargetType="ListBoxItem">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <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="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Disabled">                                        
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="ContentContainer"
                                Storyboard.TargetProperty="Foreground"
                                Duration="0">
                                            <DiscreteObjectKeyFrame  KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="border"
                                Storyboard.TargetProperty="Background"
                                Duration="0">
                                            <DiscreteObjectKeyFrame  KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="Transparent"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <StackPanel x:Name="border" Orientation="Horizontal">                                
                            <ContentControl x:Name="ContentContainer" 
                                            ContentTemplate="{TemplateBinding ContentTemplate}"
                                            Content="{TemplateBinding Content}" 
                                            Foreground="{TemplateBinding Foreground}" 
                                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                            Margin="{TemplateBinding Padding}" 
                                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </StackPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

and point this in your listbox

            <ListBox  ItemContainerStyle="{StaticResource CustomListBoxItemStyle}">

Upvotes: 0

Milan Aggarwal
Milan Aggarwal

Reputation: 5104

Method 1

Move the DataTemplate to a user control. Create a Boolean dependency property IsSelected in it. And put your stackpanel inside a border control whose background you have to toggle on based of its boolean value. I hope that it helps.

Method 2

Create a boolean property inside your data object. Bind it to a border element placed inside your datatemplate.

  <Grid>
   <Border Background="Blue" Visibility="{Binding IsSelcted}" Canvas.ZIndex="-1"/>
   <StackPanel Background="Transparent" Margin="10,0,0,0">
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Height="55" Margin="20,10,0,0">
         <StackPanel>
             <TextBlock Text="{Binding Option}" FontWeight="Bold" HorizontalAlignment="Left" Foreground="Black" FontSize="23" Margin="0,0,0,0" Width="250" >        
             </TextBlock>
          </StackPanel>
          <StackPanel Margin="100,0,0,0">
             <Image Margin="0,10,0,0" Source="/Images/arrow.png"></Image>
          </StackPanel>
      </StackPanel>
   </Grid>

You can toggle the boolean property (IsSeleced) of the listBox.SelectedItem in the selectionchanged Event

Note: You need to keep a reference of the old selected item and make its selected boolean false before making the new one as true.

I hope it helps.

Upvotes: 0

MengMeng
MengMeng

Reputation: 1024

you can add a prop "isselected" in your datacontext struct behind.

and += the list's event "SelectionChanged"

you can get context data from the handle args :

    public IList AddedItems { get; }

    public IList RemovedItems { get; }

change their isselected prop.

Upvotes: 1

Related Questions