Develop Reference

Listbox rows are different each time when scroll

I have listbox control with custom data template. I get the collection from webservice and bind that collection to listbox. When i scroll the list box top to bottom my listbox rows are changed and text are concatenate.
Please see the below images
This is my first screen
when scroll top to bottom once again
please compare two images my rows are changed
<Grid Margin="30,20,0,20" x:Name="MeGrid" Loaded="MeGrid_Loaded" Visibility="{Binding Path=_isMyMessage, Converter={StaticResource BoolToVisibilityConverter}}">
<StackPanel >
<TextBlock HorizontalAlignment="Right" Foreground="#00c0d4" Margin="0,0,100,0" Text="{Binding Path=CreatedDate, Converter={StaticResource TimeSinceConverter}}" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Grid Background="#ffffff" Height="auto" Width="auto" MaxWidth="300" MinWidth="50">
<StackPanel Background="White">
<RichTextBox Name="MeRich" Background="White" MaxHeight="600" Foreground="Red"
FontFamily="Segoe UI" Margin="10,0,10,0" VerticalAlignment="Center"
TextWrapping="Wrap" Height="auto"
Width="auto" MinWidth="50"
MaxWidth="300"
local:Properties.Html="{Binding Path=MessageText}">
</RichTextBox>
<readMore:Readmore Source="{Binding Path=MessageText}" Visibility="{Binding ActualHeight,
ElementName=MeRich, Converter={StaticResource ReadMoreVisibilityConverter}}" ></readMore:Readmore>
<!--<TextBlock Margin="10,0,10,0" VerticalAlignment="Center" Foreground="Black" TextWrapping="Wrap" Height="auto" Width="auto" MinWidth="50" MaxWidth="300" Text="{Binding Path=MessageText}"
/>-->
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemsSource="{Binding Path=AttachmentList}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,5,0,5">
<Button Click="Image_Download" Loaded="Button_Loaded" Tag="{Binding .}" Width="80" Height="80" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<ContentControl Content="{TemplateBinding Content}"/>
</Border>
</ControlTemplate>
</Button.Template>
<Image Source="/Resources/Drawable/c_image.png" Tag="{Binding .}" />
</Button>
<ProgressBar VerticalAlignment="Bottom" IsIndeterminate="true" Visibility="Collapsed" Style="{StaticResource CustomIndeterminateProgressBar}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
<Rectangle Margin="20,0,0,0" VerticalAlignment="Top" RadiusX="50" RadiusY="50" Width="80" Height="80">
<Rectangle.Fill>
<ImageBrush ImageSource="{Binding Path=UserPictureURL}"/>
</Rectangle.Fill>
</Rectangle>
</StackPanel>
</StackPanel>
</Grid>

C# WPF listBox vertical alignment

I have a listBox with a checkbox I want to manage the alignment through setting the vertical alignment.
I have seen several solution here e.g. set verticalContentAlignment or verticalAlignment to top but that didn't work.
I've also seen some setting a style but couldn't manage to make it done.
What I'd like is to know WHY the ONLY element is down there. I can't understand why it's stuck in the middle.
Here's my code:
<ListBox x:Name="lb2Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.8,0" >
<CheckBox x:Name="cbEasyRunManagesPcDmis" Margin="20" Content="EasyRun Manages PC-DMIS" HorizontalAlignment="Left" VerticalAlignment="Top" Click="cbTouchScreen_Click" />
</ListBox>
thanx for any help
Patrick
--- EDIT ---
As requested by Frisbee here is the complete xaml. Sorry for its length:
<Base:WindowViewBase x:Class="EasyRun.Views.MainView.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:Base="clr-namespace:Cannoli.Base;assembly=Cannoli"
xmlns:design="clr-namespace:EasyRun.Views.MainView.Design"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:System="clr-namespace:System;assembly=mscorlib"
xmlns:CannoliBorderlessWindow="clr-namespace:CannoliBorderlessWindow;assembly=Cannoli.BorderlessWindow"
d:DesignWidth="212.32" d:DesignHeight="109.92"
Title="EASY RUN 2.0" Height="600" Width="900" MinWidth="500" FontFamily="/EasyRun2.0;component/Resources/Fonts/#FontAwesome" Icon="/EasyRun2.0;component/Resources/Images/Lightning.png"
>
<d:WindowViewBase.DataContext>
<design:DesignMainViewModel />
</d:WindowViewBase.DataContext>
<i:Interaction.Behaviors>
<CannoliBorderlessWindow:CannoliBorderlessWindowBehavior/>
</i:Interaction.Behaviors>
<!-- RISORSE GLOBALI: VARIABILI -->
<Window.Resources>
<System:Double x:Key="BUTTON_HEIGHT">50</System:Double>
<System:Double x:Key="BUTTON_FONTSIZE">20</System:Double>
</Window.Resources>
<Grid x:Name="MainGrid">
<Grid.Background>
<ImageBrush ImageSource="/EasyRun2.0;component/Resources/Images/gradientWallpaper.jpg"/>
</Grid.Background>
<TextBlock Text="{Binding WelcomeMessage}" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" Margin="428,128,99.6,228"/>
<StackPanel Orientation="Vertical" VerticalAlignment="Bottom" Margin="0,0,0,20">
</StackPanel>
<TabControl TabStripPlacement="Left" Margin="0,0,-0.4,0" Background="{x:Null}">
<!-- +++++++++++++ TAB1 ++++++++++++ -->
<TabItem Name="tabItem1" HorizontalAlignment="Center" Height="80" FontSize="50" Background="{x:Null}" VerticalAlignment="Top" >
<TabItem.Header>
<StackPanel>
<TextBlock HorizontalAlignment="Center" Text=""/>
<TextBlock Name="tbTab1" HorizontalAlignment="Center" Visibility="Hidden" FontSize="20"/>
</StackPanel>
</TabItem.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border x:Name="Border1Tab1" BorderBrush="Gainsboro" BorderThickness="5" Width="200" CornerRadius="8,8,3,3" Margin="10,10,10,10.4" >
<ListBox x:Name="lbButtons1" Background="{x:Null}" BorderBrush="{x:Null}" Margin="10,10,10,10" />
</Border>
<Border x:Name="Border2Tab1" BorderBrush="Gainsboro" MinWidth="100" BorderThickness="5" CornerRadius="8,8,3,3" Grid.Column="1" Margin="10,10,9.2,10" />
</Grid>
</TabItem>
<!-- +++++++++++++ TAB2 ++++++++++++ -->
<TabItem Name="tabItem2" HorizontalAlignment="Center" Height="80" FontSize="50">
<TabItem.Header>
<StackPanel>
<TextBlock Text=""/>
<TextBlock Name="tbTab2" Visibility="Hidden" FontSize="20"/>
</StackPanel>
</TabItem.Header>
<TabItem.Background>
<ImageBrush/>
</TabItem.Background>
</TabItem>
<!-- +++++++++++++ TAB3 ++++++++++++ -->
<TabItem Name="tabItem3" HorizontalAlignment="Center" Height="80" FontSize="50" Background="{x:Null}" >
<TabItem.Header>
<StackPanel>
<TextBlock Text="" HorizontalAlignment="Center" />
<TextBlock Name="tbTab3" Visibility="Hidden" FontSize="20"/>
</StackPanel>
</TabItem.Header>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border x:Name="Border1Tab3" BorderBrush="Gainsboro" BorderThickness="5" Width="200" CornerRadius="8,8,3,3" Margin="10,10,10,10" >
<ListBox x:Name="lbButtons3" FontSize="{StaticResource BUTTON_FONTSIZE}" HorizontalContentAlignment="Stretch" Background="{x:Null}" BorderBrush="{x:Null}" >
<Button Name="bt1Tab3" Background="{x:Null}" Content="1" Click="Button_Click" />
<Button Name="bt2Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Content="2" Click="Button_Click"/>
<Button Name="bt3Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Content="3" Click="Button_Click"/>
<Button Name="bt4Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Content="4" Click="Button_Click"/>
<Button Name="bt5Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Content="5" Click="Button_Click"/>
<Button Name="bt6Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Content="6" Click="Button_Click"/>
<Button Name="bt7Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Content="7" Click="Button_Click"/>
<Button Name="bt8Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Content="8" Click="Button_Click"/>
</ListBox>
</Border>
<Border x:Name="Border2Tab3" BorderBrush="Gainsboro" MinWidth="100" BorderThickness="5" CornerRadius="8,8,3,3" Grid.Column="1" Margin="10,10,10,10" >
<StackPanel >
<ListBox x:Name="lb1Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.4,0" d:IsHidden="True" >
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="lbLanguage" Margin="20" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Center" TextAlignment="Center" Grid.Row="1"><Run Text="Language"/></TextBlock>
<ComboBox x:Name="cmbLanguages" Margin="20" HorizontalAlignment="Left" VerticalAlignment="Center" Width="246" Height="35" DropDownClosed="cmbLanguages_DropDownClosed"/>
</StackPanel>
<CheckBox x:Name="cbTouchScreen" Margin="20" Content="Use touch screen" HorizontalAlignment="Left" VerticalAlignment="Top" Click="cbTouchScreen_Click" />
<CheckBox x:Name="cbEnableImages" Margin="20" Content="Enable Images" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel Name="spImageDimension" Orientation="Horizontal">
<TextBlock x:Name="lbImageDimension" Margin="20" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Center" TextAlignment="Center"><Run Text="Image dimension"/></TextBlock>
<ComboBox x:Name="cmbImageDimension" Margin="20" Text="250 px" HorizontalAlignment="Left" DropDownClosed="cmbImageDimension_DropDownClosed" VerticalAlignment="Center" Width="246" Height="35" IsEditable="True">
<TextBlock ><Run Text="50 px"/></TextBlock>
<TextBlock ><Run Text="100 px"/></TextBlock>
<TextBlock ><Run Text="150 px"/></TextBlock>
<TextBlock ><Run Text="200 px"/></TextBlock>
<TextBlock ><Run Text="250 px"/></TextBlock>
</ComboBox>
</StackPanel>
</ListBox>
<ListBox x:Name="lb2Tab3" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Top" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.8,0" >
<CheckBox x:Name="cbEasyRunManagesPcDmis" Margin="20" Content="EasyRun Manages PC-DMIS" HorizontalAlignment="Left" VerticalAlignment="Top" Click="cbTouchScreen_Click" />
</ListBox>
<ListBox x:Name="lb3Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.4,0" />
<ListBox x:Name="lb4Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.4,0" d:IsHidden="True" >
</ListBox>
<ListBox x:Name="lb5Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.4,0" d:IsHidden="True" >
</ListBox>
<ListBox x:Name="lb6Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.4,0" d:IsHidden="True" >
</ListBox>
<ListBox x:Name="lb7Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.4,0" d:IsHidden="True" >
</ListBox>
<ListBox x:Name="lb8Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.4,0" d:IsHidden="True" >
</ListBox>
</StackPanel>
</Border>
</Grid>
</TabItem>
</TabControl>
</Grid>

You need to align the ListBox
<ListBox x:Name="lb2Tab3" HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Top"
If that does not work then post more of your XAML

So the problem was related with the fact that there are several listBox one on top of the other. I thought that making them hidden was enough but when I painted the second listBox in black I saw that it was not starting from the top (see image).
So the solution was to set Visibility = Collapsed for all the listbox that are not in use.
Thanks to kirotab for putting me on the right path. Not sure if I can vote your comment.

WPF Inner Collection virtualization not working

I have implemented below mentioned code in WPF in that I have implemented virtualization of lazy loading but it's not work when my inner collection have a 1000 of record then it will take much time to load on screen.
<ListBox x:Name="Mappingcontrol" Grid.Row="1"
DataContext="{Binding ElementName=Grids,Path=DataContext}"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
ItemsSource="{Binding Path=MultiMappingCollectionList, Mode=TwoWay}"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Recycling"
BorderThickness="0" BorderBrush="Transparent"
Background="Transparent"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
ItemContainerStyle="{StaticResource TransparentListBoxStyle}">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Padding="0,10,0,10" BorderThickness="0,0,0,1"
BorderBrush="{StaticResource Gray5SolidBrush}">
<Grid x:Name="Gridmain" Margin="4,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="default" Width="0.5*" SharedSizeGroup="default" />
<ColumnDefinition x:Name="atrioValue" Width="1*"
SharedSizeGroup="atrioValue" />
<ColumnDefinition x:Name="externalValue" Width="2*"
SharedSizeGroup="externalValue" />
</Grid.ColumnDefinitions>
<ToggleButton VerticalAlignment="Top"
HorizontalAlignment="Left"
Style="{DynamicResource ToggleButtonStyle}"
Margin="30,12,10,10" IsTabStop="False" Width="25"
Height="25"
IsChecked="{Binding IsDefault, Mode=TwoWay}">
<TextBlock Grid.Column="1" Margin="0,15,10,10" HorizontalAlignment="Left"
VerticalAlignment="Top"
Text="{Binding Path=Description}"
Style="{StaticResource ContentDataText}"
Name="txtDescription" />
<ListBox x:Name="GroupListBox" Grid.Column="2"
ItemsSource="{Binding Path=MultiMapping,Mode=TwoWay}"
HorizontalContentAlignment="Stretch"
BorderThickness="0"
BorderBrush="Transparent"
Background="Transparent"
VerticalContentAlignment="Stretch"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Recycling"
VirtualizingStackPanel.CacheLength="2,3"
VirtualizingStackPanel.CacheLengthUnit="Page"
ItemContainerStyle="{StaticResource TransparentListBoxStyle}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" CanVerticallyScroll="True" Height="200">
<telerik:RadWatermarkTextBox x:Name="ExternalValueTextBox"
HorizontalAlignment="Left"
TabIndex="100"
KeyboardNavigation.TabIndex="100"
IsTabStop="True"
Width="250"
MaxLength="35"
TextWrapping="Wrap"
Validation.ErrorTemplate="{DynamicResource CustomErrorTemplate}"
Text="{Binding Path=ExternalValue, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
PreviewTextInput="ExternalValueTextBox_OnPreviewTextInput"
Style="{DynamicResource RadWatermarkTextBoxDefault}"
Visibility="{Binding Path=ExternalValue,Converter={StaticResource StarVisibilityConverter}}"
Margin="0,5,0,0">
</telerik:RadWatermarkTextBox>
<Button x:Name="DeleteButton" Background="Transparent"
BorderThickness="0"
BorderBrush="Transparent"
CommandParameter="{Binding}"
Command="{Binding DataContext.RemoveGrouplistCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Visibility="{Binding Path=RemoveButtonVisibility,Converter={StaticResource BooleanHiddenVisibleConverter},Mode=TwoWay}"
Margin="15,5,15,0"
Style="{DynamicResource ButtonInvisibleNoColorEffects}">
<Button.Content>
<Rectangle Style="{StaticResource SmallCloseIcon}" />
</Button.Content>
</Button>
<Grid x:Name="AddGrid"
Visibility="{Binding Path=AddbuttonVisibility,Converter={StaticResource BooleanVisibilityConverter}}">
<controls:ActionImageButton x:Name="AddButton"
Content="Add Another"
DataContext="{Binding ElementName=Root,Path=DataContext}"
CommandParameter="{Binding ElementName=txtDescription,Path=Text}"
Command="{Binding AddGrouplistCommand}"
HorizontalAlignment="Right"
VerticalAlignment="Center"
IsEnabled="{Binding ElementName=ExternalValueTextBox,Path=Text,Converter={StaticResource StarVisibilityConverter},ConverterParameter=CanAdd}"
Margin="5,5,30,5"
Style="{StaticResource ActionImageButtonMedium}" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
It would be great help if anyone can light on me what's I am doing wrong in it
Thanks in advance.

Add xaml to top of Listbox

I have a listbox which is filled up with items taken from a data contract. I want to add a bit of xaml to the top of the listbox which takes data from another data contract. How do i go about doing this?
<phone:PivotItem>
<ScrollViewer>
<StackPanel>
<ListBox x:Name="StatusCommentsList"
Background="Transparent"
ItemsSource="{Binding StatusComments}"
u:ScrollViewerMonitor.AtEndCommand="{Binding FetchMoreStatusCommentsDataCommand}" VerticalContentAlignment="Top">
<!-- THIS DOESNT WORK-->
<ListBoxItem>
<Grid Height="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="389"/>
</Grid.ColumnDefinitions>
<StackPanel Height="auto" Grid.Column="0" Background="Transparent">
<Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding Notification.context.data.created_by.image.thumbnail_link}" Width="62" Height="62"></Image>
</Border>
</StackPanel>
<StackPanel Height="auto" Grid.Column="1" Width="389" MaxWidth="389" Orientation="Vertical" >
<TextBlock TextWrapping="Wrap" Text="{Binding Notification.context.data.created_by.name}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
<TextBlock TextWrapping="Wrap" Text="{Binding Notification.context.data.created_on}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
<TextBlock TextWrapping="Wrap" Text="{Binding Notification.context.data.rich_value}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
</StackPanel>
</Grid>
</ListBoxItem>
<!-- /THIS DOESNT WORK -->
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel VerticalAlignment="Top" Margin="5,0,0,0">
<Button Style="{StaticResource JamesTransparentButton}" Padding="-5,0,-5,-5" Margin="-7,-12,-7,-7" Height="auto" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" UseLayoutRounding="True" FontSize="0.01">
<Grid Height="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="389"/>
</Grid.ColumnDefinitions>
<StackPanel Height="auto" Grid.Column="0" Background="Transparent">
<Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding created_by.image.thumbnail_link}" Width="62" Height="62"></Image>
</Border>
</StackPanel>
<StackPanel Height="auto" Grid.Column="1" Width="389" MaxWidth="389" Orientation="Vertical" >
<TextBlock Text="{Binding created_by.name}" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" />
<TextBlock Text="{Binding created_on}" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" />
<TextBlock TextWrapping="Wrap" Text="{Binding value}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
</StackPanel>
</Grid>
</Button>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
</phone:PivotItem>
I tried just adding a new item to the listbox but the data contract would mean i have to instantiate all the sub levels of objects and it would suckkk as they are different domains.
Keep in mind that i want the entire screen to scroll in union... so that it looks like one big long list, regardless of the first being like a default value.

Put the first item outside the ListBox and disable ScrollViewer for the ListBox so the whole thing will scroll together. Here's an example where the item is a simple TextBlock. You can change it to suit your requirement.
<ScrollViewer>
<StackPanel Orientation="Vertical">
<TextBlock Text="Item 1"/>
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding item}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>

Creating multiple tabitems from tabitem template in WPF C# XAML

I read many tutorials from MSDN about WPF styling and datatemplating and contenttemplating but no success.
I need to make same TabItems in my TabControl and I made manually TabItem which i want to use as host for Style and ContentTemplate for other TabItems in TabControl
<TabItem Header="1.semestar">
<Grid x:Name="GridSemestra">
<Grid.DataContext>
<ViewModel:PredmetVM/>
</Grid.DataContext>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100"/>
<ColumnDefinition MinWidth="30"/>
</Grid.ColumnDefinitions>
<Grid.Children>
<ListBox x:Name="PredmetiLW" Grid.Row="0" BorderThickness="0" Grid.Column="0" ItemsSource="{Binding Predmeti}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Naziv}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox x:Name="RadioLW" Grid.Row="0" Grid.Column="1" BorderThickness="0" ItemsSource="{Binding Predmeti}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Ocjena}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Label Content="Prosjek Semestra :" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0" />
<Label x:Name="_prosjekSemestra" Grid.Row="1" Grid.Column="1" ContentStringFormat="F2" Content="{Binding _prosjek, Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Label Content="Ostvareni ECTS-ovi :" HorizontalAlignment="right" VerticalAlignment="Center" Grid.Row="2" Grid.Column="0" />
<Label x:Name="_ectsSemestra" Grid.Row="2" Grid.Column="1" Content="{Binding _ectsovi, Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid.Children>
</Grid>
</TabItem>

This is how you define a style for any TabItem. In the example I created a white border and a black background for the Header content of the TabItem:
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border BorderBrush="White" BorderThickness="5" Margin="2">
<Grid Width="100" Height="100" Background="Black">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
RecognizesAccessKey="True"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

If you want your items to render with same template set the ItemTemplate for your TabControl like below:
<TabControl ItemsSource="{Binding MyTabItems}">
<TabControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="GridSemestra">
<Grid.DataContext>
<ViewModel:PredmetVM/>
</Grid.DataContext>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100"/>
<ColumnDefinition MinWidth="30"/>
</Grid.ColumnDefinitions>
<Grid.Children>
<ListBox x:Name="PredmetiLW" Grid.Row="0" BorderThickness="0" Grid.Column="0" ItemsSource="{Binding Predmeti}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Naziv}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox x:Name="RadioLW" Grid.Row="0" Grid.Column="1" BorderThickness="0" ItemsSource="{Binding Predmeti}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Ocjena}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Label Content="Prosjek Semestra :" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0" />
<Label x:Name="_prosjekSemestra" Grid.Row="1" Grid.Column="1" ContentStringFormat="F2" Content="{Binding _prosjek, Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Label Content="Ostvareni ECTS-ovi :" HorizontalAlignment="right" VerticalAlignment="Center" Grid.Row="2" Grid.Column="0" />
<Label x:Name="_ectsSemestra" Grid.Row="2" Grid.Column="1" Content="{Binding _ectsovi, Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid.Children>
</Grid>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
Doing this, for all the items in property MyTabItems, TabItems will be generated