Question

I have a UI like below :

Problem is at the moment the line splitting the name from the message is not visible unless the screen is filled (its basically a border on a custom control).

What I would like is for the parent control (stackpanel) to permanently have a line through it and not have to use the border on each MessageControl.

Is this possible?

Here is the code for the stackpanel :

<UserControl x:Class="ChatBoxWPF.ChatWindow"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" d:DesignHeight="402" d:DesignWidth="700" xmlns:my="clr-namespace:ChatBoxWPF" VerticalContentAlignment="Stretch" VerticalAlignment="Stretch">
    <ScrollViewer>
        <StackPanel Name="Messages" VerticalAlignment="Bottom"></StackPanel>
    </ScrollViewer>
</UserControl>

UPDATE 1:

I tried this :

<ScrollViewer Name="scroll">
    <StackPanel Name="Messages" VerticalAlignment="Bottom">
            <Line StrokeThickness="1" X1="100" Y1="0" X2="100" Y2="{Binding ElementName=scroll, Path=ActualHeight}" />
        </StackPanel>
</ScrollViewer>

Without the grid. It now sometimes shows in the designer, and other times not. And when run doesn’t show at all. Do I need the grid?

Answer 1

A very blunt and simple approach:

<Grid>
    <ScrollViewer>
        <StackPanel Name="Messages" VerticalAlignment="Bottom"></StackPanel>
    </ScrollViewer>
    <Line StrokeThickness="0.5" X1="116" X2="116" Y1="0" Stroke="Gainsboro" Y2="{Binding ElementName=ToLevelControl, Path=ActualHeight}" />
</Grid>