Question

I’m looking to build a menu using a ListView (I’m open to using anything else really that’ll achieve the effect I’m looking for. The look I would like to emulate is the following.

Here is what I currently have for my XAML.

    <ListView 
        ItemsSource="{Binding Decisions}" 
        SelectedItem="{Binding SelectedDecision}" 
        HorizontalAlignment="Left"
        BorderThickness="0"
        Width="350"
        FontSize="12">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel 
                    Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Border 
                    BorderThickness="1" 
                    BorderBrush="#DDD" 
                    CornerRadius="2">
                    <TextBlock 
                        Text="{Binding Converter={StaticResource DecisionTypeNameConverter}}"
                        Padding="8"
                        Background="#EEE" />
                </Border>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

This produces an alright looking menu until I select an item. Once an item is selected it is surrounded by an ugly dark blue. How can I recreate this look (the gradient effect isn’t required) in XAML?

Answer 1

Do you need to track the SelectedItem?

If not, I would suggest using an ItemsControl

If so, you need to overwrite the selected item brush color so it doesn’t show up. This is a system color, and I usually overwrite it like this:

<ListView.Resources>
    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
    <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
</ListView>