CODEWITHSUNDEEP
c#wpfmvvmwpf-controlsisenabled
NTinkicht
NTinkicht

Reputation: 1002

Disable Control's Selection Background Effect in WPF

I have a ListView which shows a collection of objects. I want to disable the "Blue effect" or "Blue rectangle" when clicking on the ListViewItem, and Let only the object in this Item enabled. Does anyone has an idea about that ??

Here is an Example of one of my ListViewItems:

LisViewItem

Here is my listView:

<ListView SelectionMode="Single" IsManipulationEnabled="True" HorizontalAlignment="Left" HorizontalContentAlignment="Stretch" VerticalAlignment="Stretch" ScrollViewer.VerticalScrollBarVisibility="Auto" ItemsSource="{Binding ChildrenList}" Background="Transparent" BorderBrush="Transparent" >
        <ListView.LayoutTransform>
            <RotateTransform Angle="{Binding IsVertical, Converter={StaticResource AngleOfBool}}"></RotateTransform>
        </ListView.LayoutTransform>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid HorizontalAlignment="Stretch" Background="Transparent" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <CheckBox   Content="{Binding Id}"  Height="auto" Name="Flag" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Column="0" IsChecked="{Binding IsVisible}"/>
                    <Grid Grid.Column="1">
                        <area:Area HorizontalAlignment="Stretch" Visibility="{Binding IsVisible, Converter={StaticResource VisibilityOfBool}}" />
                    </Grid>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
</ListView>

Upvotes: 0

Views: 2453

Answers (2)

trinaldi
trinaldi

Reputation: 2950

As I stated at the comments, I would change the ListViewItem template.
The code is very verbose, so let's do it:

First, create a ResourceDictionary and set a reference to it in you App.xaml.
Having done that, paste the code below at the ResourceDictionary:

    <SolidColorBrush x:Key="Item.MouseOver.Background" Color="#1F26A0DA"/>
    <SolidColorBrush x:Key="Item.MouseOver.Border" Color="#a826A0Da"/>
    <SolidColorBrush x:Key="Item.SelectedInactive.Background" Color="#3DDADADA"/>
    <SolidColorBrush x:Key="Item.SelectedInactive.Border" Color="#FFDADADA"/>
    <SolidColorBrush x:Key="Item.SelectedActive.Background" Color="#3D26A0DA"/>
    <SolidColorBrush x:Key="Item.SelectedActive.Border" Color="#FF26A0DA"/>
    <Style x:Key="ListViewItemStyle1" TargetType="{x:Type ListViewItem}">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="Padding" Value="4,1"/>
        <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
        <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListViewItem}">
                    <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="IsMouseOver" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.MouseOver.Background}"/>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.MouseOver.Border}"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Selector.IsSelectionActive" Value="False"/>
                                <Condition Property="IsSelected" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Background}"/>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Border}"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Selector.IsSelectionActive" Value="True"/>
                                <Condition Property="IsSelected" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Background}"/>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Border}"/>
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Notice that the first 6 tags (SolidColorBrush) have the references to the colors according to the state of the ListViewItem.
From here, you can take 2 paths, change the SolidColorBrush Color to whatever you want to, in your case Transparent OR remove the Triggers altogether (not recommended).

When you're done, set the Style property of your ListBoxItem to the x:Key you named. In the code the name is x:Key="ListViewItemStyle1".

I hope that this guide you!

Upvotes: 1

Sheridan
Sheridan

Reputation: 69979

Setting the IsEnabled property of a parent control to False will automatically set the IsEnabled property of every child control to False as well. The only way around this is to set the IsEnabled property of the individual controls that you want to be disabled to False, instead of that of the parent control.

However, you can create one bool property to Bind to the IsEnabled property of all of the relevant controls so that at least, you can disable and enable them all using the one property:

<Grid Name="Parent">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"></ColumnDefinition>
        <ColumnDefinition Width="auto"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <ContentControl IsEnabled="AreInnerControlsEnabled" Grid.Column="0" Content="{Binding}" Visibility="{Binding IsVisible, Converter= {StaticResource VisibilityOfBool} }"></ContentControl>
    <Grid Grid.Column="1" Visibility="{Binding IsVisible, Converter= {StaticResource VisibilityOfBool} }" HorizontalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition Height="0.5*"></RowDefinition>
            <RowDefinition Height="0.5*"></RowDefinition>
        </Grid.RowDefinitions>
        <Label IsEnabled="AreInnerControlsEnabled" Grid.Row="0" Background="Transparent" Content="{Binding Top}" VerticalAlignment="Top" HorizontalAlignment="Stretch"></Label>
        <Label Grid.Row="1" Background="Transparent" Content="{Binding Bottom}" VerticalAlignment="Bottom" HorizontalAlignment="Stretch"></Label>
    </Grid>
</Grid>

Using this method, only the controls using the AreInnerControlsEnabled property will be affected.

UPDATE >>>

So it turns out that you actually want to remove the default selection colour of the ListView... that is very different to what you 'appeared' to be asking. However, now I know that, you can achieve that very easily by using a simple Style:

<Style x:Key="HiddenDefaultSelectionStyle" TargetType="{x:Type ListViewItem
    <Style.Resources>
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}" Color="Black" />
    </Style.Resources>
</Style>

You only need one of these to hide that colour, but I have shown you the rest for future reference. You can use it like this:

<ListView ItemContainerStyle="{StaticResource HiddenDefaultSelectionStyle}" ... />

Upvotes: 2

Related Questions