How to set selected area in Listbox - wpf

Question

I need to do something like that:
It's Listbox with custom DataTemplate for elements. (I drew green a whole one element of list.)
Now I have this:
If it's real - how to change my DataTemplate(or Listbox styles) to get first resul? (Somehow to set selected area)
DataTemplate
<DataTemplate x:Key="TrackDataTemplate">
<Grid Margin="0,-5,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding FirstPlatformName}" Grid.Row="0" Grid.Column="0"/>
<Path x:Name="Node"
Margin="10,0" Grid.Row="0" Grid.Column="1"
Data="M3.1999443,36.501999 L47.300057,36.501999 47.292366,36.517475 C43.192585,44.521747 34.86105,50 25.25,50 15.638952,50 7.3074172,44.521747 3.2076359,36.517475 z M25.25,0.5 C38.919049,0.49999976 50,11.580952 50,25.25 50,27.599367 49.672657,29.87228 49.061096,32.025615 L48.919384,32.501999 1.5806161,32.501999 1.438906,32.025615 C0.82734287,29.87228 0.5000003,27.599367 0.5,25.25 0.5000003,11.580952 11.580953,0.49999976 25.25,0.5 z"
Fill="{DynamicResource white75}" Stretch="Fill"
Width="17" Height="17"/>
<Rectangle x:Name="Connection" Grid.Row="1" Grid.Column="1"
HorizontalAlignment="Center" VerticalAlignment="Top"
Fill="{DynamicResource white75}" Height="17" Width="4" Margin="10,2,10,0"/>
<TextBlock Grid.Row="1" Grid.Column="2" TextWrapping="Wrap"
Text="{Binding TsAndChannelNumber}"/>
</Grid>
</DataTemplate>
Listbox
<ListBox Grid.Column="1"
SelectedItem="{Binding SelectedTrackSegment}"
ItemsSource="{Binding SelectedTrack.Segments}"
ItemTemplate="{StaticResource TrackDataTemplate}"
Margin="30,20,30,0"/>

Answer 1

For complete control over the ListBoxItem you probably need to change the Template in ItemContainerStyle.
Heres a little test project to show what I mean.
NB Ive added 2 grids around your textblocks so that the Background Property can be changed using the Triggers.
Xaml
<ListBox x:Name="MyList">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid Margin="0,-5,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid x:Name="PlatformGrid">
<TextBlock Text="{Binding FirstPlatformName}" />
</Grid>
<Path x:Name="Node"
Margin="10,0" Grid.Row="0" Grid.Column="1"
Data="M3.1999443,36.501999 L47.300057,36.501999 47.292366,36.517475 C43.192585,44.521747 34.86105,50 25.25,50 15.638952,50 7.3074172,44.521747 3.2076359,36.517475 z M25.25,0.5 C38.919049,0.49999976 50,11.580952 50,25.25 50,27.599367 49.672657,29.87228 49.061096,32.025615 L48.919384,32.501999 1.5806161,32.501999 1.438906,32.025615 C0.82734287,29.87228 0.5000003,27.599367 0.5,25.25 0.5000003,11.580952 11.580953,0.49999976 25.25,0.5 z"
Fill="Blue" Stretch="Fill"
Width="17" Height="17"/>
<Rectangle x:Name="Connection" Grid.Row="1" Grid.Column="1"
HorizontalAlignment="Center" VerticalAlignment="Top"
Fill="Blue" Height="17" Width="4" Margin="10,2,10,0"/>
<Grid x:Name="TSGrid" Grid.Row="1" Grid.Column="2">
<TextBlock TextWrapping="Wrap" Text="{Binding TsAndChannelNumber}"/>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="True"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="PlatformGrid" Value="Red"/>
<Setter Property="Background" TargetName="TSGrid" Value="Red"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
MainWindows.cs
public MainWindow()
{
InitializeComponent();
Loaded += (s, args) =>
{
this.DataContext = this;
MyList.ItemsSource = LoadSegments();
};
}
private static List<Segment> LoadSegments()
{
var segments = new List<Segment>
{
new Segment { FirstPlatformName = "FPName01", TsAndChannelNumber = "TSNumber0(ChannelNumber0" },
new Segment { FirstPlatformName = "FPName01", TsAndChannelNumber = "TSNumber0(ChannelNumber1" },
new Segment { FirstPlatformName = "FPName01", TsAndChannelNumber = "TSNumber0(ChannelNumber2" },
new Segment { FirstPlatformName = "FPName01", TsAndChannelNumber = "TSNumber0(ChannelNumber3" },
new Segment { FirstPlatformName = "FPName01", TsAndChannelNumber = "TSNumber0(ChannelNumber4" }
};
return segments;
}
Segment.cs
public class Segment
{
public string FirstPlatformName { get; set; }
public string TsAndChannelNumber { get; set; }
}
You will ideally need to 'Edit a copy' of the ItemContainerStyle template in Blend so you get access to all the standard behaviours and then edit the Trigger IsSelected as above
Hope that helps

Answer 2

But I suggest to use two ListBox and use IsSynchronizedWithCurrentItem property to true. So when you make selection on one, it will select the same item on other automatically. And you can define your own data template for each listbox.