WPF Textrimming in horizontally stacked ItemsControl with TextBlocks

Question

I have a ListBox where each item consists of an ItemsControl that prints TextBoxes.

<Window.Resources>
    <DataTemplate x:Key="ItemTemplate">
        <Grid Margin="0,0,0,0">
            <ItemsControl
                ItemsSource="{Binding Collection2}"
                ItemTemplate="{DynamicResource SubItemTemplate}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"></StackPanel>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </Grid>
    </DataTemplate>
</Window.Resources>

<Grid ShowGridLines="True" DataContext="{Binding Source={StaticResource SampleDataSource}}">
    <ListBox x:Name="listBox" 
             HorizontalAlignment="Left"
             Width="280"
             ScrollViewer.HorizontalScrollBarVisibility="Disabled"
             ItemTemplate="{DynamicResource ItemTemplate}"
             ItemsSource="{Binding Collection1}"/>
</Grid>

The ItemsControl list gets cut-off abrubtly because I have disabled HorizontalScrollBarVsibility on the ListBox. Now I want to use the TextBoxes TextTrimming property to leave dots at the end of the list, where the text is cut-off and is hidden behind the grid. Illustrated as red dots in the figure below:

I try to do this by using the following ItemTemplate without any results:

<DataTemplate x:Key="SubItemTemplate">
    <Border BorderThickness="1" BorderBrush="Black">
        <TextBlock Margin="5, 0, 5, 0"
               TextTrimming="CharacterEllipsis"
               Text="{Binding Name}">
        </TextBlock>
    </Border>
</DataTemplate>

My question is: How can I achieve TextTrimming functionality on a horizontally stacked list like the figure above?

I've used sample data using Visual Studio Blend with the following structure:

• SampleDataSource (Data Context)
  • Collection1:(Collection)
    • Collection2:(Collection)
      • Name:(String)

Update 2016-12-13
I tried setting the texttrimming as an external style and I tried setting the MaxWidth on both the Border, TextBlock and StackPanel (like suggested in comments). Apart from that I also tried wrapping the whole ItemsControl in a TextBlock and put the TextTrimming property on that. None of this gave any results unfortunatly. I do want o simplify the example code that i provided, essentially this is all that is relevant:

<Grid>
    <StackPanel Width="150" Orientation="Horizontal">
        <TextBlock TextTrimming="CharacterEllipsis" Text="This is textbox1"/>
        <TextBlock TextTrimming="CharacterEllipsis" Text="This is textbox2"/>
    </StackPanel>
</Grid>

Which looks like this (where the red dots is visualizing what i want to achieve):

Now, in this example I could merge the two textblocks and use Run instead, but that would not be applicable on my "real" problem.

Update 2017-02-24

This solution was proposed in the comments (note the extra space and margin):

<Window.Resources>

    <Style x:Key="TextStyle" TargetType="TextBlock">
        <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
        <Setter Property="Margin" Value="0, 0, -1, 0"/>
    </Style>
</Window.Resources>
<Grid>
    <DockPanel>
        <TextBlock Style="{StaticResource TextStyle}" Text="This is textbox1 "/>
        <TextBlock Style="{StaticResource TextStyle}" Text="This is textbox2 "/>
        <TextBlock Style="{StaticResource TextStyle}" Text="This is textbox3 "/>
    </DockPanel>
</Grid>

Which produces the following:

I have also tried many different amount of spaces and different values for margin on the textblock without the required result. So the correct answer does not solve my problem fully...

Answer 1

Change the StackPanel in your Template to a DockPanel. Even though you set the Max Width of the StackPanel the Content inside it will act as if there is no barrier. A DockPanel will force the barrier, and because your items are horizontal, no other changes will be needed.