How to make style in ListView SelectedItem.?

Question

Hello guys I am making a style in WPF ListView Selected Item it is a some glow of the Image and TexttBlock is normal so how I can achieve this I made this style like this.

                    <ListView.Style>
                        <Style TargetType="{x:Type ListView}">
                            <Setter Property="BorderBrush" Value="White"/>
                            <Setter Property="BorderThickness" Value="0"/>
                            <Setter Property="Margin" Value="0"/> 
                            <Setter Property="Width" Value="300"/>
                            <Style.Resources>
                            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#9449b0"/>
                            <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#9449b0"/>
                            </Style.Resources>
                        </Style>
                    </ListView.Style>

and I want like the attach image of the menu I have a pinck color glow so how I can make this correct me

Thank you..!!!

---

Jitendra Jadav

Answer 1

Hi,

u can write a trigger on the ListViewItem when its IsSelected property becomes true

here are some examples

http://stackoverflow.com/questions/248545/wpf-trigger-for-isselected-in-a-datatemplate-for-listbox-items

http://stackoverflow.com/questions/1153345/wpf-listview-how-do-i-set-selected-item-background-colour

http://social.msdn.microsoft.com/forums/en-US/wpf/thread/a0fb2021-4ccb-4abe-9505-aab672b6e093

---

Thanks, BHavik

Answer 2

Hi JAdav,

   I used some where this example.. It worked. Please try

 

    <Window.Resources>
        <Style x:Key="ButtonStyle1" TargetType="{x:Type ListView}">
                <Setter Property="BorderBrush" Value="White"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="Margin" Value="0"/>
                <Setter Property="Width" Value="300"/>
                <Style.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#9449b0"/>
                    <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#9449b0"/>
                </Style.Resources>
            </Style>
        <Style BasedOn="{x:Null}" TargetType="{x:Type ListViewItem}" x:Key="ListViewItem_Theme">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListViewItem}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="over">
                                <ThicknessAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="title" Storyboard.TargetProperty="(FrameworkElement.Margin)">
                                    <SplineThicknessKeyFrame KeyTime="00:00:00" Value="0"/>
                                    <SplineThicknessKeyFrame KeySpline="0.5,0,0.5,1" KeyTime="00:00:00.5000000" Value="0,-60,0,0"/>
                                    <SplineThicknessKeyFrame KeyTime="00:00:00.7000000" Value="0,-55,0,0"/>
                                </ThicknessAnimationUsingKeyFrames>
                                <ThicknessAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="titleOver" Storyboard.TargetProperty="(FrameworkElement.Margin)">
                                    <SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,0,0,-55"/>
                                    <SplineThicknessKeyFrame KeyTime="00:00:00.5000000" Value="0,0,0,5" KeySpline="0.5,0,0.5,1"/>
                                    <SplineThicknessKeyFrame KeyTime="00:00:00.7000000" Value="0"/>
                                </ThicknessAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="overBack">
                                <ThicknessAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="title" Storyboard.TargetProperty="(FrameworkElement.Margin)">
                                    <SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,-55,0,0"/>
                                    <SplineThicknessKeyFrame KeySpline="0.5,0,0.5,1" KeyTime="00:00:00.5000000" Value="0,5,0,0"/>
                                    <SplineThicknessKeyFrame KeyTime="00:00:00.7000000" Value="0"/>
                                </ThicknessAnimationUsingKeyFrames>
                                <ThicknessAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="titleOver" Storyboard.TargetProperty="(FrameworkElement.Margin)">
                                    <SplineThicknessKeyFrame KeyTime="00:00:00" Value="0"/>
                                    <SplineThicknessKeyFrame KeySpline="0.5,0,0.5,1" KeyTime="00:00:00.5000000" Value="0,0,0,-60"/>
                                    <SplineThicknessKeyFrame KeyTime="00:00:00.7000000" Value="0,0,0,-55"/>
                                </ThicknessAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="press">
                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="bgPress" Storyboard.TargetProperty="(UIElement.Visibility)">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00.7000000" Value="{x:Static Visibility.Visible}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="bgPress" Storyboard.TargetProperty="(UIElement.Opacity)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                                    <SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="1"/>
                                    <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="overline">
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="bg" Storyboard.TargetProperty="(Shape.Stroke).(Brush.RelativeTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-1.061"/>
                                    <SplineDoubleKeyFrame KeyTime="00:00:01.1000000" Value="1.024"/>
                                    <SplineDoubleKeyFrame KeyTime="00:00:02.5000000" Value="1.024"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="bg" Storyboard.TargetProperty="(Shape.Stroke).(Brush.RelativeTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                                    <SplineDoubleKeyFrame KeyTime="00:00:01.1000000" Value="0.001"/>
                                    <SplineDoubleKeyFrame KeyTime="00:00:02.5000000" Value="0.001"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <Grid x:Name="grid" ClipToBounds="True">
                            <Rectangle RadiusX="2" RadiusY="2" x:Name="bg" Fill="{TemplateBinding Background}">
                                <Rectangle.Stroke>
                                    <LinearGradientBrush EndPoint="1.04,0.5" StartPoint="-0.01,0.5">
                                        <LinearGradientBrush.RelativeTransform>
                                            <TransformGroup>
                                                <ScaleTransform CenterX="0.5" CenterY="0.5"/>
                                                <SkewTransform CenterX="0.5" CenterY="0.5"/>
                                                <RotateTransform CenterX="0.5" CenterY="0.5"/>
                                                <TranslateTransform/>
                                            </TransformGroup>
                                        </LinearGradientBrush.RelativeTransform>
                                        <GradientStop Color="#FF595959" Offset="0"/>
                                        <GradientStop Color="White" Offset="0.7"/>
                                        <GradientStop Color="#FF303030" Offset="1"/>
                                    </LinearGradientBrush>
                                </Rectangle.Stroke>
                            </Rectangle>
                            <Rectangle Stroke="{x:Null}" RadiusX="2" RadiusY="2" x:Name="bgBling" Margin="2,2,2,20">
                                <Rectangle.Fill>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#00FFFFFF" Offset="1"/>
                                        <GradientStop Color="#B2FFFFFF" Offset="0"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <TextBlock x:Name="title" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" Text="{TemplateBinding Content}"/>
                            <Rectangle RadiusX="8" RadiusY="8" x:Name="bgPress" StrokeThickness="2" Visibility="Hidden" RenderTransformOrigin="0.5,0.5" Fill="{x:Null}">
                                <Rectangle.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Rectangle.RenderTransform>
                                <Rectangle.Stroke>
                                    <LinearGradientBrush EndPoint="0.967,1.042" StartPoint="0.076,-0.042">
                                        <LinearGradientBrush.RelativeTransform>
                                            <TransformGroup>
                                                <ScaleTransform CenterX="0.5" CenterY="0.5"/>
                                                <SkewTransform CenterX="0.5" CenterY="0.5"/>
                                                <RotateTransform CenterX="0.5" CenterY="0.5"/>
                                                <TranslateTransform X="-0.458"/>
                                            </TransformGroup>
                                        </LinearGradientBrush.RelativeTransform>
                                        <GradientStop Offset="1" Color="White"/>
                                        <GradientStop Color="White"/>
                                    </LinearGradientBrush>
                                </Rectangle.Stroke>
                            </Rectangle>
                            <TextBlock x:Name="titleOver" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" Text="{TemplateBinding Content}" Margin="0,0,0,-60" FontWeight="Bold" FontSize="13.333"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Trigger.ExitActions>
                                    <BeginStoryboard x:Name="overBack_BeginStoryboard" Storyboard="{StaticResource overBack}"/>
                                    <StopStoryboard BeginStoryboardName="overline_BeginStoryboard"/>
                                </Trigger.ExitActions>
                                <Trigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource over}"/>
                                    <BeginStoryboard x:Name="overline_BeginStoryboard" Storyboard="{StaticResource overline}"/>
                                </Trigger.EnterActions>
                            </Trigger>
                            <!--<Trigger Property="IsPressed" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard x:Name="press_BeginStoryboard" Storyboard="{StaticResource press}"/>
                                </Trigger.EnterActions>
                                <Setter Property="Stroke" TargetName="bgPress">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0.967,1.042" StartPoint="0.076,-0.042">
                                            <LinearGradientBrush.RelativeTransform>
                                                <TransformGroup>
                                                    <ScaleTransform CenterX="0.5" CenterY="0.5"/>
                                                    <SkewTransform CenterX="0.5" CenterY="0.5"/>
                                                    <RotateTransform CenterX="0.5" CenterY="0.5"/>
                                                    <TranslateTransform X="-0.458"/>
                                                </TransformGroup>
                                            </LinearGradientBrush.RelativeTransform>
                                            <GradientStop Offset="0"/>
                                            <GradientStop Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>-->
                            <Trigger Property="IsEnabled" Value="False"/>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" MappingMode="RelativeToBoundingBox">
                        <GradientStop Color="#FF0FADA9" Offset="1"/>
                        <GradientStop Color="#FF75C4DE"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Width" Value="125" />
            <Setter Property="Height" Value="25" />
        </Style>
    </Window.Resources>
    <Grid>
        <ListView Height="223" HorizontalAlignment="Left" Margin="50,28,0,0" Name="listView1" VerticalAlignment="Top" Width="155" Style="{StaticResource ButtonStyle1}">
            <ListViewItem Content="Item1" Style="{StaticResource ListViewItem_Theme}" />
            <ListViewItem Content="Item2"  Style="{StaticResource ListViewItem_Theme}" />
            <ListViewItem Content="Item3"  Style="{StaticResource ListViewItem_Theme}" />
        </ListView>
    </Grid>

It will be much richer...

 

---

Thanks & Regards

KashNetDev

Please remember to click “Mark as Answer” on the post that helps you,This can be beneficial to other community members reading the thread.

Answer 3

Hi Bhavik I gone through this link but I dint find any releted stuff for me even I am the new for this style so can you help me this image I had attached so you can see this and workaround for this style I had mad this pink style I show you this attachment but I dont know in this style how I can add round corner and this central image glow kind of things.

 

now you can differentiate this style what I am expecting to this..

 

thank you very much for you time.

 

---

Jitendra Jadav

Answer 4

share ur XAML code including listview and style that u have made...

---

Thanks, BHavik

Answer 5

Thank you Bhavik for your suppor I am putting my code so please correct me I getting pain to style this atleast I had spent One day for this.

            <ListView x:Name="MenuBarList" 
                        Grid.Row="1"
                        Height="{Binding MainMenuHeight}"  
                        Width="{Binding MainMenuWidth}" 
                        ItemsSource="{Binding Path=Menu.Options}" 
                        SelectedItem="{Binding Path=SelectedMainMenuOption, Mode=TwoWay}"
                        Foreground="White"
                        Background="Transparent" 
                        VerticalContentAlignment="Center"
                        HorizontalContentAlignment="Center"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        IsSynchronizedWithCurrentItem="True"
                        IsTabStop="False">

                    <ListView.Style>
                        <Style TargetType="{x:Type ListView}">
                            <Setter Property="BorderBrush" Value="White"/>
                            <Setter Property="BorderThickness" Value="0"/>
                            <Setter Property="Margin" Value="0"/> 
                            <Setter Property="Width" Value="300"/>
                            <Style.Resources>
                                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#9449b0"/>
                                <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#9449b0"/>
                        </Style.Resources>
                        </Style>
                    </ListView.Style>
                
            
                    <ListView.ItemTemplate>
                        <DataTemplate>
                           
                            <StackPanel Orientation="Horizontal" Focusable="False" VerticalAlignment="Center" HorizontalAlignment="Center">
                                <Image Source="{Binding IconPath}" 
                                       Focusable="False"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"
                                       IsHitTestVisible="False"/>

                                <TextBlock Text="{Binding Title}" 
                                           Focusable="False" 
                                           HorizontalAlignment="Center" 
                                           VerticalAlignment="Center" 
                                           FontFamily="Segoe UI"
                                           FontSize="26"
                                           IsHitTestVisible="False"/>
                            </StackPanel>
                    </DataTemplate>
                            
                    </ListView.ItemTemplate>
                </ListView>

Once Again thank you..!!

---

Jitendra Jadav

Answer 6

Hi 

u need to add style for the ListViewItem

<Style TargetType="{x:Type ListViewItem}" >
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="true">
                    <Setter Property="ListViewItem.Background" Value="Pink" />
                </Trigger>
            </Style.Triggers>
        </Style>

this is how it looks when u select the item..hope u mean this...

---

Thanks, BHavik

Answer 7

Hi Jitendra Jadav,

Have you achieved your goal.

 

Best regards,

---

Sheldon _Xiao[MSFT]
MSDN Community Support | Feedback to us
Get or Request Code Sample from Microsoft
Please remember to mark the replies as answers if they help and unmark them if they provide no help.