Removing the 'selection' from a radio button in a listview control

Question

This feels like the solution would be obvious, but apparently not.

I've got a listview on my window defined like so:

<ListView SelectedValue="{Binding Gender, ValidatesOnDataErrors=True}" Grid.Column="1" Grid.Row="3" SelectedValuePath="Tag" BorderThickness="0" Margin="2" SelectionMode="Single">
    <RadioButton GroupName="Gender" Margin="2" Tag="M" Content="Male" IsChecked="{Binding RelativeSource={RelativeSource AncestorType=ListViewItem}, Path=IsSelected}"/>
    <RadioButton GroupName="Gender" Margin="2" Tag="F" Content="Female" IsChecked="{Binding RelativeSource={RelativeSource AncestorType=ListViewItem}, Path=IsSelected}"/>
</ListView>

When one of those radio buttons is selected, it has a grey background and border around the item. I want to remove/hide the background and border. How do I do this?

I've tried setting Focusable to false. Various styles, templates, triggers etc. but these have no effect. I tried all solutions from this question but they didn't work.

How else can I remove this styling on the list view items. Basically I want the grey background and border gone when the control doesn't have focus.

EDIT: Adding a picture to illustrate what I'm trying to achieve. I want the border and background around the 'Male' radiobutton removed/hidden. So this is what I have:

Part of my form

And this is what I want: Expected

This is what I think should work (according to answers so far, but does nothing. The style just stays the same.)

<!-- This doesn't change the style... -->
<ListView.Resources>
    <Style TargetType="ListViewItem">
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="BorderBrush" Value="Transparent"/>
                <Setter Property="Background" Value="Transparent"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</ListView.Resources>

<!-- Neither does this... -->
<Style TargetType="{x:Type ListViewItem}">
    <Style.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsSelected" Value="True"/>
                <Condition Property="IsFocused" Value="False"/>
            </MultiTrigger.Conditions>
            <MultiTrigger.Setters>
                <Setter Property="Foreground" Value="{x:Null}"/>
                <Setter Property="Background" Value="{x:Null}"/>
                <Setter Property="BorderBrush" Value="{x:Null}"/>                          
            </MultiTrigger.Setters>
        </MultiTrigger>
    </Style.Triggers>
</Style>

Gino · Answer 1 · 2015-07-02T06:46:27.097

0

You' should add a style trigger:

            <Style TargetType="RadioButton">
                <Style.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Background" Value="YOUR FAVORITE COLOR HERE" />
                        <Setter Property="BorderBrush" Value="YOUR FAVORITE COLOR HERE"/>
                    </Trigger>
                </Style.Triggers>
            </Style>

I made reference to this: www.wpf-tutorial.com/styles/trigger-datatrigger-event-trigger/
This is just an example to show you the right way! Hope it helps

edited Jul 02 '15 at 06:46

answered Jun 30 '15 at 07:40

Gino

175
3
16

Which element do I style? The RadioButtons or the ListViewItem? – Jake Jun 30 '15 at 15:45
I have edited my answer so now it should be more clear – Gino Jul 01 '15 at 07:28
I got an error when using that style.`The name "Border" is not recognized`. THis doesn't solev my problem either, it's just changed the text to blue. I'll add an image for clarifcation. – Jake Jul 01 '15 at 18:36
My code was just a guideline, you need to do some research for the right properties to put in. [This is a list](https://msdn.microsoft.com/en-us/library/system.windows.controls.radiobutton%28v=vs.110%29.aspx) of all the properties of the radiobutton on a wpf. PS: What you're looking for is the property BorderBrush. I have re-edited my answer to fit more your needs – Gino Jul 02 '15 at 06:42
can you explain why I should be styling the RadioButton rather than the ListViewItem, I would have thought than the selection styles were part of the ListViewItem class, rather than the control in the list. (If that makes sense) – Jake Jul 02 '15 at 14:21
I tried altering the styles on the radio button and it didn't affect the border or selection colour. It just made the radio buttons and text invisible. – Jake Jul 02 '15 at 17:00

score 0 · Accepted Answer · answered Jul 02 '15 at 22:29

Ok, I have no idea what I've done, but I found the answer my tweaking the XAML in this blog post:

I've ended up with this Style, I have no idea what it does, but it does what I want it to do.

The full XAML for my ListView now looks like this, I'll move the style into a resource dictionary later.

<ListView SelectedValue="{Binding Gender, ValidatesOnDataErrors=True}" Grid.Column="1" Grid.Row="3" SelectedValuePath="Tag" BorderThickness="0" Margin="2" SelectionMode="Single">
    <ListView.Resources>
        <Style TargetType="{x:Type ListViewItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border x:Name="Bd"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}"
                                Padding="{TemplateBinding Padding}"
                                SnapsToDevicePixels="true">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Selector.IsSelectionActive"
                        Value="False" />
                                    <Condition Property="IsSelected"
                        Value="True" />
                                </MultiTrigger.Conditions>
                                <Setter Property="Background"
                TargetName="Bd"
                Value="Transparent" />
                            </MultiTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListView.Resources>
    <RadioButton GroupName="Gender" Margin="2" Tag="M" Content="Male" IsChecked="{Binding RelativeSource={RelativeSource AncestorType=ListViewItem}, Path=IsSelected}"/>
    <RadioButton GroupName="Gender" Margin="2" Tag="F" Content="Female" IsChecked="{Binding RelativeSource={RelativeSource AncestorType=ListViewItem}, Path=IsSelected}"/>
</ListView>

Removing the 'selection' from a radio button in a listview control

2 Answers2