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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With