CODEWITHSUNDEEP
wpfxaml
hyankov
hyankov

Reputation: 4130

Remove wrapping around ListBox item

I have the following code:

<!-- Accounts list -->
<ListBox SelectedIndex="0" ItemsSource="{Binding AccountViewModels}" SelectedItem="{Binding SelectedItem}" Style="{StaticResource AccountsList}">
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Padding" Value="0" />
            <Setter Property="Margin" Value="0" />
        </Style>
    </ListBox.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <LocalViews:AccountView Margin="{StaticResource ControlMargin}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ListBox>

Which renders as:

enter image description here

How do I:

  1. Remove the highlight around the selected item
  2. (and/or) remove the extra top and bottom margin it creates

Upvotes: 0

Views: 555

Answers (4)

C. Mayer
C. Mayer

Reputation: 423

To remove the Padding around every item, you can overwrite the Padding property in the ListBoxItem Style.

<Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
            <Setter Property="Padding" Value="0" />
</Style>

In contrast to your approach (setting ListBox.ItemContainerStyle) this won't generate the blue selection, but keep the standard selection of an default ListBox.

Upvotes: 0

hyankov
hyankov

Reputation: 4130

As bad as it sounds, answering my own question, here is the solution

        <Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <ContentPresenter />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

This removes the extra styling around ListBoxItem and makes it look as if it were an ItemsControl, which is exactly what I wanted.

Upvotes: 3

mm8
mm8

Reputation: 169200

Right-click on the ListBox in design mode in Visual Studio or in Blend and choose Edit Additional Templates->Edit Generated Item Container (ItemContainerStyle)->Edit a Copy to copy the default control template for the ListBoxItem into your XAML markup and then edit it as per your requirements by removing some MultiTriggers:

<ListBox SelectedIndex="0" ItemsSource="{Binding AccountViewModels}" SelectedItem="{Binding SelectedItem}" Style="{StaticResource AccountsList}">
    <ListBox.Resources>
        <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 TargetType="{x:Type ListBoxItem}">
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="Padding" Value="0"/>
            <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="{x:Null}"/>
            <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="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>
    </ListBox.Resources>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <LocalViews:AccountView Margin="{StaticResource ControlMargin}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ListBox>

Upvotes: 0

Drew Noakes
Drew Noakes

Reputation: 310907

You might like to use ItemsControl instead of ListBox. It doesn't have the concept of selection.

However if you want full control over the presentation and layout of the control, you'll need to set your own control templates for the control and its sub elements. Examples are available on MSDN, or you can use a tool to extract the templates from an existing class and make your own modifications.

Upvotes: 0

Related Questions