I have a list of items which a user can select and I would like to add an explanation text. So far I have this code
<TabItem Name="TabItem02" Header="">
<ListBox Name="listBox01" VerticalAlignment="Stretch" SelectionMode="Multiple" HorizontalAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectedValuePath="Content">
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<CheckBox Margin="5,2" IsChecked="{TemplateBinding IsSelected}" Grid.Column="0" VerticalAlignment="Top">
<ContentPresenter VerticalAlignment="Center">
<ContentPresenter.ContentTemplate>
<DataTemplate>
<TextBlock Text="{TemplateBinding Content}" TextWrapping="Wrap" />
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
</CheckBox>
<Expander Header="Explanation" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right" FlowDirection="RightToLeft">
<TextBlock TextWrapping="Wrap" FlowDirection="LeftToRight"/>
</Expander>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Resources>
<ListBoxItem Name="List1Item01" IsEnabled="False"/>
<ListBoxItem Name="List1Item02" IsEnabled="False"/>
<ListBoxItem Name="List1Item03" IsEnabled="False"/>
<ListBoxItem Name="List1Item04" IsEnabled="False"/>
<ListBoxItem Name="List1Item05" IsEnabled="False"/>
</ListBox>
</TabItem>
And at the moment I am changing the content of each ListBox through a ressourcefile with this code-behind
foreach (ListBox listBox in ListBoxes)
{
foreach (ListBoxItem item in listBox.Items) item.Content = resourceManager.GetString(item.Name);
}
I would like to change the text of the second TextBlock (the one in the Expander) according to the ListBoxItem it belongs to as easy as the ListBox content itself through the ressourcefile. I would prefer not to create a separate Expander + TextBlock for each ListBoxItem with a separate name.
So if anyone has a solution for my problem, I would really appreciate that.
I have a CommandListBox which has the Itemsource from a ListCollectionView.
I want to move items within groups up/down and update this in the UI. Right now I have to refresh the whole view to show the new sorting and then the expanders will be closed and the user has to select an expander again.
How can I move items within groups up and down in position in the UI?
controls:CommandListBox Grid.IsSharedSizeScope="True"
Visibility="{Binding IsSearchperformed, Converter={StaticResource BooleanToVisibilityConverter}}"
Grid.Column="2"
HorizontalAlignment="Stretch"
SelectedItem="{Binding SelectedResult}"
ToolbarItems="{Binding ToolBarItems}"
ItemsSource="{Binding SearchResults, UpdateSourceTrigger=PropertyChanged}">
<ItemsControl.Resources>
<ResourceDictionary>
<Style x:Key="GroupHeaderStyle"
TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander x:Name="exp" IsExpanded="{Binding Path=Items[0].IsExpanded}" Margin="0,0,0,30" >
<Expander.Header >
<TextBlock Text="{Binding Path=Name}" FontSize="18" Padding="0" Margin="0"/>
</Expander.Header>
<Grid Margin="20 0 0 0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentPresenter Grid.Column="0"
Grid.Row="0"
Content="{Binding Path=Items[0].DisplayRepresentation.Header}"/>
<ItemsPresenter Grid.Column="0"
Grid.Row="1"/>
</Grid>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</ItemsControl.Resources>
<ItemsControl.GroupStyle>
<GroupStyle ContainerStyle="{StaticResource GroupHeaderStyle}">
<GroupStyle.Panel>
<ItemsPanelTemplate>
<DataGridRowsPresenter />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ItemsControl.GroupStyle>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type local:PropertySearchResult}">
<ContentPresenter Content="{Binding DisplayRepresentation}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</controls:CommandListBox>
public ListCollectionView SearchResults {
get => searchResults;
set => SetField(ref searchResults, value);
}
public string SearchString {
get => searchString;
set {
SetField(ref searchString, value);
SearchResults.Refresh();
}
}
How can I make the ListView/Layout scroller to behave like modern layout like in android or windows 10. Currently the ListView scrollbar only applies to the ListView itself. I want the scroller to scroll the whole layout including the search bar in XAML.
I want also the ListView Items added to increment to the overall height of the ListView to achieve the effect.
Any available ways to do it with Native wpf xaml (No frameworks/dlls, just pure xaml/c#)
Code:
<local:BasePage x:Class="GeneralMerchandise.UI.Pages.UsersPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:a="clr-namespace:GeneralMerchandise.UI.AttachedProperties"
xmlns:local="clr-namespace:GeneralMerchandise.UI.Pages"
xmlns:c="clr-namespace:GeneralMerchandise.UI.Converter"
xmlns:viewmodel="clr-namespace:GeneralMerchandise.UI.ViewModel"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Title="UsersPage">
<Page.DataContext>
<viewmodel:UsersViewModel x:Name="VM"/>
</Page.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical"
Grid.Row="0"
Background="{StaticResource DefaultBackground}">
<TextBlock FontSize="{StaticResource FontSizeXLarge}"
Text="Users" />
<Border BorderThickness="0 0 0 1">
<Grid>
<StackPanel Orientation="Vertical" Width="300">
<TextBox Style="{StaticResource FlatTextBox}"
Width="270"
Margin="8"
a:Hint.TextProperty="Search"
a:ClearableText.EnableClearTextProperty="True"
Text="{Binding Search, UpdateSourceTrigger=PropertyChanged}"/>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center">
<StackPanel.Resources>
<Style TargetType="RadioButton" BasedOn="{StaticResource FlatToggle}">
<Setter Property="Padding"
Value="15 10"/>
<Setter Property="BorderThickness"
Value="0 0 0 3"/>
</Style>
</StackPanel.Resources>
<RadioButton GroupName="Filter"
Content="All"
IsChecked="True"
Command="{Binding FilterActiveCommand}"
CommandParameter="{x:Static viewmodel:UsersViewModel+FilterActiveProperty.None }"/>
<RadioButton GroupName="Filter"
Content="Active"
Command="{Binding FilterActiveCommand}"
CommandParameter="{x:Static viewmodel:UsersViewModel+FilterActiveProperty.Active }"/>
<RadioButton GroupName="Filter"
Content="Deactived"
Command="{Binding FilterActiveCommand}"
CommandParameter="{x:Static viewmodel:UsersViewModel+FilterActiveProperty.Deactivated }"/>
</StackPanel>
</StackPanel>
<Button DockPanel.Dock="Right"
Content="New"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Command="{Binding NewUserCommand}"/>
</Grid>
</Border>
</StackPanel>
<ListView Grid.Row="2"
Background="Transparent"
ItemsSource="{Binding UsersDisplay}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto"
BorderThickness="0"
Padding="20">
<ListView.Resources>
<c:UserDisplayDataFullnameConverter x:Key="FullnameConverter"/>
<c:BoolToValueConverter TrueValue="Active" FalseValue="Deactivated" x:Key="BoolToStringConverter"/>
</ListView.Resources>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel HorizontalAlignment="Left" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Button Style="{StaticResource PlainButton}"
Background="White"
DataContext="{Binding}"
Width="250"
Height="150"
Padding="5"
BorderThickness="2"
Margin="{StaticResource MarginSmall}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch">
<Button.ToolTip>
<ToolTip>
<TextBlock Text="NAME"/>
</ToolTip>
</Button.ToolTip>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Ellipse Grid.Column="0"
Margin="5"
VerticalAlignment="Top"
Height="{Binding Path=ActualWidth, RelativeSource={RelativeSource Self}}"
Fill="{StaticResource LightGrayBrush}"/>
<Ellipse Grid.Column="0"
Margin="5"
VerticalAlignment="Top"
x:Name="userPicturePopup"
Height="{Binding Path=ActualWidth, RelativeSource={RelativeSource Self}}"
Width="Auto">
<Ellipse.Fill>
<ImageBrush ImageSource="{StaticResource UserIconMedium}"/>
</Ellipse.Fill>
</Ellipse>
<StackPanel Grid.Column="1"
Orientation="Vertical">
<TextBlock Text="{Binding Converter={StaticResource FullnameConverter}}"
TextWrapping="WrapWithOverflow"
Margin="10 5"/>
<TextBlock Margin="10 5"
Text="{Binding Created, StringFormat=Created {0:d}}"/>
<TextBlock Margin="10 5"
Text="{Binding IsActive, Converter={StaticResource BoolToStringConverter}, StringFormat=Account Is {0}}"/>
</StackPanel>
</Grid>
</Button>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border BorderBrush="Transparent"
BorderThickness="3"
Background="{TemplateBinding Background}">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
</Grid>
Put your ListView, search bar, and whatever else you want to scroll inside of a ScrollViewer.
I have a ListView inside a ListView and when the mouse is over the inner ListView, the outer ListView stops scrolling.
The scroll works when the mouse is over the items in the outer ListView and when the mouse is over the scroll bar.
XAML:
<Window x:Class="ListViewInsideListViewNoteScrolling.CheckForUpdatesView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="CheckForUpdatesView" Height="300" Width="500">
<Grid>
<ListView Grid.Row="0" Margin="20 10" BorderThickness="0" BorderBrush="Transparent"
HorizontalAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.CanContentScroll="False"
ItemsSource="{Binding VersionsDetails}"
ItemContainerStyle="{StaticResource CheckForUpdatesListView}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="400">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" FontWeight="Bold">
<Run Text="Version "/> <Run Text="{Binding Number}"/>
</TextBlock>
<TextBlock Grid.Row="1" Text="{Binding Description}" TextWrapping="Wrap"/>
<ListView Grid.Row="2" Margin="10 0 0 0" BorderThickness="0" BorderBrush="Transparent"
ItemsSource="{Binding Details}"
ItemContainerStyle="{StaticResource CheckForUpdatesListView}">
<ListView.ItemTemplate>
<DataTemplate>
<BulletDecorator Margin="4">
<BulletDecorator.Bullet>
<Ellipse Height="5" Width="5" Fill="Black"/>
</BulletDecorator.Bullet>
<TextBlock TextWrapping="Wrap" Text="{Binding}" Width="350"></TextBlock>
</BulletDecorator>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!--<TextBlock Grid.Row="3" Text="{Binding Details, Converter={StaticResource ListToTextConverter}}" TextWrapping="Wrap"/>-->
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Window>
Style:
<Style x:Key="CheckForUpdatesListView" TargetType="ListViewItem">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border" Padding="0" BorderThickness="0" SnapsToDevicePixels="true" Background="Transparent">
<ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="Transparent"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
VersionsDetails is a List<VersionInfo>
public class VersionInfo
{
public string Number { get; set; }
public string Description { get; set; }
public List<string> Details { get; set; }
}
One possible solution is, instead of the inner ListView, to use this line
<TextBlock Grid.Row="3" Text="{Binding Details, Converter={StaticResource ListToTextConverter}}" TextWrapping="Wrap"/>
which will convert my list into a bulleted string, but the styling is better with the ListView.
I am also open to suggestions for using other Wpf controls/elements to solve this issue.
A nice solution would be to create a behavior to ignore mouse wheel.
1> Import System.Windows.Interactivity
2> Create the behavior:
public sealed class IgnoreMouseWheelBehavior : Behavior<UIElement>
{
protected override void OnAttached()
{
base.OnAttached();
AssociatedObject.PreviewMouseWheel += AssociatedObjectPreviewMouseWheel;
}
protected override void OnDetaching()
{
AssociatedObject.PreviewMouseWheel -= AssociatedObjectPreviewMouseWheel;
base.OnDetaching();
}
private void AssociatedObjectPreviewMouseWheel(object sender, MouseWheelEventArgs e)
{
e.Handled = true;
var mouseWheelEventArgs = new MouseWheelEventArgs(e.MouseDevice, e.Timestamp, e.Delta)
{
RoutedEvent = UIElement.MouseWheelEvent
};
AssociatedObject.RaiseEvent(mouseWheelEventArgs);
}
3> Attached the behavior to your inside ListView
<ListView Grid.Row="2" Margin="10 0 0 0" BorderThickness="0"
ItemsSource="{Binding Details}"
ItemContainerStyle="{StaticResource CheckForUpdatesListView}">
<i:Interaction.Behaviors>
<local:IgnoreMouseWheelBehavior />
</i:Interaction.Behaviors>
<ListView.ItemTemplate>
<DataTemplate>
<BulletDecorator Margin="4">
<BulletDecorator.Bullet>
<Ellipse Height="5" Width="5" Fill="Black"/>
</BulletDecorator.Bullet>
<TextBlock TextWrapping="Wrap" Text="{Binding}" Width="350"></TextBlock>
</BulletDecorator>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Inspired by this close question : Bubbling scroll events from a ListView to its parent
I have a WPF listbox and have updated the list item data template to have essentially a 3 column layout.
I would like:
|status color|name| buttons|
These are probably CSS terms but I want to float the status color and name to the left, which I've done, then I would like the buttons to be floated to the right, and always stay to the right even as the window gets wider.
I feel like I'm so close, the list item widths grow when the window gets wider, all I feel I have to do is tell the buttons to float right but can't figure out how. I've tried stack panels, a grid with a auto|*|auto column layout (With a stretch on the last column) and I've tried a dockpanel.
Here's my XAML:
<Controls:MetroWindow x:Class="Appsecute.Views.MainView2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:AppsecuteControls="clr-namespace:Appsecute.Controls"
Title="APPSECUTE" Height="630" Width="480" Icon="/Appsecute;component/Images/icon.png" WindowStartupLocation="CenterScreen">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro.Resources;component/Icons.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid Margin="0,0,12,0">
<AppsecuteControls:NotifyIcon
x:Name="NotifyIcon"
Text="Appsecute"
Icon="/Images/icon.ico" MouseDoubleClick="NotifyIconMouseDoubleClick" Grid.ColumnSpan="2">
<AppsecuteControls:NotifyIcon.ContextMenu>
<ContextMenu StaysOpen="False">
</ContextMenu>
</AppsecuteControls:NotifyIcon.ContextMenu>
</AppsecuteControls:NotifyIcon>
<Grid Height="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="auto" Margin="12,0,0,24">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Content="APPLICATIONS" Height="auto" Name="LabelApplications" Grid.Row="0" Padding="2" Margin="0,8,0,0" VerticalAlignment="Top" />
<ListBox Height="auto" Name="ListBoxApplications" Width="auto" Grid.Row="1" Grid.ColumnSpan="3" Focusable="False" Background="White" BorderBrush="{x:Null}" SelectionChanged="ListBoxApplicationsSelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="Padding" Value="0"></Setter>
<Setter Property="Background" Value="#EEEEEE"></Setter>
<Setter Property="BorderBrush" Value="White"></Setter>
<Setter Property="BorderThickness" Value="0,0,0,2"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="#FF4EA6EA"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal">
<Rectangle Fill="{Binding StateColor}" Width="5" Height="auto" Margin="0,0,5,0"></Rectangle>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal" Margin="0,4,0,0">
<TextBlock Text="{Binding DisplayName}" FontSize="20" Padding="2" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,4">
<TextBlock Text="{Binding CloudName}" FontSize="12" Foreground="#FF666666" />
<TextBlock Text=" - " FontSize="12" Foreground="#FF666666" />
<TextBlock Text="{Binding Username}" FontSize="12" Foreground="#FF666666" />
</StackPanel>
</StackPanel>
</StackPanel>
<DockPanel Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">
<Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Tag="{Binding}" Name="ButtonUpload" ToolTip="Upload Application" Click="ButtonUploadClick">
<StackPanel>
<Image Width="24" Height="24" Source="/Appsecute;component/Images/upload.png"/>
</StackPanel>
</Button>
<Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Tag="{Binding}" Name="ButtonStart" Click="ButtonStartClick" ToolTip="Start Application" IsEnabled="{Binding IsStopped}">
<StackPanel>
<Image Width="24" Height="24" Source="/Appsecute;component/Images/play.png" />
</StackPanel>
</Button>
<Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Tag="{Binding}" Name="ButtonStop" ToolTip="Stop Application" Click="ButtonStopClick" IsEnabled="{Binding IsStarted}">
<StackPanel>
<Image Width="24" Height="24" Source="/Appsecute;component/Images/stop.png"/>
</StackPanel>
</Button>
<Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Click="ButtonRestartClick" Tag="{Binding}" Name="ButtonRestart" ToolTip="Restart Application">
<StackPanel>
<Image Width="24" Height="24" Source="/Appsecute;component/Images/restart.png"/>
</StackPanel>
</Button>
</DockPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Label Content="SERVICE INSTANCES" Height="auto" Name="LabelServiceInstances" Grid.Row="2" Grid.ColumnSpan="3" Padding="2" Margin="0,8,0,0" VerticalAlignment="Top" />
<ListBox Height="auto" Name="ListBoxServiceInstances" Width="auto" Grid.Row="3" Grid.RowSpan="2" Grid.ColumnSpan="3" />
</Grid>
<Label Height="28" HorizontalAlignment="Left" Margin="0,0,0,0" Name="LabelStatus" VerticalAlignment="Bottom" Width="auto" VerticalContentAlignment="Bottom" HorizontalContentAlignment="Stretch" FontSize="10" />
</Grid>
</Controls:MetroWindow>
And an image of what I'm trying to achieve:
The problem is at the first level below DataTemplate, here:
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
By its nature a StackPanel will align items to the left, so it's not a layout that's well suited to what you want to do. Instead try using a Grid with two columns, giving the left column Width=* and the right Width=Auto.
<ListBox HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Vertical">
...
</StackPanel>
<DockPanel Grid.Column="1" VerticalAlignment="Center">
...
</DockPanel>
</Grid>
<DataTemplate>
</ListBox.ItemTemplate>
<ListBox>
In your ItemContainerStyle, set the HorizontalAlignment to Stretch. I believe it is Left by default, which may be causing the Grid or StackPanel or whatever container you use to collapse.