CODEWITHSUNDEEP
wpflistboxitem
Gerard
Gerard

Reputation: 13427

Remove rectangle around ListBoxItem

enter image description here

Above is an image of my listboxitem.
I am wondering whether it is possible to remove the rectangle that surronds the ellipse.
Padding and BorderThicknes are 0 already.

I use this styling:

<ListBox.ItemContainerStyle>
   <Style TargetType="ListBoxItem"> ...
   <Style.Triggers>
        <DataTrigger Binding="{Binding Data}" Value="ellipse">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid>
                            <Ellipse Fill="{Binding Brush}" Stroke="Black"/>
                             <TextBlock Text="{Binding Int}" />
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </DataTrigger>
    </Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>

I tried this:

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="ListBoxItem">
            <ContentPresenter />
        </ControlTemplate>
    </Setter.Value>
</Setter>

Then the items are not selectable any more.

Upvotes: 0

Views: 683

Answers (2)

Jan
Jan

Reputation: 376

You should create control template for ListBoxItem. Then you can change background of ListBoxItem.

  <Window.Resources>
    <Style x:Key="{x:Type ListBoxItem}"
           TargetType="ListBoxItem">
        <Setter Property="SnapsToDevicePixels"
                Value="true" />
        <Setter Property="OverridesDefaultStyle"
                Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border Name="Border"
                            BorderThickness="2"
                            Padding="2"
                            SnapsToDevicePixels="true">
                        <ContentPresenter />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected"
                                 Value="true">
                            <Setter TargetName="Border"
                                    Property="Background"
                                    Value="{x:Static Brushes.Transparent}" />

                            <Setter TargetName="Border"
                                    Property="BorderBrush"
                                    Value="{x:Static Brushes.WhiteSmoke}" />
                        </Trigger>
                        <Trigger Property="IsEnabled"
                                 Value="false">
                            <Setter Property="Foreground"
                                    Value="{x:Static Brushes.Transparent}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <ListBox Margin="5" ItemsSource="{Binding Path=Datas}">
       <ListBox.ItemTemplate>
           <DataTemplate>
               <Grid>
                    <Ellipse Width="30"
                             Height="30"
                             Fill="{Binding Path=EllipseBrush}"/>
                   <TextBlock Text="{Binding Path=Number}"/>
               </Grid>
           </DataTemplate>
       </ListBox.ItemTemplate>
    </ListBox>
</Grid>

Sample you can download here

Upvotes: 6

Sheridan
Sheridan

Reputation: 69985

It seems to me that the 'Rectangle' that you're talking about is just the ListBoxItem.Background. It also looks like the default selection Color used in the ListBox control. If that's what it is, you can easily hide this by setting some property values in a local Resources section. Try adding these to your ListBox.Resources section:

<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>

Upvotes: 1

Related Questions