Develop Reference

C# WPF UI freeze while datatable binding with Listbox

hi I am using DataTable for binding data with Listbox
DataTable row count = 1000+ and I have to load all row.
and when I binding
// Inside BackgroundThread
DataTable table = GetDataFromServer(); // Get Data (DataTable row count = 1000+)
this.Dispatcher.Invoke(new Action(() =>
{
FilteredList.DataContext = table ; // UI Hangs Progress bar freeze around 20-30+ seconds
}), DispatcherPriority.Background);
XML Code
<Grid Grid.Row="0" x:Name="gridFilteredList" Visibility="Collapsed">
<ListView Style="{DynamicResource MyListView}" Grid.Row="0" AllowDrop="True" x:Name="FilteredList"
IsSynchronizedWithCurrentItem="False" ItemsSource="{Binding Mode=OneWay}"
BorderThickness="0" BorderBrush="Black" ScrollViewer.ScrollChanged="syncList_ScrollChanged"
ItemContainerStyle="{StaticResource BorderedListViewItemStyle}" SelectedItem="{x:Null}"
Background="{DynamicResource DefaultMSBackgroundColor}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
HorizontalContentAlignment="Stretch" ScrollViewer.CanContentScroll="False" Focusable="True" SelectionChanged="syncList_SelectionChanged" SelectionMode="Single" MouseMove="syncList_MouseMove"
MouseEnter="syncList_MouseEnter"
MouseLeave="syncList_MouseLeave">
<ListView.ItemTemplate>
<DataTemplate>
<Grid x:Name="FileItemGrid" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Cursor="Hand">
<Grid Margin="0 10 10 10" Height="35" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Cursor="Hand" Source="{Binding Path=imagestring, Mode=OneWay}" VerticalAlignment="Center" Margin="5,0" HorizontalAlignment="Center" Style="{StaticResource Image32StyleNearestNeighbor}" />
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Cursor="Hand" Foreground="#FF333333" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap" VerticalAlignment="Center" Text="{Binding Path=name, Mode=OneTime}" />
<TextBlock Grid.Column="1" Cursor="Hand" Foreground="#FF333333" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap" VerticalAlignment="Center" Text="{Binding Path=size, Mode=OneTime}" HorizontalAlignment="Right" />
</Grid>
<TextBlock Grid.Row="1" FontSize="11" TextTrimming="CharacterEllipsis" VerticalAlignment="Center" >
<Run Text="{Binding Path=formattedtime, Mode=OneTime}" Foreground="#FFB3B3B3"/>
<Run Text="-"/>
<Run Text="{Binding Path=activity, Mode=OneTime}" Foreground="{Binding Path=StatusLabelColour, Mode=OneTime}"/>
</TextBlock>
</Grid>
<Grid Grid.Column="1" Margin="5 0 0 0" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<Grid Visibility="{Binding Path=DeleteImageVisible, Mode=OneWay}" ToolTip="Click to recover file" Name="SyncDelete"
Cursor="Hand" MouseLeftButtonDown="SyncDelete_MouseLeftButtonDown" Style="{DynamicResource GridWithBackground}">
<Image x:Name="imgDelete" SnapsToDevicePixels="True" Source="pack://application:,,,/Resources/UserControl/SyncSummary_Delete.png"
Style="{StaticResource Image16StyleHighQuality}"/>
</Grid>
<Image Name="errorImage" VerticalAlignment="Center" Cursor="Hand" HorizontalAlignment="Center" Style="{StaticResource Image16StyleHighQuality}"
Source="{Binding Path=errorStringImage, Mode=OneWay}" ToolTip="{Binding Path=errorStringToolTip, Mode=OneWay}" ToolTipService.ShowDuration="50000" UseLayoutRounding="True" />
</Grid>
<Button Grid.Column="1" x:Name="btnShare" Content="Share" Click="btnShare_Click" Margin="0,0,10,0" >
<Button.Style>
<Style TargetType="Button">
<Setter Property="Foreground" Value="White" />
<Setter Property="Height" Value="30" />
<Setter Property="Padding" Value="10,0,10,0" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="Background" Value="{DynamicResource DefaultMSForegroundColor}" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Black" />
</Trigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListViewItem}},Path=IsMouseOver, Mode=OneWay}"
Value="True" />
<Condition Binding="{Binding Path=ShareBtnVisible, Mode=OneWay}"
Value="Visible" />
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="Visibility" Value="Visible" />
</MultiDataTrigger.Setters>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Should i use ObservationCollection or Any other design pattern for solve freeze issue ?

You are setting the ScrollViewer.CanContentScroll attached property of the ListView to false which effectively disables the built-in UI virtualization and this affects the performance negatively.
Don't set this property to false if you care about rendering and scrolling performance.

Put your code in a Task (own thread) and your UI won't freeze anymore. You'll always have this problem when calling long running operations in the UI thread.

Creating a good-looking SplitView in UWP

I followed a tutorial for adding a SplitView control to my page. The code looks like:
<SplitView x:Name="MainSplitView" DisplayMode="CompactOverlay" IsPaneOpen="False" CompactPaneLength="50" OpenPaneLength="150">
<SplitView.Pane>
<StackPanel Background="Gray">
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click" />
<StackPanel Orientation="Horizontal">
<Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" />
<TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="SettingsButton" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" FontSize="18" />
<TextBlock Text="Settings" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="AboutButton" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" FontSize="18" />
<TextBlock Text="About" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
SplitView content here
</SplitView.Content>
</SplitView>
But the final result looks like this. Not really cool.
How can I reach something like the Insider Hub's?

There is a very nice example made by Justin Xin Liu on GitHub. Take a look at that for tips! ( I use same approach )
https://github.com/JustinXinLiu/SwipeableSplitView
So inside the pane use a listview like so:
<SplitView.Pane>
<ListBox ItemsSource="{x:Bind ViewModel.MenuItems}" SelectedItem="{x:Bind ViewModel.SelectedMenuItem, Mode=TwoWay, Converter={StaticResource ObjectToMenuItemConverter}}" ItemContainerStyle="{StaticResource MenuListBoxItemStyle}">
<ListBox.ItemTemplate>
<DataTemplate x:DataType="Presentation:MenuItem">
<StackPanel Orientation="Horizontal" Height="48">
<TextBlock Grid.RowSpan="2" Text="{x:Bind Icon, Mode=OneWay}" Style="{StaticResource IconTextBlockStyle}" />
<TextBlock Grid.Column="1" Text="{x:Bind Title, Mode=OneWay}" Style="{StaticResource MenuTitleTextBlockStyle}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</SplitView.Pane>
And the first TextBlock is filled with an Icon using following style
<Style x:Key="IconTextBlockStyle" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
<Setter Property="FontSize" Value="24" />
<Setter Property="Width" Value="48" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="TextAlignment" Value="Center" />
</Style>
There is also a MenuListBoxItemStyle style for the ListBox, this will enable some animation. You can see if you want it or not.
If you want to see how I implemented it in my app, you can take a look at https://github.com/AppCreativity/Kliva. But that has an already more complex setup for the side pane, so maybe not easy to follow. On the other hand I haven't implemented the swipe guesture that Justin does in his project so maybe my app design is more like the one you want.

Using AppStudio Libraries
https://github.com/wasteam/waslibs
ShellPage
<Page
x:Name="PageLayout"
x:Class="UniversalProject.UWP.ShellPage"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:was_control="using:AppStudio.Uwp.Controls"
xmlns:controlEx="using:UniversalProject.UWP.Built_In.ControlEx"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
mc:Ignorable="d"
KeyUp="OnKeyUp">
<Page.Resources>
<DataTemplate x:Key="NavigationItemTemplate">
<Grid Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentControl
Margin="12,10"
Content="{Binding Icon}"
Foreground="{StaticResource NavigationPaneText}"/>
<ContentControl
Margin="6,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{Binding Image}" />
<TextBlock
Grid.Column="1"
Margin="16,10"
Text="{Binding Caption}"
Foreground="{StaticResource NavigationPaneText}" />
<ToolTipService.ToolTip>
<TextBlock Text="{Binding Caption}" Foreground="{ThemeResource SystemBaseHighColor}"/>
</ToolTipService.ToolTip>
</Grid>
</DataTemplate>
<Style x:Key="NavigationSeparatorStyle" TargetType="ContentControl">
<Setter Property="Margin" Value="8,0" />
<Setter Property="MinHeight" Value="7"/>
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Line
X1="0"
X2="1"
Stretch="UniformToFill"
Stroke="{StaticResource NavigationPaneText}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="DefaultHeaderTemplate">
<Grid Background="Transparent">
<TextBlock
Margin="14,8"
Text="{Binding}"
Style="{StaticResource AppBarTitleStyle}" />
</Grid>
</DataTemplate>
<Style x:Key="ListViewItemContainerStyle" TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Padding" Value="2,0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
ContentTransitions="{TemplateBinding ContentTransitions}"
SelectionCheckMarkVisualEnabled="True"
CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
FocusBorderBrush="{StaticResource NavigationPaneText}"
FocusSecondaryBorderBrush="{StaticResource NavigationPaneText}"
PlaceholderBackground="Transparent"
PointerOverForeground="{StaticResource NavigationPaneText}"
SelectedForeground="{StaticResource NavigationPaneText}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
ContentMargin="{TemplateBinding Padding}"
CheckMode="Inline">
<ListViewItemPresenter.SelectedBackground>
<SolidColorBrush Color="{StaticResource SystemAccentColor}" Opacity="0.6"/>
</ListViewItemPresenter.SelectedBackground>
<ListViewItemPresenter.SelectedPressedBackground>
<SolidColorBrush Color="{StaticResource SystemAccentColor}" Opacity="1.0"/>
</ListViewItemPresenter.SelectedPressedBackground>
<ListViewItemPresenter.SelectedPointerOverBackground>
<SolidColorBrush Color="{StaticResource SystemAccentColor}" Opacity="0.8"/>
</ListViewItemPresenter.SelectedPointerOverBackground>
<ListViewItemPresenter.PointerOverBackground>
<SolidColorBrush Color="{StaticResource SystemAccentColor}" Opacity="0.1"/>
</ListViewItemPresenter.PointerOverBackground>
<ListViewItemPresenter.PressedBackground>
<SolidColorBrush Color="{StaticResource SystemAccentColor}" Opacity="0.3"/>
</ListViewItemPresenter.PressedBackground>
</ListViewItemPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid x:Name="MainLayout" Background="{StaticResource AppBackground}">
<was_control:ShellControl
x:Name="shell"
Header="App Name"
NavigationItems="{Binding NavigationItems}"
BorderBrush="{StaticResource AppBarBackground}"
HeaderBackground="{StaticResource HeaderAppbarBackground}"
HeaderForeground="{StaticResource AppBarForeground}"
HeaderTemplate="{StaticResource DefaultHeaderTemplate}"
NavigationForeground="{StaticResource NavigationPaneText}"
SeparatorStyle="{StaticResource NavigationSeparatorStyle}"
NavigationBackground="{StaticResource NavigationPaneBackground}"
HamburgerBackground="{StaticResource SystemControlBackgroundAccentBrush}"
HamburgerBorderBrush="{StaticResource NavigationPaneButton}"
HamburgerForeground="{StaticResource NavigationPaneText}"
NavigationItemTemplate="{StaticResource NavigationItemTemplate}"
NavigationSubItemTemplate="{StaticResource NavigationItemTemplate}"
ListViewItemContainerStyle="{StaticResource ListViewItemContainerStyle}">
<was_control:ShellControl.CommandBar>
<CommandBar x:Name="commandbar" RequestedTheme="Dark">
<CommandBar.SecondaryCommands>
<controlEx:SecondaryIconButton Glyph="" RequestedTheme="Dark"
Foreground="{StaticResource NavigationPaneText}"
x:Name="createButton"
x:Uid="CreateNewItemLabel"></controlEx:SecondaryIconButton>
<controlEx:SecondaryIconButton Glyph="" RequestedTheme="Dark"
Foreground="{StaticResource NavigationPaneText}"
x:Name="importExportButton"
x:Uid="ImportExportLabel" ></controlEx:SecondaryIconButton>
</CommandBar.SecondaryCommands>
<CommandBar.PrimaryCommands>
</CommandBar.PrimaryCommands>
</CommandBar>
</was_control:ShellControl.CommandBar>
<Grid x:Name="contentgrid" Margin="0,0,0,0">
<Frame x:Name="frame" />
</Grid>
</was_control:ShellControl>
</Grid>

The modern way of doing this is using NavigationView. It looks great by default and requires less messing around to implement. It's built-in to the OS since build 16299 and available in WinUI 2 for downlevel support.

WPF Resource section not effecting my Label control in the view

I have created a style for a “required field” label which should place a red asterisk “*” in front of the label. Here is my xaml taken from the Application.Resources section of my WPF application:
<Style TargetType="Label" x:Key="RequiredField">
<Setter Property="Margin" Value="0,0,5,0" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Content">
<Setter.Value>
<ControlTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="*" Foreground="Red" FontSize="10"/>
<TextBlock Text="{Binding}" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The xaml in my view uses the resource like this:
<Label Grid.Row="1" Grid.Column="0" Style="{StaticResource RequiredField}" Content="Name:"/>
Annoyingly it doesn’t appear to modify the label. Can anyone tell me what I’ve done wrong?

Well your style seems to be wrong. I would try it that way.
<Style TargetType="Label" x:Key="RequiredField">
<Setter Property="Margin" Value="0,0,5,0" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Label}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="*" Foreground="Red" FontSize="10"/>
<TextBlock Text="{TemplateBinding Content}" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This should do the trick, but it's totally untested.

The template is assigned to the Content property. That is wrong.
Instead it can be assigned to the Template property but in this case it might be better to use the Validation.ErrorTemplate property because it is meant for validation adorners.
From this article:
<ControlTemplate x:Key="TextBoxErrorTemplate">
<StackPanel>
<StackPanel Orientation="Horizontal">
<Image Height="16" Margin="0,0,5,0"
Source="Assets/warning_48.png"/>
<AdornedElementPlaceholder x:Name="Holder"/>
</StackPanel>
<Label Foreground="Red" Content="{Binding ElementName=Holder,
Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"/>
</StackPanel>
</ControlTemplate>
<TextBox x:Name="Box"
Validation.ErrorTemplate="{StaticResource TextBoxErrorTemplate}">

How do I change the selected item 'text' foreground color in a listbox

I have a ListBox with a DataTemplate. I'm trying to change the color of the text/foreground to white for the selected item in the listbox. I have seriously tried like 30 different ways to do it that I've found on google. I just can't get it to work. How can I change the foreground color?
Also, I would like to point out that I would like to not rely on the method that uses the SystemColors because I read that it won't work in .net 4.5 so I don't want it to break when we move our application to 4.5 some day. Here is my listbox xaml:
<ListBox Grid.Row="1" x:Name="Alerts" ItemsSource="{Binding Alerts}" HorizontalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled" AlternationCount="2">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Label Content="{Binding Type}" HorizontalAlignment="Left" Padding="1,1,1,0" />
<Label Content=" - " Padding="1,1,1,0"></Label>
<Label Content="{Binding Date}" HorizontalAlignment="Left" Padding="1,1,1,0" />
</StackPanel>
<Label Grid.Row="1" Content="{Binding Message}" HorizontalAlignment="Left" Margin="0" Padding="1,0,1,1" />
</Grid>
<Button Grid.Column="1"
CommandParameter="{Binding .}"
Command="{Binding Path=DataContext.Commands.RemoveAlertCommand, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}"
Content="X" HorizontalAlignment="Right" Width="Auto" Height="Auto" Foreground="#FFD40000" FontWeight="Bold" VerticalAlignment="Center" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="LightGray"></Setter>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="Ivory"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>

What about this:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
In a DataTemplate that uses TextBlocks, the Foreground property would simply be inherited:
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"/>
</DataTemplate>
</ListBox.ItemTemplate>
In your DataTemplate with Label controls Foreground value inheritance does not work (see here why). But you may always bind to the Foreground property of the ListBoxItem like this:
<ListBox.ItemTemplate>
<DataTemplate>
<Label Content="{Binding}"
Foreground="{Binding Foreground,
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType=ListBoxItem}}"/>
</DataTemplate>
</ListBox.ItemTemplate>
Or you may simply replace your Labels with TextBlocks.

WPF StackPanel Layout Question

I'm trying to create a layout similar to this:
alt text http://img20.imageshack.us/img20/3533/stackn.png
Here's the code I have:
<StackPanel TextBlock.FontFamily="Segoe UI" Orientation="Horizontal">
<StackPanel HorizontalAlignment="Stretch" Width="Auto">
<TextBlock Padding="5,0,5,0" FontSize="12" FontWeight="Bold" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}" />
<TextBlock Padding="5,0,5,0" FontSize="12" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Id}" />
</StackPanel>
<StackPanel>
<TextBlock Padding="5,0,5,0" FontSize="10" Text="Delete">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Padding="5,0,5,0" FontSize="10" Text="Move">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</StackPanel>

Why don't you use a Grid for this?
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="{Binding Title}" />
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Text="Move" />
</StackPanel>
</Grid>

I think you might be better off with a grid as your parent element. Omitting your styles and what not, here's the XAML for the layout in your drawing.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="50" /> <!-- or some other fixed width -->
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<!-- left hand stackpanel content -->
</StackPanel>
<StackPanel Grid.Column="1">
<!-- right hand StackPanel content -->
</StackPanel>
</Grid>

You don't really want a StackPanel for your red container. I'd go with a DockPanel, dock the rightmost blue panel to the right, and ensure LastChildFill is on to ensure the leftmost blue panel expands to the window width.

Here is the code for what I get from your post:
<DockPanel TextBlock.FontFamily="Segoe UI" LastChildFill="True">
<StackPanel DockPanel.Dock="Right">
<TextBlock Padding="5,0,5,0" FontSize="10" Text="Delete">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Padding="5,0,5,0" FontSize="10" Text="Move">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
<StackPanel HorizontalAlignment="Stretch" Width="Auto">
<TextBlock Padding="5,0,5,0" FontSize="12" FontWeight="Bold" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}" />
<TextBlock Padding="5,0,5,0" FontSize="12" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Id}" />
</StackPanel>
</DockPanel>
Hope this helps!!