locked
How to change the SelectionBackgroud of ListView? RRS feed

  • Question

  •  <ListView Name="MenuList" SelectionMode="Single" IsItemClickEnabled="False" SelectionChanged="MenuList_ItemChanged_1" HorizontalAlignment="Left" VerticalAlignment="Center">
                        <ListView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                        </ListView.ItemsPanel>
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                                    <TextBlock Text="{Binding name}" VerticalAlignment="Center" FontSize="20" ></TextBlock>
                                </StackPanel>
                            </DataTemplate>
                        </ListView.ItemTemplate></ListView>

    Thursday, January 2, 2014 6:44 AM

Answers

  • You need to make changes in selected Visual state of Listview .

    It should be something like this

     <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground"/>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder"/>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="contentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ColorAnimation Duration="0" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="OuterContainer"  To="Red"/>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="SelectionBackground">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <SolidColorBrush Color="Green"/>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <DoubleAnimation Duration="0" Storyboard.TargetProperty="(Shape.StrokeThickness)" Storyboard.TargetName="SelectedBorder"  To="0"/>
                                            </Storyboard>
                                        </VisualState>

    Have a look at this to know how to style an item of a listview

    http://irisclasson.com/2012/07/22/example-winrtmetro-app-how-to-edit-default-template-in-visual-studio-2012-and-blend/

    If you still have issues, post the style you applied so that we can help you



    Nazia

    Thursday, January 2, 2014 10:50 AM
  • <DataTemplate> <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Tap="OnTap"> <TextBlock Text="{Binding name}" VerticalAlignment="Center" FontSize="20" > </TextBlock> </StackPanel> </DataTemplate> private void OnTap(object sender, System.Windows.Input.GestureEventArgs e) { StackPanel sp = sender as StackPanel; sp.Background = new SolidColorBrush(Colors.Blue); }

    i think this will help you.

    thanks, sarath s

    Thursday, January 2, 2014 10:59 AM

All replies

  • Thanks,but I need to change the background of selected listviewitem,now the effect is:

    the background changed while the mouse is over it,but not change after selected.

    Thursday, January 2, 2014 9:58 AM
  • You need to make changes in selected Visual state of Listview .

    It should be something like this

     <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground"/>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder"/>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="contentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ColorAnimation Duration="0" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="OuterContainer"  To="Red"/>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="SelectionBackground">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <SolidColorBrush Color="Green"/>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <DoubleAnimation Duration="0" Storyboard.TargetProperty="(Shape.StrokeThickness)" Storyboard.TargetName="SelectedBorder"  To="0"/>
                                            </Storyboard>
                                        </VisualState>

    Have a look at this to know how to style an item of a listview

    http://irisclasson.com/2012/07/22/example-winrtmetro-app-how-to-edit-default-template-in-visual-studio-2012-and-blend/

    If you still have issues, post the style you applied so that we can help you



    Nazia

    Thursday, January 2, 2014 10:50 AM
  • <DataTemplate> <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Tap="OnTap"> <TextBlock Text="{Binding name}" VerticalAlignment="Center" FontSize="20" > </TextBlock> </StackPanel> </DataTemplate> private void OnTap(object sender, System.Windows.Input.GestureEventArgs e) { StackPanel sp = sender as StackPanel; sp.Background = new SolidColorBrush(Colors.Blue); }

    i think this will help you.

    thanks, sarath s

    Thursday, January 2, 2014 10:59 AM