WPF Listbox separator is shown with different thickness
Asked Answered
G

0

6

I have created a custom ListBox with each item separated by separator. But I am seeing weird issue. The thickness of separator is not constant across List items. It changes if I change the position of list box as shown in this List Box Image.

Below is the source code of custom listbox.

    <Window x:Class="CustListBox.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:local="clr-namespace:CustListBox"
            Title="MainWindow" Height="350" Width="525">
        <Window.Resources>
            <local:Manager x:Key="manager"/>
            <Style x:Key="LstStyle" TargetType="{x:Type ListBoxItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <StackPanel>
                                <ContentPresenter/>
                                <Separator Foreground="Gray"/>
                            </StackPanel>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
        <Grid>
            <ListBox Name="CustListBox" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Source={StaticResource manager}, Path=UserList}" ItemContainerStyle="{Binding Source={StaticResource LstStyle}}" Margin="26,17,271,27">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                           <StackPanel>                            
                                <TextBlock Text="{Binding Path=FirstName}"/>
                                <TextBlock Text="{Binding Path=SecondName}"/>                            
                            </StackPanel>             
                    </DataTemplate>
                </ListBox.ItemTemplate>               
            </ListBox>
            <ListBox Height="278" HorizontalAlignment="Left" Margin="264,16,0,0" Name="listBox1" VerticalAlignment="Top" Width="218" ItemsSource="{Binding Source={StaticResource manager}, Path=Names}" ItemContainerStyle="{Binding Source={StaticResource LstStyle}}"/>
        </Grid>
    </Window>

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;

    namespace CustListBox
    {
        class Manager : PropertyChangeNotifier
        {
            public List<UserDetails> UserList { get; set; }
            private int myVar;

            public int MyProperty
            {
                get { return myVar; }
                set { myVar = value; }
            }

            public List<string> Names { get; set; }

            public Manager()
            {
                UserList = new List<UserDetails>(5);
                Names = new List<string>();

                UserDetails usrDtls = new UserDetails();
                usrDtls.FirstName = "First Name";
                usrDtls.SecondName = "Second Name";

                UserList.Add(usrDtls);
                UserList.Add(usrDtls);
                UserList.Add(usrDtls);
                UserList.Add(usrDtls);
                UserList.Add(usrDtls);
                UserList.Add(usrDtls);
                UserList.Add(usrDtls);
                UserList.Add(usrDtls);

                Names.Add("Test Name");
                Names.Add("Test Name");
                Names.Add("Test Name");
                Names.Add("Test Name");
                Names.Add("Test Name");
                Names.Add("Test Name");
                Names.Add("Test Name");
                Names.Add("Test Name");
                Names.Add("Test Name");
                Names.Add("Test Name");
            }
        }
    }
namespace CustListBox
{
    class UserDetails
    {
        public string FirstName { get; set; }
        public string SecondName { get; set; }
    }
}

Any help will be appreciated.

Goodden answered 4/8, 2017 at 12:8 Comment(4)
WPF's layout system is based on floating-point numbers (specifically doubles), not integers. This means that whenever WPF computes the bounding box for an element, it typically won't fall exactly on pixel boundaries. I suspect you are seeing the effects of a horizontal line being anti-aliased across two different pixel lines. You might want to look into Layout Rounding.Colloquy
Either that or some of your ListBoxItems have no content, hence you are seeing two Separator controls stacked on top of one another. You could check whether that is the case by adding some kind of vertical margin to your ContentPresenter element.Colloquy
Thanks Steven for the valuable information. It solved my issue. I used UseLayoutRounding attribute to solve my issue.Goodden
After using UseLayoutRounding attritube, I am seeing a weird issue. In some of the machines separates are invisible and but in some machines, separators are visible. Is UseLayoutRounding attritube causing this issue?Goodden

© 2022 - 2024 — McMap. All rights reserved.