How to remove margin on listbox itemscontainer in wpf?

Question

I can't fixed my issue about listbox padding on itemscontainer

<Style TargetType="ListBoxItem" x:Key="MyListBoxItem">
    <Setter Property="Template">
        <ControlTemplate TargetType="ListBoxItem">
            <Border BorderThickness="0 0 1 1" BorderBrush="Blue">
                <TextBlock Text="{Binding MyName}"/>
            </Border>
        </ControlTemplate>
    </Setter>
</Style>

<Style TargetType="ListBox" x:Key="MyListBox">
    <Setter Property="ListBoxItemsContainer" Value="{StaticResource MyListBoxItem}"/>
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Background" Value="Red"/>
    <Setter Property="BorderThickness" Value="1 1 0 0"/>
    <Setter Property="BorderBrush" Value="Blue"/>
</Style>

<ListBox Style="{StaticResource MyListBox}"/>

How to catch the 1 pixel in listbox items containers?

Help me please!

1 pixel red space!!

i can show source code for you at after a hour thank you for your help — Jaewung Lee, Jul 10 '16 at 08:53

score 1 · Accepted Answer · edited May 23 '17 at 12:26

The padding is hard coded in the control template. Looks like the template on MSDN is already updated (Padding="{TemplateBinding Padding}"), but the default one used in VS isn't. As always when making changes to control templates, it takes a lot of XAML redefining everything.

Altered to your specific case

Reference

xmlns:sys="clr-namespace:System;assembly=mscorlib"

Resources

<ControlTemplate x:Key="ValidationToolTipTemplate">
    <Grid x:Name="Root" Margin="5,0" RenderTransformOrigin="0,0" Opacity="0">
        <Grid.RenderTransform>
            <TranslateTransform x:Name="xform" X="-25"/>
        </Grid.RenderTransform>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="OpenStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0"/>
                    <VisualTransition To="Open" GeneratedDuration="0:0:0.2">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="xform" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.2">
                                <DoubleAnimation.EasingFunction>
                                    <BackEase Amplitude=".3" EasingMode="EaseOut"/>
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                            <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2"/>
                        </Storyboard>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Closed">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Open">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="xform" Storyboard.TargetProperty="X" To="0" Duration="0"/>
                        <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Border Margin="4,4,-4,-4" Background="#052A2E31" CornerRadius="5"/>
        <Border Margin="3,3,-3,-3" Background="#152A2E31" CornerRadius="4"/>
        <Border Margin="2,2,-2,-2" Background="#252A2E31" CornerRadius="3"/>
        <Border Margin="1,1,-1,-1" Background="#352A2E31" CornerRadius="2"/>

        <Border Background="#FFDC000C" CornerRadius="2"/>
        <Border CornerRadius="2">
            <TextBlock 
                  UseLayoutRounding="false" 
                  Foreground="White" Margin="8,4,8,4" MaxWidth="250" TextWrapping="Wrap" Text="{Binding (Validation.Errors)[0].ErrorContent}"/>
        </Border>
    </Grid>
</ControlTemplate>

<Style TargetType="ListBoxItem" x:Key="MyListBoxItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Border BorderThickness="0 0 1 1" BorderBrush="Blue">
                    <TextBlock Text="{Binding MyName}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="ListBox">
    <Setter Property="ItemContainerStyle" Value="{StaticResource MyListBoxItem}"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Background" Value="Red"/>
    <Setter Property="BorderThickness" Value="1 1 0 0"/>
    <Setter Property="BorderBrush" Value="Blue"/>
    <Setter Property="Foreground" Value="#FF000000"/>
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="VerticalContentAlignment" Value="Top" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBox">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="ValidationStates">
                            <VisualState x:Name="Valid"/>
                            <VisualState x:Name="InvalidUnfocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" >
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="InvalidFocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" >
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsOpen">
                                        <DiscreteObjectKeyFrame KeyTime="0" >
                                            <DiscreteObjectKeyFrame.Value>
                                                <sys:Boolean>True</sys:Boolean>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border CornerRadius="2" 
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                        <ScrollViewer x:Name="ScrollViewer" Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="0" >
                            <ItemsPresenter />
                        </ScrollViewer>
                    </Border>
                    <Border x:Name="ValidationErrorElement" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" BorderBrush="#FFDB000C" Visibility="Collapsed">
                        <ToolTipService.ToolTip>
                            <ToolTip x:Name="validationTooltip" Template="{StaticResource ValidationToolTipTemplate}" Placement="Right" 
                                             PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" 
                                             DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
                                <ToolTip.Triggers>
                                    <EventTrigger RoutedEvent="Canvas.Loaded">
                                        <EventTrigger.Actions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsHitTestVisible">
                                                        <DiscreteObjectKeyFrame KeyTime="0" >
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <sys:Boolean>true</sys:Boolean>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </EventTrigger.Actions>
                                    </EventTrigger>
                                </ToolTip.Triggers>
                            </ToolTip>
                        </ToolTipService.ToolTip>
                        <Grid Width="10" Height="10" HorizontalAlignment="Right" Margin="0,-4,-4,0" VerticalAlignment="Top" Background="Transparent">
                            <Path Margin="-1,3,0,0" Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z" Fill="#FFDC000C"/>
                            <Path Margin="-1,3,0,0" Data="M 0,0 L2,0 L 8,6 L8,8" Fill="#ffffff"/>
                        </Grid>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Note that the ControlTemplate for ValidationTooltip is needed as per MSDN

The default ControlTemplate for ListBox and ListBoxItem references the ControlTemplate for ValidationTooltip. The following XAML shows the ControlTemplate for ValidationTooltip that you must specify when you work with the ListBox or ListBoxItem control templates.

How to remove margin on listbox itemscontainer in wpf?

1 Answers1