Develop Reference

ListView Scroll whole layout/page

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.

DataGrid with resizable height

I have a DataGrid wrapped in a Grid<-StackPanel and my problem is when I resize the window, DataGrid won't stretch and it's just adding blank space at the end.
I have tried binding and VerticalAlignment="Stretch" but to luck.
<Window x:Name="window" x:Class="ListViewExcel"
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:local="clr-namespace:F"
Width="905.35"
SizeToContent="Height" WindowStartupLocation="CenterScreen" WindowStyle="None"
BorderThickness="0" BorderBrush="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" >
<Border x:Name="BorderCustomDialog" Background="Gold" >
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid>
<TextBlock x:Name="TbCaption" VerticalAlignment="Center" Text="TimeLiner"
Foreground="{DynamicResource {x:Static SystemColors.ActiveCaptionTextBrushKey}}"
Padding="11" FontWeight="Bold"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Image x:Name="Minimize" MouseLeftButtonDown="miniWin" Source="../Resources/minimizebutton.png" Height="25" Width="25" Margin="3,3" />
<Image x:Name="Maximize" MouseLeftButtonDown="maxiWin" Source="../Resources/maximizebutton.png" Height="25" Width="25" Margin="3,3"/>
<Image x:Name="Close" MouseLeftButtonDown="closeWin" Source="../Resources/closebutton.png" Height="25" Width ="25" Margin="0,3,10,3"/>
</StackPanel>
</Grid>
<Grid x:Name="grid" Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="50"/>
<RowDefinition Height="Auto" MinHeight="300"/>
<RowDefinition Height="Auto" MinHeight="65"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Image x:Name="ImgInstructionIcon"
Grid.Column="0" Grid.Row="0"
HorizontalAlignment="Left" Margin="32,10,0,0" VerticalAlignment="Top"
Source="../Resources/edit2.jpg" Height="42" Width="48" />
<TextBlock x:Name="TbInstructionHeading" Grid.Row="0" Margin="96,14,112,13"
Text="List View to Excel"
HorizontalAlignment="Stretch" VerticalAlignment="Center" TextWrapping="Wrap"
FontSize="18" Foreground="Goldenrod" Padding="7"/>
<Separator Margin="0" Height="5" VerticalAlignment="Bottom"/>
</Grid>
<Grid Grid.Row="1" Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<DataGrid x:Name="dataGrid1"
Margin="20,20,20,25" ScrollViewer.VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
CanUserAddRows="False" Height="500">
<DataGrid.Style>
<Style TargetType="DataGrid">
<Setter Property="RowBackground" Value="Wheat" />
<Setter Property="AlternatingRowBackground" Value="WhiteSmoke" />
</Style>
</DataGrid.Style>
<DataGrid.CellStyle >
<Style TargetType="DataGridCell">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="LightBlue" />
<Setter Property="Foreground" Value="Black" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.CellStyle>
</DataGrid>
<Separator Margin="0" Height="5" VerticalAlignment="Bottom"/>
</Grid>
<Grid Grid.Row="2" Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Background="#FFECECEC" BorderBrush="#FFC9C9C9" BorderThickness="0,1,0,1" Margin="0,0,0,0" >
<Grid Grid.Row="3" Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button x:Name="btnCodetoExcel" Content="List to Excel" HorizontalAlignment="Left" VerticalAlignment="Top" Width="96" Height="25" Margin="38,10,0,0" Click="btnCodetoExcel_Click"/>
<Button x:Name="btnExit" Content="Exit" VerticalAlignment="Top" Margin="0,10,30,0" HorizontalAlignment="Right" Width="75" Height="25" Click="btnExit_Click"/>
</Grid>
</Border>
</Grid>
</Grid>
</StackPanel>
</Border>
</Window>

If you put a control inside a StackPanel it will be take only the space it need to be visualised, so it will not stretch.
For a dynamic view I almost always use a grid with row and column definitions.

Adding combobox to Ribbon Control in XAML

I have a WPF Application with a Ribbon Control. I want to add a ComboBox, to show the logged in user next to the help button. But when I try to add the ComboBox, it is created as a Tab.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Ribbon x:Name="RibbonWin" SelectedIndex="0" Margin="0,0,0,113">
<Ribbon.HelpPaneContent>
<RibbonButton SmallImageSource="Images\help.png"></RibbonButton>
</Ribbon.HelpPaneContent>
<RibbonComboBox>
<ComboBoxItem Content="Test1"/>
</RibbonComboBox>
<RibbonTab Header="Home" KeyTip="H" Margin="0,0,0,-1" >
<RibbonGroup x:Name="ClipboardGroup" Header="Clipboard">
<RibbonMenuButton LargeImageSource="Images\paste.jpg" Label="Paste" KeyTip="V">
<RibbonMenuItem ImageSource="Images\paste.jpg" Header="Keep Text Only" KeyTip="T"/>
<RibbonMenuItem ImageSource="Images\paste.jpg" Header="Paste Special..." KeyTip="S"/>
</RibbonMenuButton>
<RibbonButton SmallImageSource="Images\cut.jpg" Label="Cut" KeyTip="X" />
<RibbonButton SmallImageSource="Images\copy.jpg" Label="Copy" KeyTip="C" />
</RibbonGroup>
<RibbonGroup x:Name="Questions" Header="Questions And Answers">
<RibbonMenuButton LargeImageSource="Images\Question.jpg" Label="Questions" KeyTip="V">
<RibbonMenuItem ImageSource="Images\paste.jpg" Header="Add Question" KeyTip="T"/>
<RibbonMenuItem ImageSource="Images\paste.jpg" Header="Paste Special..." KeyTip="S"/>
</RibbonMenuButton>
<RibbonButton SmallImageSource="Images\Save.jpg" Label="Save" KeyTip="X" />
<RibbonButton SmallImageSource="Images\Add.jpg" Label="Add" KeyTip="C" />
</RibbonGroup>
</RibbonTab>
<RibbonTab Header="Insert" KeyTip="I">
</RibbonTab>
<RibbonTab Header="PageLayout" KeyTip="L">
</RibbonTab>
</Ribbon>
</Grid>
Also is there a way to remove the the Application Menu ComboBox on the left that is created by default.

Put a RibbonApplicationMenu into the ApplicationMenu-property and set its Visibility to 'Collapsed'. This will not remove the application menu, but at least it is not longer visible. There is not other way to hide it.
The ComboBox must be inserted into a RibbonTab, so a RibbonTab will be created implicitly if you do not specify anyone.
The following example demonstrates how to hide the application menu and insert a combo box:
<Ribbon>
<Ribbon.ApplicationMenu>
<RibbonApplicationMenu Visibility="Collapsed"></RibbonApplicationMenu>
</Ribbon.ApplicationMenu>
<RibbonTab>
<RibbonGroup>
<RibbonComboBox></RibbonComboBox>
</RibbonGroup>
</RibbonTab>
</Ribbon>

I got it from my friend,
this might help you
Create your own template and add it to Ribbon HelpPaneContentTempalte
<Ribbon.HelpPaneContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="24">
<ToggleButton x:Name="btn" >
<TextBlock Text="Operator"/>
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=btn}" x:Name="Popup" StaysOpen="False" Placement="Bottom"
PlacementTarget="{Binding ElementName=btn}" Height="120" Width="150" HorizontalOffset="-90" >
<Popup.Resources>
<Style x:Key="LinkButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<TextBlock>
<ContentPresenter />
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="Blue" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</Popup.Resources>
<Border BorderBrush="Gray" BorderThickness="2" Background="White" >
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal" Height="50">
<Image Source="Images\UserPhoto.png" Height="30"/>
<StackPanel VerticalAlignment="Center">
<TextBlock Text="Operator" FontSize="16" Margin="10,0,0,0"/>
<TextBlock Text="Operator#xxx.com" FontSize="10" Foreground="DarkGray" Margin="10,0,0,0"/>
</StackPanel>
</StackPanel>
<Separator Background="LightGray"/>
<StackPanel Height="30">
<Button x:Name="btnAccountSettings" Content="Account Settings" Style="{StaticResource LinkButton}" Width="100" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"></Button>
</StackPanel>
<Separator Background="LightGray"/>
<StackPanel Height="30">
<Button x:Name="btnSwitchAccount" Content="Switch Account" Style="{StaticResource LinkButton}" Width="100" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"></Button>
</StackPanel>
</StackPanel>
</Border>
</Popup>
<ContentPresenter Content="{TemplateBinding Property= ContentControl.Content}" />
</StackPanel>
</DataTemplate>
</Ribbon.HelpPaneContentTemplate>
<Ribbon.HelpPaneContent>
<RibbonButton x:Name="btnHelp" SmallImageSource="Images\help.png" />
</Ribbon.HelpPaneContent>

How to animate items in stackpanel animation

I am working on wpf animation.
I need to Translate a stackpanel inside the grid from left to right.
It starts its translation from behind the grid.its work but some part of stackpanel crop by the grid.
If increase the width i can see the full of stack panel.How can solve this issue without increasing the width of Grid.
Here is my code :
<Grid x:Name="OuterGrid">
<Grid.Background>
<ImageBrush ImageSource="pack://application:,,,/Resources/Images/Home/home_bg#2x.png"></ImageBrush>
</Grid.Background>
<Grid x:Name="imgBase" Opacity="0">
<Grid.Background>
<ImageBrush ImageSource="pack://application:,,,/Resources/Images/AboutBasheer/Characters/kadapath_bg#2x.jpg"></ImageBrush>
</Grid.Background>
</Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,-10,0,0" VerticalAlignment="Top">
<StackPanel.Resources>
<Style TargetType="{x:Type Image}">
<Setter Property="Margin" Value="30"/>
</Style>
</StackPanel.Resources>
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/p_icon1#2x.png" Width="101" Height="86" x:Name="topItem1" MouseLeftButtonDown="topItem1_MouseLeftButtonDown">
</Image>
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/p_icon2#2x.png" Width="145" Height="86" x:Name="topItem2" MouseLeftButtonDown="topItem2_MouseLeftButtonDown">
</Image>
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/p_icon3#2x.png" Width="172" Height="86" x:Name="topItem3" >
</Image>
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/p_icon4#2x.png" Width="96" Height="86" x:Name="topItem4" >
</Image>
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/p_icon5#2x.png" Width="139" Height="86" x:Name="topItem5" >
</Image>
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/p_icon6#2x.png" Width="139" Height="86" x:Name="topItem6" >
</Image>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" x:Name="AllCharacters" Opacity="0">
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/aanavari#2x.png" Width="256" Height="432" x:Name="imgRaman" />
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/kochutrasia#2x.png" Width="256" Height="432" x:Name="imgThreysya" />
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/ponkurishe_thoma#2x.png" Width="256" Height="432" x:Name="imgKurish" />
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/synaba#2x.png" Width="256" Height="432" x:Name="imgSynaba" />
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/moothappa#2x.png" Width="256" Height="432" x:Name="imgMandan" />
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/thorappan#2x.png" Width="256" Height="432" x:Name="imgThorappan" />
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/naanu#2x.png" Width="256" Height="432" x:Name="imgnanu" />
<Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/pappuni#2x.png" Width="256" Height="432" x:Name="imgdriver" />
<StackPanel.RenderTransform>
<TransformGroup>
<TranslateTransform X="1500" Y="0"></TranslateTransform>
</TransformGroup>
</StackPanel.RenderTransform>
</StackPanel>
<Grid VerticalAlignment="Bottom" HorizontalAlignment="Center" x:Name="bottombar" Width="1366" >
<Grid.Background>
<ImageBrush ImageSource="pack://application:,,,/Resources/Images/Home/book_menubg#2x.png"/>
</Grid.Background>
<Grid.RenderTransform>
<TranslateTransform Y="117" />
</Grid.RenderTransform>
<Button Width="104" Height="65" HorizontalAlignment="Right" Margin="0,-120,20,80" Style="{StaticResource MyButtonStyle}" Click="Button_Click">
<Button.Background>
<ImageBrush ImageSource="pack://application:,,,/Resources/Images/Home/main_menuButton#2x.png" />
</Button.Background>
</Button>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,20,0,0">
<StackPanel.Resources>
<Style TargetType="{x:Type Image}">
<Setter Property="Margin" Value="20"/>
</Style>
</StackPanel.Resources>
<Image Source="pack://application:,,,/Resources/Images/Home/aboutBasheerIcon#2x.png" Width="84" Height="73" x:Name="item1" />
<Image Source="pack://application:,,,/Resources/Images/Home/kithikalIcon#2x.png" Width="88" Height="75" x:Name="item2"/>
<Image Source="pack://application:,,,/Resources/Images/Home/kathakalKaanamIcon#2x.png" Width="135" Height="74" x:Name="item3"/>
<Image Source="pack://application:,,,/Resources/Images/Home/NighanduIcon#2x.png" Width="78" Height="71" x:Name="item4"/>
<Image Source="pack://application:,,,/Resources/Images/Home/kathakalKelkaamIcon#2x.png" Width="150" Height="78" x:Name="item5"/>
</StackPanel>
</Grid>
</Grid>

How to right align some elements of WPF ListItem?

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.