Develop Reference

How can I improve the layout for this Input Screen?

Right now I have this XAML layout for my WPF application:
<Window x:Class="Cabrillo_Editor.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Cabrillo_Editor"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="_Exit" Click="ExitApplication"/>
<MenuItem Header="_New"/>
<MenuItem Header="_Save" Click="SaveCabrilloFile"/>
</Menu>
<StackPanel>
<GroupBox Height="Auto" Header="General">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="185"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="5"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" Grid.Column="0" Margin="0,0,0,5">
<Label>My Call:</Label>
<TextBox Width="120" Name="CallsignTextBox" HorizontalAlignment="Right" CharacterCasing="Upper"/>
</DockPanel>
<DockPanel Grid.Row="2" Grid.Column="0">
<Label>My Grid:</Label>
<TextBox Width="120" Name="GridTextBox" HorizontalAlignment="Right"/>
</DockPanel>
<DockPanel Grid.Row="0" Grid.Column="2">
<Label>Contest:</Label>
<ComboBox Width="150" Name="ContestComboBox" Margin="5,0,0,0"/>
</DockPanel>
<DockPanel Grid.Row="2" Grid.Column="2">
<Label>Assisted:</Label>
<CheckBox VerticalAlignment="Center" Name="AssistedCheckBox" Margin="5,0,0,0"/>
</DockPanel>
<DockPanel Grid.Row="0" Grid.Column="4">
<Label>Band:</Label>
<ComboBox Width="150" Name="BandComboBox" Margin="5,0,0,0"/>
</DockPanel>
</Grid>
</GroupBox>
</StackPanel>
</DockPanel>
</Window>
And it looks like this:
Why, for example, is are the ComboBoxes so streched if I set the row height to "Auto" (same for the TextBoxes)?
Is there a better way to make consistent horizontal space between the columns?

This is occurring because those controls will stretch to fill their parent container by default. To override this, simply set the VeriticalAlignment property and Height property (if needed).
<ComboBox Width="150" Name="ContestComboBox" Margin="5,0,0,0" VerticalAlignment=Top/>

WPF - Binding in ListView's ItemsSource cannot be a List

I have a WPF application that I try to code using MVVM.The goal is to make something like a notification center, that lists different types of data.
To do this, I want to fill a ListView on the main page with different ViewModels. One ViewModel for each type of data.
The problem is:
When I put a (not a list) ViewModel in my ListView, it works fine. But if I put a list in my ListView, the program crashes on startup. I need the ListView to take a list (ObservableCollection perhaps) of mixed ViewModels.
I receive the error “Items collection must be empty before using ItemsSource.” at a seemingly random location in my code. Completely removing the code where the exception appears just causes it to show somewhere else.
I have the following:
C#:
public class MainViewModel : ObservableObject
{
private List<IPageViewModel> _items;
public MainViewModel()
{
_items = new List<IPageViewModel>
{
new StatusViewModel(),
new SettingsViewModel(),
new OverviewViewModel()
};
}
public List<IPageViewModel> Items => _items ?? (_items = newList<IPageViewModel>());
}
XAML:
<Window x:Class="InfoCenter.Views.Main.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:test="clr-namespace:InfoCenter.Views.Test"
xmlns:main="clr-namespace:InfoCenter.Views.Main"
xmlns:views="clr-namespace:InfoCenter.Views"
xmlns:settings="clr-namespace:InfoCenter.Views.Settings"
xmlns:status="clr-namespace:InfoCenter.Views.Status"
xmlns:overview="clr-namespace:InfoCenter.Views.Overview"
mc:Ignorable="d"
Title="MainView" Height="450" Width="500"
MaxWidth="1920"
WindowStyle="None" Loaded="MainViewLoaded"
SizeChanged="MainViewSizeChanged"
PreviewKeyDown="OnPreviewKeyDown"
GotFocus="OnGotFocus"
Closing="OnClosing"
ResizeMode="NoResize"
d:DataContext="{d:DesignInstance main:MainViewModel}">
<Window.Resources>
<DataTemplate DataType="{x:Type overview:OverviewViewModel}">
<overview:OverviewView />
</DataTemplate>
<DataTemplate DataType="{x:Type status:StatusViewModel}">
<status:StatusView />
</DataTemplate>
<DataTemplate DataType="{x:Type settings:SettingsViewModel}">
<settings:SettingsView />
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="24" />
<RowDefinition Height="*" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="24" />
</Grid.ColumnDefinitions>
<Button Command="{Binding ButtonClickCommand}" CommandParameter="Minimize" Grid.Row="0" Grid.Column="1">
<Image Source="/Resources/arrow-down-1.png"></Image>
</Button>
<ListView ItemsSource="{Binding Items}" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" ScrollViewer.HorizontalScrollBarVisibility="Hidden" PreviewMouseWheel="OnPreviewMouseWheel" ScrollViewer.VerticalScrollBarVisibility="Hidden">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="{Binding Path=Items.Header}" />
<ContentControl Grid.Row="1" Grid.Column="0" Content="{Binding}" />
</Grid>
</ListView>
<StatusBar FlowDirection="RightToLeft" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
<Image Width="24" Height="24" Source="{Binding ConnectionIcon}" />
</StatusBar>
</Grid>
</Window>
I really hope that you can help. I have been trying to fix it the whole day!

You have put one thing in the ListView contents here: A Grid control. Don't do that. There are two ways to populate a ListView in XAML: Bind ItemsSource or put items inside the content of the ListView element. You can't do both, and you did both, so it threw an exception.
Here's the ItemsSource version.
<ListView
ItemsSource="{Binding Items}"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
PreviewMouseWheel="OnPreviewMouseWheel"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
/>
I'm not certain what that Grid is for; you may have to find somewhere else to put it.
But my guess is that want it to be used to display the items. We can do that by making it into an ItemTemplate. I'm a little confused by it, though: What is Items.Header? Items is a List, which has no Header property. Does IPageViewModel have a Header property? For the moment I'll assume that's the case; let me know if I'm mistaken.
<ListView
ItemsSource="{Binding Items}"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
PreviewMouseWheel="OnPreviewMouseWheel"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label
Grid.Row="0"
Grid.Column="0"
Content="{Binding Header}"
/>
<ContentControl
Grid.Row="1"
Grid.Column="0"
Content="{Binding}"
/>
</Grid>
<DataTemplate>
</ListView.ItemTemplate>
</ListView>

Based on the error I would recommend to change your XAML as was mentioned earlier in "Items collection must be empty before using ItemsSource."
Try this XAML:
<ListView ItemsSource="{Binding Items}" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" ScrollViewer.HorizontalScrollBarVisibility="Hidden" PreviewMouseWheel="OnPreviewMouseWheel" ScrollViewer.VerticalScrollBarVisibility="Hidden">
<ListView.View>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="{Binding Path=Items.Header}" />
<ContentControl Grid.Row="1" Grid.Column="0" Content="{Binding}" />
</Grid>
</ListView.View>
</ListView>
Hope it will be helpful!

C# WPF - How to Change a 'Preferences' Window's Displayed Grid using a ListView?

I am currently in the process of making a 'Preferences' window in my C# WPF program.
The aim of this window is to have a ListView on the left, and a list of tweakable controls on the right.
Each item in the ListView directly corresponds to a Grid that contains all of the controls under the selected item's content.
Once the item in the ListView is changed, the current grid's visibility must be collapsed, and the grid that corresponds to the item selected's visibility must be changed to visible.
I thought that DataBinding might work for this, however I have no idea how to use it. Could someone please inform me how to implement this feature?
I have only one grid at the moment. The whole window looks like this:
<Window x:Class="DarkOrbit_Skill_Price_Calculator.DarkOrbit_Skill_Price_Calculator___Preferences"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:DarkOrbit_Skill_Price_Calculator"
mc:Ignorable="d"
Title="DarkOrbit Skill Price Calculator - Preferences" Height="360" Width="640" WindowStartupLocation="CenterScreen" WindowStyle="ToolWindow">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ListView Name="ListView_PreferenceOption" Width="150" Margin="5" SelectionChanged="SelectionChanged_ListView_PreferenceOption">
<ListViewItem IsSelected="True">
<StackPanel Orientation="Horizontal">
<Image Source="Images\Installing Updates.png" Height="35"/>
<TextBlock Text="Update" FontSize="14" FontFamily="Segoe UI" VerticalAlignment="Center" Margin="5"/>
</StackPanel>
</ListViewItem>
</ListView>
<Grid Margin="5" Name="Grid_Update" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Label Content="Update Version Architecture" VerticalAlignment="Center"/>
<ComboBox IsReadOnly="True" Width="100" Margin="5">
<ComboBoxItem Content="64-Bit"/>
<ComboBoxItem Content="32-Bit" IsSelected="True"/>
</ComboBox>
</StackPanel>
</Grid>
</Grid>
</Window>
I have absolutely no clue as to how to swap the grid depending on the index selected.

You can bind the visibility of each grid to the selected state of its corresponding list item by referencing the ListViewItem element. Something like this:
<Grid>
<Grid.Resources>
<BooleanToVisibilityConverter x:Key="Converter" />
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ListView Width="150" Margin="5">
<ListViewItem IsSelected="True" x:Name="One">
<TextBlock Text="Update" FontSize="14" FontFamily="Segoe UI"
VerticalAlignment="Center" Margin="5"/>
</ListViewItem>
<ListViewItem IsSelected="False" x:Name="Two">
<TextBlock Text="Foo" FontSize="14" FontFamily="Segoe UI"
VerticalAlignment="Center" Margin="5"/>
</ListViewItem>
</ListView>
<Grid Margin="5" Grid.Column="1"
Visibility="{Binding IsSelected, ElementName=One, Converter={StaticResource Converter}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Label Content="Update Version Architecture" VerticalAlignment="Center"/>
<ComboBox IsReadOnly="True" Width="100" Margin="5">
<ComboBoxItem Content="64-Bit"/>
<ComboBoxItem Content="32-Bit" IsSelected="True"/>
</ComboBox>
</StackPanel>
</Grid>
<Grid Margin="5" Grid.Column="1"
Visibility="{Binding IsSelected, ElementName=Two, Converter={StaticResource Converter}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Label Content="Update Something Else" VerticalAlignment="Center"/>
<ComboBox IsReadOnly="True" Width="100" Margin="5">
<ComboBoxItem Content="64-Bit"/>
<ComboBoxItem Content="32-Bit" IsSelected="True"/>
</ComboBox>
</StackPanel>
</Grid>
</Grid>

For those who are having the same predicament and want to use C# code to make this work, I eventually thought of the following code:
StackPanel[] allGrids = { Grid_1, Grid_2, Grid_3, Grid_4, ... }; //Replace StackPanel with the
//type of control you are using, e.g. Grid or WrapPanel.
foreach (StackPanel grid in allGrids)
{
grid.Visibility = Visibility.Collapsed; //collapse all grids
}
allGrids[(your listview/other control).SelectedIndex].Visibility = Visibility.Visible;
//make the grid you need visible

Maximize a window --> the Grid should grow with the Window C# WPF

i have a short question.
I have a Grid definied like this :
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
In this Grid is a lot of stuff like Buttons, Textboxes, Menubar, Datagrid and so on.
My question is:
When i maximize the Window, how can i provide a growing Grid?
All the stuff in the Grid is coppled with the margin of the Grid, so if i manually resize the Grid the stuff still stay on the right place, so i just need to now how to let the Grid grow with the Window if the user clicks on this sqaure in the top right of the window to maximize it :)
Edit:
XAML Usercontroll:
<UserControl x:Class="View.PatientListView"
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:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
mc:Ignorable="d" d:DesignWidth="1625" Height="750">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Menu Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Width="Auto">
<MenuItem Header="Datei">
<!--<MenuItem.Icon>
<Image Source="datei.jpg" Width="20" Height="20"/>
</MenuItem.Icon>-->
<MenuItem Header="Suchoptionen" Click="MenuItem_Click" >
<MenuItem.Icon>
<Image Source="Suchfeld-Lupe.png"/>
</MenuItem.Icon>
</MenuItem>
</MenuItem>
</Menu>
<Grid Grid.Column="0" Grid.Row="1" Margin="-10,5,10,-5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1258*"/>
<ColumnDefinition Width="367*"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="teingabe" x:FieldModifier="public" KeyboardNavigation.TabIndex="1" HorizontalAlignment="right" Height="23" Margin="0,40,130,0" TextWrapping="Wrap" Text="{Binding Suchstring, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Top" Width="230" ToolTip="Mehrere Eingaben (max. 3) durch "," Trennung: Datensatz1 , Datensatz2 , Datensatz3" TextAlignment="Left" Grid.Column="1">
<TextBox.InputBindings>
<KeyBinding Gesture="Enter"
Command="{Binding Searchcommand}" />
</TextBox.InputBindings>
</TextBox>
<TextBox x:Name="tAnrede" x:FieldModifier="public" KeyboardNavigation.TabIndex="9" HorizontalAlignment="Right" Height="23" Margin="0,400,190,0" TextWrapping="Wrap" Text="{Binding Anrede,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="170" IsEnabled="{Binding Einschalten}" VerticalAlignment="Top" TextAlignment="Left" Grid.Column="1"/>
<TextBox x:Name="tKostentraegerlk" x:FieldModifier="public" KeyboardNavigation.TabIndex="4" HorizontalAlignment="Right" Height="22" Margin="0,175,10,0" TextWrapping="Wrap" Text="{Binding Kostentraegerlk, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Top" Width="170" IsEnabled="{Binding Einschalten}" TextAlignment="Left" Grid.Column="1">
</TextBox>
<Button x:Name="start" Content="Suche" HorizontalAlignment="right" Margin="0,40,10,0" VerticalAlignment="Top" Width="110" Height="23" Command="{Binding Searchcommand}" Grid.Column="1">
</Button>
After this there only more controlls.
The Window XAML:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:View="clr-namespace:View"
x:Name="Window"
x:Class="StartApplication.MainWindow"
Title="Verwaltung" Height="773" Width="1632" Closing="Window_Closing" KeyDown="Window_KeyDown" >
<View:PatientListView x:Name="plistview" HorizontalAlignment="Left" VerticalAlignment="Top" Width="1622" Height="750"/>
</Window>
Edit:
NVM i saw my mistake ...
Wtf, im so blind. Sorry :(

the important stuff is where your grid is within. in the code below the grid resize with the window
<Window>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
</Grid>
</Window>

WPF ItemsControl content cropping rather than scrolling

I have a .NET 4.0 WPF application using the MVVM pattern and I've been unable to achieve the desired outcome on one of the screens (UserControl as View). I have stripped down most of the page to show the core of the problem. The page consists of a grid with three rows and one column. The first row contains header text and the last row contains a Save button. The middle row contains a grid with one row and column and displays an ObservableCollection in an ItemsControl with a data template of a custom user control. There are ten items in the collection and I want them to display in two columns and five rows so I have a WrapPanel as an ItemsPanelTemplate.
I want the ItemsControl to scroll within the available space but it is expanding to the size of content and most of it is being cropped off the bottom of the page.
I am listing the XAML for user control the ObservableCollection uses as a data template and the XAML for the main page below that. Any help is greatly appreciated.
<UserControl x:Class="OIL.UserControls.ShopNotes.ShopNoteComponent"
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"
mc:Ignorable="d"
d:DesignHeight="120" d:DesignWidth="150">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" Width="140" Margin="5,5,5,5" HorizontalAlignment="Center" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1" CornerRadius="5">
<StackPanel Width="120" Margin="0,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Top" Orientation="Vertical">
<Image Height="25" Width="30" HorizontalAlignment="Left" Source="/OIL;component/Images/BlueCam.png">
<Image.ToolTip>
<Image Source="{Binding Path=ToolTipImagePath}" />
</Image.ToolTip>
</Image>
<Label Style="{DynamicResource LargeText}" Content="{Binding Path=ComponentTitle}" />
<CheckBox Width="80" Margin="0,5,0,5" HorizontalAlignment="Left" Style="{DynamicResource NormalText}" Content=" Mandatory?"
IsChecked="{Binding Path=ComponentMandatory, Mode=TwoWay}"
IsEnabled="{Binding Path=ComponentSelected}" />
<CheckBox Width="15" Margin="0,5,0,5" HorizontalAlignment="Center"
IsChecked="{Binding Path=ComponentSelected, Mode=TwoWay}" />
</StackPanel>
</Border>
</Grid>
And here is the main XAML page:
<UserControl x:Class="OIL.View.ConfiguratorViews.Configurator_ShopNotes_Tab"
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:igWPF="http://infragistics.com/Editors"
xmlns:uc="clr-namespace:OIL.UserControls.ShopNotes"
mc:Ignorable="d"
d:DesignHeight="570" d:DesignWidth="866">
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<DataTemplate x:Key="ShopNotesComponentsTemplate">
<uc:ShopNoteComponent />
</DataTemplate>
</UserControl.Resources>
<Border Margin="10" CornerRadius="13" BorderThickness="3" BorderBrush="#FF666666">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
<Button Height="30" Width="75" Margin="10,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Background="{x:Null}"
Command="{Binding Path=AddNewTemplateCommand}"
Content="Add" />
<Button Height="30" Width="75" Margin="10,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Background="{x:Null}"
Command="{Binding Path=EditTemplateCommand}"
Content="Edit" />
<Grid Margin="10,5,0,5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Visibility="{Binding Path=IsNewTemplate, Converter={StaticResource BooleanToVisibilityConverter}}">
<TextBox Height="30" Width="250" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{DynamicResource NormalText}" Text="{Binding Path=TemplateDescription}" />
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Visibility="{Binding Path=IsEditedTemplate, Converter={StaticResource BooleanToVisibilityConverter}}">
<igWPF:XamComboEditor Name="cmbShopNotesTemplate" Height="30" HorizontalAlignment="Left" VerticalAlignment="Center"
ItemsSource="{Binding Path=ShopNoteTemplates, Mode=TwoWay}"
DisplayMemberPath="CONFIGURATION_DESC"
SelectedItem="{Binding Path=SelectedShopNoteTemplate, ValidatesOnDataErrors=True}"
Value="Select Shop Notes Template"
NullText="Select Shop Notes Template"
IsEditable="True">
</igWPF:XamComboEditor>
</StackPanel>
</Grid>
</StackPanel>
<Grid Grid.Row="1" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Height="30" Margin="0,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{DynamicResource NormalText}" Content="* Hover over camera icon to view Shop Note component" />
<ItemsControl Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left"
ItemsSource="{Binding Path=ShopNoteComponents, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
ItemTemplate="{StaticResource ShopNotesComponentsTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Width="300" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
<Button Grid.Row="2" Grid.Column="0" Height="30" Width="150" Margin="10,10,0,10" HorizontalAlignment="Left" VerticalAlignment="Center"
Background="{x:Null}"
Command="{Binding Path=SaveTemplateCommand}"
Content="Save" />
</Grid>
</Border>
EDIT: Changed question title as I have removed the ScrollViewer between starting the question and actually posting it. Also, noticed the Save button was in the inner grid rather than outer grid so I have corrected that (no change in rendering).

An ItemsControl does not have its own ScrollViewer like a ListBox. You can either replace you ItemsControl with a ListBox, or simply wrap it in a ScrollViwer, being careful to move the Grid.Row and Grid.Column settings like this:
<ScrollViewer Grid.Row="1" Grid.Column="0">
<ItemsControl HorizontalAlignment="Left" ItemsSource="{Binding Path=Items,
UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
ItemTemplate="{StaticResource ShopNotesComponentsTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Width="300" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>