CODEWITHSUNDEEP
c#wpfxaml
LCC
LCC

Reputation: 1189

Border not lining up on a TextBlock

I am working on a chat program, and I would like to have a single line separate every line of text.

Here is the XAML I am using:

<ScrollViewer Grid.Row="0" Name="ScrollBar">
    <ListView HorizontalContentAlignment="Stretch"
              BorderThickness="0"
              IsTabStop="False"
              Name="AllItems"
              Background="#E4E4E4"
              ScrollViewer.HorizontalScrollBarVisibility="Disabled"
              PreviewMouseWheel="AllItems_PreviewMouseWheel"
              ItemsSource="{Binding Messages}">

        <ListView.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="Black"
                        BorderThickness="0, 1, 0, 0">
                    <TextBlock
                            FontSize="16"
                            TextWrapping="Wrap"
                            FontFamily="Arial"
                            Margin="0"
                            Initialized="ChatLine_Initialized"
                            VerticalAlignment="Center" />
                </Border>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ScrollViewer>

I'm also setting the background of each line in alternating colors (this is an event handler for TextBlock's Initialize event):

static int s_curr;

void ChatLine_Initialized(object sender, EventArgs e)
{
    int curr = Interlocked.Increment(ref s_curr);
    if ((curr % 2) == 0)
        ((TextBlock)sender).Background = (SolidColorBrush)(new BrushConverter().ConvertFrom("#C8C8C8"));
    else
        ((TextBlock)sender).Background = (SolidColorBrush)(new BrushConverter().ConvertFrom("#E4E4E4"));
}

The problem I'm running into is that the darker lines do not fill down to the border.
For example, here is how it renders:

Lines

How do I get the darker background to fill down to the border line?

Upvotes: 0

Views: 70

Answers (2)

d.moncada
d.moncada

Reputation: 17402

There's no need to create a ListView wrapped in a ScrollViewer and then set each alternate row a different color. A DataGrid has all this functionality built in.

This can be tweaked, but is styled to represent your screen-shot:

<DataGrid HorizontalContentAlignment="Stretch"
          BorderThickness="0"
          IsTabStop="False"
          Name="AllItems"
          ScrollViewer.HorizontalScrollBarVisibility="Disabled"
          ItemsSource="{Binding Messages}"
          AlternationCount="2"
          HeadersVisibility="None">
    <DataGrid.CellStyle>
        <Style TargetType="{x:Type DataGridCell}">
            <Setter Property="Foreground" Value="Black" />
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="{x:Null}" />
                    <Setter Property="BorderBrush" Value="{x:Null}" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </DataGrid.CellStyle>
    <DataGrid.RowStyle>
        <Style TargetType="{x:Type DataGridRow}">
            <Style.Triggers>
                <Trigger Property="AlternationIndex" Value="0">
                    <Setter Property="Background" Value="#E4E4E4" />
                </Trigger>
                <Trigger Property="AlternationIndex" Value="1">
                    <Setter Property="Background" Value="#C8C8C8" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </DataGrid.RowStyle>
</DataGrid>

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222722

Remove the border of your textblock and apply a style for the ListBox Items, this works,

<Grid>
    <ScrollViewer Grid.Row="0" Name="ScrollBar">
        <ListView HorizontalContentAlignment="Stretch"
              BorderThickness="0"
              IsTabStop="False"
              Name="AllItems"
              Background="#E4E4E4" 
              ScrollViewer.HorizontalScrollBarVisibility="Disabled"
              ItemsSource="{Binding Messages}">
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListViewItem">
                                <Border Name="Border" BorderBrush="Black" BorderThickness="1">
                                    <ContentPresenter />
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListView.ItemContainerStyle>
                <ListView.ItemTemplate>
               <DataTemplate>
                <TextBlock
                            FontSize="16"
                            TextWrapping="Wrap"
                            FontFamily="Arial"
                            Text="{Binding Name}"
                            Initialized="ChatLine_Initialized"
                             />                      
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ScrollViewer>
</Grid>

Output:

enter image description here

Upvotes: 1

Related Questions