I have a ListView with Horizontal WrapPanel as its ItemsPanelTemplate.
I want to get rid of the blue background for selected item. It is visible only on the left of the selected item.
There are many similar question on SO and I tried a lot of the solutions and none of them worked.
This is what I have already tried:
<ListView.Resources>
<Style TargetType="{x:Type ListViewItem}">
<Style.Resources>
<!-- Foreground for Selected ListViewItem -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}"
Color="Black"/>
<!-- Background for Selected ListViewItem -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent"/>
<!--SelectedItem without focus-->
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
</Style.Resources>
</Style>
</ListView.Resources>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<EventSetter Event="Control.MouseDoubleClick" Handler="HandleSelectedItemDoubleClick"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="2" ScaleY="2" CenterX="12" CenterY="12" />
</Setter.Value>
</Setter>
<Setter Property="Panel.ZIndex" Value="150"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="Background" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" Width="210" Margin="15" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
You need to overwrite the SystemColors.HighlightBrushKey for the ListView to be Transparent (or whatever color you want)
I typically put this in the ListView.Resources so it only applies to the specific ListView, and not all ListViews in my application
<ListView.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent"/>
</ListView.Resources>
Its very close to what you have in your code already, but you need to set it for the ListView.Resources, not ListViewItem.Resources
To remove all default styling (hovering, selecting, etc.) just define a custom Template for the ItemContainer (not the Item itself):
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
Found on MSDN Forum
This is what did it for me:
<UserControl.Resources>
<DataTemplate x:Key="ItemTemplate">
<StackPanel Orientation="Vertical" Background="Transparent" Opacity="1" Width="185" MaxWidth="185">
<StackPanel Orientation="Horizontal">
<TextBlock
Margin="0,0,10,0"
Background="Transparent"
Foreground="DarkGoldenrod"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=EventTypeName, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="DarkGoldenrod"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=AccountIdentity, Mode=OneWay}" />
</StackPanel>
<TextBlock
Background="Transparent"
Foreground="DarkGoldenrod" MaxWidth="170"
FontSize="12" FontStyle="Italic" TextTrimming="WordEllipsis" ToolTip="{Binding Path=EventMessage,Mode=OneWay}"
Text="{Binding Path=EventMessage, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=EventLoggedOn, Mode=OneWay}"
TextTrimming="WordEllipsis"
ToolTip="{Binding Path=EventLoggedOn, Mode=OneWay}"
Margin="0,0,10,0" />
<StackPanel Orientation="Horizontal">
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=QualifiedCreator, Mode=OneWay}" />
</StackPanel>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="SelectedTemplate">
<StackPanel Orientation="Vertical" Background="LightGray" Opacity="1" Width="185" MaxWidth="185">
<StackPanel Orientation="Horizontal">
<TextBlock
Margin="0,0,10,0"
Background="Transparent"
Foreground="Yellow"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=EventTypeName, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="Yellow"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=AccountIdentity, Mode=OneWay}" />
</StackPanel>
<TextBlock
Background="Transparent"
Foreground="DarkGoldenrod" MaxWidth="170"
FontSize="12" FontStyle="Italic" TextTrimming="WordEllipsis" ToolTip="{Binding Path=EventMessage,Mode=OneWay}"
Text="{Binding Path=EventMessage, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=EventLoggedOn, Mode=OneWay}"
TextTrimming="WordEllipsis"
ToolTip="{Binding Path=EventLoggedOn, Mode=OneWay}"
Margin="0,0,10,0" />
<StackPanel Orientation="Horizontal">
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=QualifiedCreator, Mode=OneWay}" />
</StackPanel>
</StackPanel>
</DataTemplate>
<Style TargetType="ListViewItem" x:Key="ContainerStyle">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ContentTemplate" Value="{StaticResource ResourceKey=ItemTemplate}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True" >
<Setter Property="ContentTemplate" Value="{StaticResource ResourceKey=SelectedTemplate}" />
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
The simplest way to do this is to set the background to {x:Null} when the item is selected, using a trigger.
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="Background"
Value="{x:Null}" />
<Setter Property="BorderBrush"
Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
...
</ListView>
Related
The title seems easier than first thought, but I have a context menu that is bound to a list of items. I want to be able to display a title for the context menu to access the list. Currently it just shows up as blank and then allows me to view the list, however I need it to display a title "Add Existing Properties". Also if someone can help me with my image problem that would be much appreciated :). Instead of the first one having the image name I want that to display the name "Add Existing Properties"
<DataTemplate x:Key="AddNodeTemplate">
<Border BorderThickness="1" Background="#F7F7F7">
<Border.BorderBrush>
<DrawingBrush Viewport="8,8,8,8" ViewportUnits="Absolute" TileMode="Tile">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="#F7F7F7">
<GeometryDrawing.Geometry>
<GeometryGroup>
<RectangleGeometry Rect="0,0,50,50"/>
<RectangleGeometry Rect="50,50,50,50"/>
</GeometryGroup>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Border.BorderBrush>
<StackPanel>
<Button x:Name="ButtonAdd" Click="ButtonAdd_Click" Height="30" Width="130">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="#F7F7F7">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Source="Images/icon_plus.bmp" HorizontalAlignment="Left" Margin="5,0,0,0"/>
<TextBlock Text="Add Property" HorizontalAlignment="Center" Grid.Column="1" VerticalAlignment="Center" Foreground="LightGray" FontStyle="Italic" FontSize="12"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="#F7F7F7"/>
</Style>
</Button.Style>
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header="Add Exisiting Properties" ItemsSource="{Binding Path=AvailableProperties}">
<MenuItem.Resources>
<Style TargetType="MenuItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentPresenter Content="{Binding Name}" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Icon">
<Setter.Value>
<DataTemplate>
<StackPanel>
<Image Width="12" Height="12" Source="{Binding Icon, Converter={StaticResource ImageToSourceConverter}}" Margin="3" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</MenuItem.Resources>
</MenuItem>
<MenuItem Header="Upscale well logs"/>
<MenuItem Header="Upscale well_top attributes"/>
<MenuItem Header="Upscale point attributes"/>
<MenuItem Header="Calculate"/>
</ContextMenu>
</Button.ContextMenu>
</Button>
</StackPanel>
</Border>
</DataTemplate>
What is displayed
This style <Style TargetType="MenuItem"> in fact also applies on the top level MenuItem (the one you hardcodedly set its Header to Add Exisiting Properties). You need to use a Trigger to filter that out based on the Role property. All the sub menu items have Role of SubMenuItem, so it should be like this:
<Style TargetType="MenuItem">
<Style.Triggers>
<Trigger Property="Role" Value="SubMenuItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentPresenter Content="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
<!-- ... -->
</Style>
Edit: About the Icon, you explicitly set it to a DataTemplate which is not rendered, instead it uses the string returned by ToString() (hence the text System.Windows.DataTemplate in place of the icon). You can just remove DataTemplate like this:
<!-- define a non-shared resource of Image -->
<Style TargetType="MenuItem">
<Style.Resources>
<Image x:Key="img" x:Shared="False" Width="12" Height="12" Source="{Binding Icon, Converter={StaticResource ImageToSourceConverter}}"
Margin="3" VerticalAlignment="Center"/>
</Style.Resources>
<!-- ... -->
</Style>
<Setter Property="Icon" Value="{StaticResource img}"/>
Final solution:
<Style TargetType="MenuItem">
<Style.Resources>
<Style TargetType="ContentPresenter">
<Style.Triggers>
<Trigger Property="ContentSource" Value="Icon">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Image Source="{Binding}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Style.Resources>
<Setter Property="Icon" Value="{Binding Icon,
Converter={StaticResource ImageToSourceConverter}}"/>
<!-- ... -->
</Style>
you can either use
`
<MenuItem Header="Add Exisiting Properties" ItemsSource="{Binding Path=AvailableProperties}">
<MenuItem.Resources>
<Style TargetType="MenuItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentPresenter Content="{TemplateBinding Header}" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
or
<MenuItem Header="Add Exisiting Properties" ItemsSource="{Binding Path=AvailableProperties}">
<MenuItem.Resources>
<Style TargetType="MenuItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentPresenter Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Header}" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
`
How can I add IsSelected trigger to following ListBox, which will change Background of Border called PlaceHolder. I can't do this by adding IsSelected trigger just next to IsMouseOver. I don't want to select whole ListBoxItem, just Border. Appreciate any help!
<ListBox>
<ListBox.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</ListBox.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="2" Columns="3"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Border CornerRadius="5" x:Name="PlaceHolder" BorderBrush="PapayaWhip" BorderThickness="1">
<StackPanel Orientation="Horizontal" Width="148" Height="60">
<Image Source="{Binding Image}"></Image>
<Label VerticalAlignment="Center" x:Name="title" FontSize="12" FontWeight="SemiBold" Foreground="Gray" Content="{Binding Title}"></Label>
</StackPanel>
</Border>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="Background" Value="Bisque"></Setter>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
You will have to bind to the ListBoxItem.IsSelected property.
This should work
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
</Style.Resources>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Border CornerRadius="5" x:Name="PlaceHolder" BorderBrush="PapayaWhip" BorderThickness="1">
<StackPanel Orientation="Horizontal" Width="148" Height="60">
<Image Source="{Binding Image}"></Image>
<Label VerticalAlignment="Center" x:Name="title" FontSize="12" FontWeight="SemiBold" Foreground="Gray" Content="{Binding Title}"></Label>
</StackPanel>
</Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsSelected}" Value="True">
<Setter TargetName="PlaceHolder" Property="Border.Background" Value="Red"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
I have the following XAML to bind data to a ListBox filled with CheckBoxes:
<ListBox Background="Transparent" Grid.Column="8" Grid.Row="3" ItemsSource="{Binding Path=StakeTypes}" Foreground="White"
Name="lbStakes" ItemContainerStyle="{StaticResource SelectionListBoxItem}" SelectionChanged="lbStakes_SelectionChanged" SelectionMode="Extended">
<ListBox.ItemTemplate>
<DataTemplate>
<ListBoxItem IsSelected="{Binding IsSelected, Mode=TwoWay}" HorizontalContentAlignment="Stretch">
<CheckBox Cursor="Hand" IsChecked="{Binding IsSelected, Mode=TwoWay}" Content="{Binding Text}" HorizontalContentAlignment="Stretch" />
</ListBoxItem>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Problem is, the style for the ListBox selection is different than if I manually created each ListBox Item:
<ListBox Background="Transparent" Cursor="Hand" Grid.Column="6" Grid.Row="3" Name="lbStakes" SelectionMode="Extended">
<ListBoxItem IsSelected="True">
<CheckBox IsChecked="True" Foreground="White" Content="Low" />
</ListBoxItem>
<ListBoxItem IsSelected="True">
<CheckBox IsChecked="True" Foreground="White" Content="Medium" />
</ListBoxItem>
<ListBoxItem IsSelected="True">
<CheckBox IsChecked="True" Foreground="White" Content="High" />
</ListBoxItem>
<ListBoxItem IsSelected="True">
<CheckBox IsChecked="True" Foreground="White" Content="Highest" />
</ListBoxItem>
</ListBox>
Here are the images:
I would like it to look like the second image. Any ideas are greatly appreciated.
Update: The following is the style I am trying to apply to the ListBoxItem:
<Style x:Key="SelectionListBoxItem" TargetType="ListBoxItem">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border" Padding="3" SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource myBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The two styles are different because in your bound ListBox you are using ItemContainerStyle="{StaticResource SelectionListBoxItem}", whereas in your second snippit, the default listbox item style applies. Try removing this style assignment from the bound listbox.
<Window.Resources>
<Style x:Key="SelectionListBoxItem" TargetType="ListBoxItem">
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border" BorderBrush="Black" BorderThickness="0.5" SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ListBox Background="Transparent" Grid.Column="8" Grid.Row="3" ItemsSource="{Binding Path=IsSelectede}" Foreground="White"
Name="lbStakes" ItemContainerStyle="{StaticResource SelectionListBoxItem}">
<ListBox.ItemTemplate>
<DataTemplate>
<ListBoxItem IsSelected="{Binding IsSelected, Mode=TwoWay}" HorizontalContentAlignment="Stretch" KeyboardNavigation.TabNavigation="None">
<CheckBox Cursor="Hand" IsChecked="{Binding IsSelected, Mode=TwoWay}" Content="{Binding Text}" HorizontalContentAlignment="Stretch" />
</ListBoxItem>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
some of the binding properties are changed please correct them according to your properties .And also the style of your brush.I hope this will help.
I am try to list some data in WPF listbox control. It is the first time I am using DataTemplate in WPF. Everything is working fine except when there is no data it is not showing 'No items to display'. Below is my code.
<ListBox Name="itemsCtrl" Background="#FFE5E5E5" BorderBrush="{x:Null}" SelectionChanged="itemsCtrl_SelectionChanged" Style="{StaticResource ListStyle}">
<ListBox.Resources>
<!-- Set SelectedItem Background here -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#C2C2C2"/>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver,
RelativeSource={RelativeSource
Self}}"
Value="True">
<Setter Property="Background"
Value="#C2C2C2" />
</DataTrigger>
</Style.Triggers>
</Style>
<Style TargetType="ListBox" x:Key="ListStyle" BasedOn="{StaticResource {x:Type ListBox}}">
<Style.Triggers>
<DataTrigger
Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=Items.Count}"
Value="0"
>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<TextBlock>No items to display</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Cursor="Hand" Name="hoverDataTemplate" Orientation="Horizontal" Width="370" VerticalAlignment="Top" Height="40" HorizontalAlignment="Left" >
<Label VerticalContentAlignment="Center" HorizontalAlignment="Left" Padding="15,5,5,5" Width="330" Content="{Binding Path=EVENT_TITLE}" FontSize="12"/>
<Image Height="28" Source="/pr;component/Images/black_next.png" Stretch="Fill" Width="28" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And I am binding data source as shown below.
itemsCtrl.ItemsSource = dao.SelectDataTable(cmd).DefaultView;
When I set the style property of ListBox as ListStyle it is throwing an error
'Provide value on 'System.Windows.StaticResourceExtension' threw an exception.' Line number '292' and line position '22'.
Can anybody point out how to make it correct?
Thanks in advance.
i have used below code and it's work fine
my xaml code
<ListBox Grid.ColumnSpan="2" Grid.Row="1" Height="32" HorizontalAlignment="Left" Margin="160,2,0,0" Name="listBox1" VerticalAlignment="Top" Width="120" Style="{StaticResource Dhaval}"/>
Style look like
<Style x:Key="Dhaval" TargetType="{x:Type ListBox}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Items.Count}" Value="0">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<TextBlock>No items to display</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
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!!