Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make style in ListView SelectedItem.?

I am working on a WPF application and I want to make style on ListViewItem. I have made a style for this but this does not give me the exact result what I want. Apart from this I want CornerRadius in this style so how I can add 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>
like image 613
Jitendra Jadav Avatar asked Nov 16 '11 11:11

Jitendra Jadav


1 Answers

Quick solution is to override item template. You may reffer to WPF or Silverlight themes about contols styling. See the BureauBlue.xaml for ListViewItem complete template.

<ListView x:Name="uiList">
    <ListView.Resources>
        <ControlTemplate x:Key="SelectedTemplate" TargetType="ListViewItem">
            <Border SnapsToDevicePixels="true" 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    Background="{TemplateBinding Background}"
                    CornerRadius="5" x:Name="border">
                <ContentControl 
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                    Margin="2,2,2,2" 
                    VerticalAlignment="Stretch"
                    Content="{TemplateBinding Content}" />
            </Border>
        </ControlTemplate>
        <Style TargetType="ListViewItem">
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsSelected" Value="true" />
                        <Condition Property="Selector.IsSelectionActive" Value="true" />
                    </MultiTrigger.Conditions>
                    <Setter Property="Background" Value="Pink" />
                    <Setter Property="Template" Value="{StaticResource SelectedTemplate}" />
                </MultiTrigger>
            </Style.Triggers>
        </Style>
    </ListView.Resources>
    <ListViewItem Content="10" />
    <ListViewItem Content="11" />
</ListView>
like image 180
Pavel Korsukov Avatar answered Nov 15 '22 11:11

Pavel Korsukov